CSS3 Modules

CSS3 تأثيرات النص

آخر تحيين: 12-10-2014

css3 التحويلات ثنائية الأبعاد css3 background gradient


أضافت CSS3 مجموعة من التأثيرات الجديدة على النص ، بعضها لا زالت غير مدعومة من أغلب المتصفحات . أضعها كلها أمام أعينكم

رقم أول إصدار للمتصفحات التي بدأت تدعم الخاصيات
الخاصية
hanging-punctuation
punctuation-trim
text-align-last35.012.0 -moz-5.5
text-emphasis
text-justify5.5
text-outline
text-overflow4.07.03.111.0
9.0 -o-
6
text-shadow4.03.54.09.610.0
text-wrap
word-break4.015.03.115.05.5
word-wrap4.03.53.110.55.5

بما أن بعض الخاصيات لا تدعمها أغلب المتصفحات لحد الآن ، سنكتفي بالأهم و هي :

  • text-overflow
  • text-shadow
  • word-break
  • word-wrap

text-shadow


لإضافة الظل ، يجب تحديد القيم على التوالي : المسافة التي تبعد بين النص و الظل أفقيا و عموديا ثم حجم الظل ثم لونه :

h1{ 
   text-shadow: -10px 15px 3px gray;
}
مشاهدة النتيجة

word-wrap و word-break

جمعت بين الخاصيتين لأن الفرق بينهما يكاد يظلل المبتدئين :
word-break : تقوم بتقطيع النص وسط الكلمة أو خارجها حتى يتلاءم النص بالضبط مع حدود العلبة
word-wrap: تقوم بتقطيع النص في آخر الكلمة أو بعد رموز التنقيط ، إلا في حالة الكلمات الطويلة (كعناوين الويب و الروابط مثلا ) فيتم التقطيع داخلها
بعض الأمثلة ، تغنينا عن الكثير من الثرثرة :

.break {
   word-break: break-all; 
  }
.wrap {
   word-wrap: break-word;
  }
مشاهدة النتيجة

بالإضافة لهاتين القيمتين توجد قيم آخرى للخاصيتين كما يبين جدول كل منهما أسفله :

قيم word-wrap
القيمةالشرح
normalيتم تقطيع الكلمات فقط في النقاط المسموح بها مبدئيا
break-wordتسمح بالتقطيع داخل بعض الكلمات
initialإرجاع الخاصية لقيمتها المبدئية : قراءة المزيد حول INITIAL
inheritالخاصية ترث قيمة نمط الوسم الأب : قراءة المزيد حول INHERIT
قيم word-break
القيمةالشرح
normalيتم تقطيع الكلمات فقط في النقاط المسموح بها مبدئيا
break-allتسمح بالتقطيع داخل و خارج أي كلمة
keep-allعدم السماح بالتقطيع داخل الكلمة
initialإرجاع الخاصية لقيمتها المبدئية : قراءة المزيد حول INITIAL
inheritالخاصية ترث قيمة نمط الوسم الأب : قراءة المزيد حول INHERIT

text-overflow

الخاصية text-overflow تحدد التصرف الذي يجب تعيينه للنص عندما يتجاوز هذا الأخير حدود العلبة . يمكننا إعطاءها القيم التالية : clip|ellipsis|string|initial|inherit
clip : تقطيع النص
ellipsis : تقطيع النص و إضافة ثلاث نقط (...)
string : الجملة التي ستمثل النص الذي تم تقطيعه

.text-overflows {
   width : 160px;
   white-space: nowrap; /* تحذف الفراغات البيضاء و تجبر استكمال النص  في سطر واحد  */
   overflow : hidden;   /* إخفاء النص الذي يتجاوز حدود العلبة */
   text-overflow: ellipsis; /* إضافة ثلاث نقط للنص الذي تم تقطيعه */
 }
مشاهدة النتيجة