| الخاصية أو القيمة | طريقة العمل والتأثير البرمجي | الاستخدام الشائع وملاحظة الأداء والنظام |
|---|---|---|
| text-shadow | يضيف تأثيراً ضوئياً أو ظلاً خفيفاً يحيط بأحرف الكلمات لتجسيمها | يمنح العناوين عمقاً بطلاقة ويقبل ظلالاً متعددة بفصلها بفاصلة لصنع تأثيرات نيون متقدمة |
| clip | يقطع أي نص يزيد عن حجم الصندوق فوراً وبشكل حاد بدون إظهار أي علامة | التلقائي عند تفعيل خواص الإخفاء لكنه قد يقطع الكلمات من منتصفها مسبباً حيرة للقارئ |
| ellipsis | يستبدل الكلمات الزائدة عن حاوية العنصر بثلاث نقاط متتالية في نهاية السطر | الخيار الأفضل لإخفاء العناوين الطويلة في بطاقات المقالات ونوفيل لتبدو منظمة |
| شروط النص المقطوع | تفعيل خاصية النقاط الثلاث يشترط دمجها مع خاصيتي منع الالتفاف وإخفاء الفائض | يجب كتابة overflow hidden مع white-space nowrap على نفس العنصر لكي تعمل الميزة بنجاح |
| webkit-text-stroke | يضيف تحديداً أو خطاً خارجياً يلتف حول حواف كل حرف في النص | مدعوم في كل المتصفحات الحديثة ويُستخدم لصنع عناوين مفرغة جذابة عند دمجها مع خلفية شفافة |
| horizontal-tb | نمط الكتابة الافتراضي والقياسي حيث تتدفق الكلمات أفقياً من الأعلى للأسفل | التنسيق التلقائي المعتمد لـ 99 بالمئة من النصوص في المواقع العربية والأجنبية |
| vertical-rl | يقلب اتجاه الكتابة لتصبح عمودية وتبدأ الأسطر من اليمين متجهة نحو اليسار | مفيد جداً في التصاميم الفنية المبتكرة أو عند كتابة نصوص جانبية على حواف الصفحات لتبدو كالمجلات |
| vertical-lr | يقلب اتجاه الكتابة لتصبح عمودية وتبدأ الأسطر من اليسار متجهة نحو اليمين | يستخدم في اللغات اليابانية والصينية أو اللمسات الإبداعية للقوائم الجانبية المتقدمة لتوفير مساحات عرض فريدة |
**text-shadow:** يُضيف ظلاً للنص. صياغته: `text-shadow: offset-x offset-y [blur] color;` يمكن تعريف ظلال متعددة بفصلها بفاصلة.
**text-overflow:** يتحكم في ما يحدث عند تجاوز النص حاويته: - `clip` — يقطع النص بدون مؤشر - `ellipsis` — يضيف (...) نهاية النص المقطوع - يشترط: `overflow: hidden` + `white-space: nowrap` على نفس العنصر
**-webkit-text-stroke:** يضيف إطاراً حول أحرف النص (مدعوم في كل المتصفحات الحديثة الآن): `-webkit-text-stroke: 2px #000;`
**writing-mode:** يغير اتجاه كتابة النص: - `horizontal-tb` — أفقي (الافتراضي) - `vertical-rl` — عمودي من اليمين - `vertical-lr` — عمودي من اليسار
| 1 | /* ظل نص */ |
| 2 | .hero-title { text-shadow: 2px 2px 8px rgba(0,0,0,0.4); } |
| 3 | |
| 4 | /* قطع بنقاط */ |
| 5 | .card-title { |
| 6 | white-space: nowrap; |
| 7 | overflow: hidden; |
| 8 | text-overflow: ellipsis; |
| 9 | } |
| 10 | |
| 11 | /* نص محدد الإطار */ |
| 12 | .outlined-text { |
| 13 | -webkit-text-stroke: 2px #1e293b; |
| 14 | color: transparent; |
| 15 | } |
مثال 1: عنوان Hero مع ظل ولون شفاف
| 1 | .hero-text { |
| 2 | font-size: clamp(2rem, 6vw, 5rem); |
| 3 | font-weight: 900; |
| 4 | text-shadow: |
| 5 | 0 2px 4px rgba(0,0,0,0.2), |
| 6 | 0 8px 32px rgba(59,130,246,0.3); |
| 7 | background: linear-gradient(135deg, #3b82f6, #8b5cf6); |
| 8 | -webkit-background-clip: text; |
| 9 | -webkit-text-fill-color: transparent; |
| 10 | } |