CSS3 و تأثيرات النص المختلفة

أستكمل الحديث عن CSS 3 و ما به من مميزات جديدة و اليوم أحصر الحديث عن المميزات الجديدة فيما يتعلق بالنصوص و كيف أضاف الإصدار الثالث من إمكانيات لم تكن متاحة من قبل.
في هذه التدوينه سأستعرض بعض الإمكانات الجديدة كإضافة تأثير النص الغائر و النص المائل و النص المنقوش و إضافة خط جديد ليظهر للزوار حتى و إن لم يكن موجوداً لديهم على أجهزتهم. (تم فصل الشرح في تدوينة منفصلة)
كما أن هناك هدية لكم في نهاية التدوينه و هى ملف PDF يحتوي على أهم أكواد CSS متضمنة الإصدار الثالث و هى نسخة Printable أى قابلة للطباعة.

تأثير النص الغائر

لعمل التأثير قمت باستخدام القيم التالية

body {
background: #474747;
}
.text {
color:#222;
text-shadow:0 2px 3px #555;
}

لرؤية مثال حى تفضل بزيارة هذه الصفحة

تأثير النص المائل

يكون مثله مثل الحواف المستديرة للحدود أو الخطوط وتحدد القيمة على حسب درجة الاستدارة .. في المثال قمت باستخدام درجة ميل عمودية بزاوية 90 درجة لـAhmed و د

.text {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}

لرؤية مثال حى تفضل بزيارة هذه الصفحة

وتستطيع عمل بها الكثير من النماذج تبعاً للقيمة التي تختارها فمثلها مثل الفوتوشوب لديك من صفر حتى 180 و بالاتجاه العكسي من صفر إلى -180 كما استخدمت في المثال التالي الدرجة (-45)

لرؤية مثال حى تفضل بزيارة هذه الصفحة

كما قمت باستخدامها لعمل نصين متقاطعين باستخدام نفس القيمة السابقة ولكن بدون علامة السالب في أحدهما لأعكس إتجاه الدوران.

لرؤية مثال حى تفضل بزيارة هذه الصفحة

للأسف كالعادة الإكسبلورر أو كما أسميه باللعين لا يوافق الكثير من المعايير القياسية القديمة و الجديدة لذا تقوم باستخدام فلتر اسمه BasicImage والذي يسمح بإدارة النص

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

القيم 0 ، 1 ، 2 ، 3 تساوي درجة الاستدارة بنفس الترتيب 0 ، 90 ، 180 ، 270

تأثير النص المنقوش

لعمل تأثير النص على طراز النقش الغائر قمت باستخدام القيم التالية

body {
background: #f1f1f1;
}
.text {
color:#808080;
text-shadow:0 1px 0 #FFFFFF, 0 -1px 0 #000000;
}

كما تلاحظون فقد استحدمت قيمتين للظل والتي تم ذكرها مسبقاً و شرحها بشكل وافي في تدوينه ظل النص خاصية جديدة من CSS و هى إمكانية رائعة لا يعلمها الكثير من المطورين للأسف :(

لرؤية مثال حى تفضل بزيارة هذه الصفحة

طبعاً جميع ما ذكر من ألوان و و قيم هي مجرد للمثال و ليست للحصر فبمخيلتك التصميمية تستطيع التغيير والتعديل فيها كما تشاء و كله حسب زوقك :wink:

الهدية

كما وعدت في النهاية بتقديم ملف PDF يحتوي على أهم أكواد CSS متضمنة الإصدار الثالث و هى نسخة Printable أى قابلة للطباعة تستطيع طباعتها على ورقة واحدة بوضوح جيد لتساعدك في التكويد.

تحميل ملف CSS 3 Cheat Sheet PDF (عدد الصفحات: 5) - الحجم 123 Kb