استخدامات متنوعة لظلال النصوص باستخدام CSS

تستخدم خاصية text-shadow في CSS عادة لإضفاء الظلال على النص وإعطائه بعداً وتميزاً عن باقي محتوى الصفحة، لكن بشيئ من الإبداع والتجربة يمكننا الحصول على العديد من التأثيرات المتميزة التي تناسب استخدامات مختلفة.

استخدامات متنوعة لظلال النصوص باستخدام CSS

كيف نطبق ظلاً على النص باستخدام CSS؟

يتم ذلك باستخدام خاصية text-shadow كما يلي:


p { text-shadow: 2px 2px 2px #000; }

ينتج عن تطبيق هذه الخاصية نسخة من النص وراء النص الأصلي ومعدلة بحسب قيم المحددات، النتيجة تظهر في الصورة التالية:

نلاحظ في المثال وجود أربع محددات لخاصية text-shadow نشرحها من اليسار لليمين:

  1. الإزاحة على المحور الأفقي: مقدار انزياح الظل عن النص الأصلي على محور السينات (X Axis)، القيم الموجبة تسبب الانزياح لليمين والقيم السالبة تسبب الانزياح لليسار.
  2. الإزاحة على المحور العمودي: مقدار انزياح الظل عن النص الأصلي على محور العينات (Y Axis)، القيم الموجبة تسبب الانزياح للأسفل والقيم السالبة تسبب الانزياح للأعلى.
  3. درجة تنعيم الحواف (blur): عدد البكسلات التي يتم تدريج شفافيتها لإعطاء انطباع بانتشار الضوء، هذه القيمة اختيارية وفي حال عدم إدراجها تأخذ القيمة 0 (عدم تنيعم الحواف).
  4. لون الظل: يصح هنا استخدام أي صيغة ألوان تستخدم عادة مع CSS مثل الست عشري أو RGBA في حال الرغبة بإعطاء شفافية للظل.

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


p { text-shadow: 2px 2px 2px #000, -2px -2px 2px #fff }

في المثال السابق يظهر ظل أسود إلى الأعلى واليمين وتحته ظل أبيض إلى الأسفل واليسار.

تأثيرات متميزة باستخدام text-shadow

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

1. النص النافر


.embossed {
opacity: .35;
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}

يعطى النص هنا لوناً قريباً من لون الخلفية، ويطبق عليه ظل أبيض من الأعلى وظل أسود من الأسفل لإعطاء إيحاء بأن النص نافر، وتخفض شفافية العنصر بكامله إلى 35% لتلطيف مظهره وإظهار الخلفية جزئياً.

2. النص المكبوس


body {
background: #474747;
}
.inset {
color: #222222;
text-shadow: 0px 2px 1px #666;
}

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

3. نص بتأثير قديم


body {
background: #eee;
}
.vintage {
color: #707070;
text-shadow: 3px 3px 0px #eee, 5px 5px 0px #707070;
}

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

4. نص مفرغ


body {
background: #FFF;
}
.stroked1 {
color: #FFF;
text-shadow: 2px 2px #000, 2px -2px #000, -2px 2px #000, -2px -2px #000;
}
.stroked2 {
color: #FFF;
text-shadow: 5px 5px #000, 2px 2px #000, 2px -2px #000, -2px 2px #000, -2px -2px #000;
}

لمحاكاة تأثير النص المفرغ يعطى النص نفس لون الخلفية، ويتم تطبيق أربعة ظلال بلون واحد على النص (أعلى يمين، أعلى يسار، أسفل يمين، أسفل يسار). يمكن استخدام ظل إضافي لإعطاء تأثير إضافي كما في المثال الثاني من الصورة. قد تلاحظ أحياناً وجود انقطاعات في الإطار حول النص بسبب وجود زوايا للخط، يجب استعمال نوع خط مناسب للحصول على التاثير بافضل شكل ممكن.

5. غيوم


.cloudy {
color: rgba(255,255,255,0);
text-shadow: 0px 0px 10px rgba(255,255,255,0.3), 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
}

يعطى النص لوناً أبيض مع شفافية كاملة، ويطبق عليه عدة ظلال بيضاء بدون إزاحة مع درجات مختلفة من النعومة والشفافية.

6. نيون


body {
background: #000;
}
.neon {
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

نستخدم لوناً أسود للخلفية وأبيض للنص، ثم يعطى النص ظلاً أبيض مع انتشار خفيف وتتوالى الظلال مع تدرج الألوان باتجاه الأسود، مروراً بالتدرج اللوني المطلوب، وزيادة انتشار الظل في كل مرة. يمكن استخدام برنامج مثل Photoshop لإنشاء تدرج الألوان المطلوب ونقل رموز الألوان إلى CSS.

7. نار


body {
background: #000;
}
.fire {
color: #fff;
text-shadow: 0 0 5px #fefcc9, 0 0 10px #fefcc9, 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}

نستخدم لوناً أسود للخلفية وأبيض للنص، ثم يعطى النص ظلاً أبيض مع انتشار خفيف وتتوالى الظلال مع تدرج الألوان باتجاه الأسود، مروراً بدرجات من الأصفر ثم البرتقالي فالبني، وزيادة انتشار الظل وإزاحته للاعلى في كل مرة. يمكن استخدام برنامج مثل Photoshop لإنشاء تدرج الألوان المطلوب ونقل رموز الألوان إلى CSS.

8. نص ثلاثي الأبعاد


.three-d {
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

يتم استخدام عدة طبقات من الظلال ألوانها تتدرج من لون النص إلى الأغمق، بدون تنعيم، وبإزاحة كل منها بمقدار بكسل واحد للأسفل عن سابقه. يمكن إضافة ظل أخير متلاشي لتحسين المظهر النهائي.

ملاحظة: لا يمكنك أن تبدأ اسم محدد CSS برقم، فلا يمكننا تبديل اسم three-d في المثال إلى 3d لأنه لن يكون له أي تأثير.

تحميل الأمثلة

يمكنك تحميل جميع الأمثلة المذكورة هنا بزيارة هذا الرابط.

في الختام

نأمل أن تلهمكم هذه المقالة لاستخدام أفضل للظلال في CSS وأن تبعدكم عن بعض الاستخدامات الغير مستحبة، هناك العديد من الأمثلة المتميزة على الإنترنت، كما يمكنكم أن تشاركونا بإبداعاتكم في التعليقات.

المصادر

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *