جاري التحميل...

تأثيرات النص في CSS

تعرف بالفعل المحاذاة والتزيين وتحميل الخطوط. تأثيرات النص تضيف لمسة فوق ذلك — ظل ناعم، أو حذف (…) عند ضيق المساحة، أو كسر سلاسل طويلة مزعجة. أبقِها خفيفة ليبقى النص سهل القراءة.

مجموعة أدوات صغيرة

📊 تأثيرات النص بنظرة واحدة

الأداة دورها اليومي
text-shadow عمق أو توهج ناعم خلف الحروف (إزاحة، ضبابية، لون)
text-overflow كيف ينتهي النص المقصوص — غالبًا ellipsis (…)
overflow + white-space شريكان يحتاجهما الحذف (hidden + nowrap)
overflow-wrap يكسر الكلمات/الروابط الطويلة لتناسب الصندوق
writing-mode يشغّل النص باتجاه آخر (مثل العمودي)

التأثيرات توابل لا الوجبة. قد يستمتع عنوان بظل هادئ؛ الفقرة الطويلة نادرًا تحتاج ألعابًا نارية.

text-shadow — إزاحة وضبابية ولون

الترتيب عادةً إزاحة أفقية ثم عمودية ثم نصف قطر الضبابية ثم اللون. القيم الصغيرة هادئة؛ الضبابية الضخمة تُبهِم الحروف.

text-shadow أساسي

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

ظلال متعددة الطبقات

يمكنك سرد أكثر من ظل مفصولة بفواصل — مفيد لرفع ناعم بلا حدود قاسية.

طبقتان ناعمتان

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

الحذف عندما يكون النص أعرض من الصندوق

text-overflow: ellipsis يعمل فقط مع إعداد قص: عادةً overflow: hidden وwhite-space: nowrap على صندوق بعرض محدود.

حذف على تسمية ضيقة

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — روّض الكلمات الطويلة

رابط طويل أو سلسلة بلا مسافات قد يفجّر عمودًا ضيقًا. overflow-wrap: break-word (والاسم الأقدم word-wrap) يسمح للمتصفح بالكسر داخل الكلمة عند الحاجة.

كسر السلاسل الطويلة

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — لمحة عمودية

writing-mode يغيّر اتجاه تقدّم الأسطر. القيم العمودية مناسبة لتسميات جانبية أو عناوين زخرفية — لا لفقرات يومية.

لمحة نص عمودي

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

عادة هادئة للعناوين

ظل ناعم واحد على عنوان قصير يكفي غالبًا. تجنّب توهجًا ثقيلًا على نص الجسم، واستخدم الحذف فقط حيث المساحة ضيقة فعلًا.

لمسة خفيفة للعنوان

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

جرّب بنفسك

  1. أضف text-shadow ناعمًا لعنوان (إزاحات صغيرة، ضبابية معتدلة).
  2. أضف ظلًا ثانيًا أخف بفاصلة.
  3. ابنِ تسمية حذف: max-width وoverflow: hidden وnowrap وellipsis.
  4. ضع رابطًا طويلًا في صندوق ضيق واضبط overflow-wrap: break-word.
  5. جرّب writing-mode: vertical-rl على تسمية جانبية قصيرة — ثم عد للقراءة العادية.

أخطاء شائعة

  • ظلال نيون متعددة على فقرات طويلة (صعبة القراءة)
  • ضبط text-overflow: ellipsis بلا overflow: hidden وnowrap
  • كسر كل كلمة بـ word-break عدواني حين يكفي overflow-wrap
  • استخدام الكتابة العمودية لمقالات كاملة
  • خلط هذا الدرس مع @font-face / تحميل خطوط الويب (الدرس السابق)

ملخص

  • text-shadow يستخدم الإزاحة والضبابية واللون — أبقِ القيم معتدلة
  • يمكن تكديس ظلال متعددة لرفع ناعم
  • الحذف يحتاج overflow وnowrap وحد عرض
  • overflow-wrap يساعد الكلمات والروابط الطويلة
  • writing-mode أداة متخصصة؛ نص الجسم اليومي يبقى أفقيًا

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 29 من 35
Css درس تعليمي