CSS3: ما مدى معرفتك بظلال النص؟

لقد اضطررت مؤخرًا إلى تثبيت Firefox 3.5 لأنني أردت تثبيت Firebug 1.4 ، لذلك صادفت ظل النص الجميل في خلفية WordPress وهو أيضًا خاصية ظل النص في CSS، لذلك قمت اليوم بتجميع بعض المعلومات. وآمل أن يكون مصدر إلهام للجميع.

أولاً، دعونا نلقي نظرة على الجزء الذي يتم فيه استخدام ظل النص في الواجهة الخلفية لـ WordPress 2.8 (السهم الأخضر). ما رأيك؟ نعم، هذه خصائص CSS3، وليست صورًا.

ما هو ظل النص؟

text-shadow موجود بالفعل في CSS2، والآن يستعد CSS3 لإضافته إليه، وبما أن Safari هو الوحيد الذي يدعم دائمًا هذه السمة، نادرًا ما نرى تطبيقات حقيقية حتى وقت قريب عندما تم إحياء دعم Firefox 3.5 لها فيه.

يمكن أن يدعم text-shadow إضافة ظل إلى النص، حتى نتمكن من استخدام سمات css3 لزيادة نسيج النص أثناء التصميم دون استخدام أي صور.
تشمل المتصفحات المدعومة حاليًا Firefox 3.1+ وSafari 3+ وOpera 9.5+ ومتصفحات حديثة أخرى (قد تكون البيانات متحيزة بالطبع، لا يمكن لعائلة IE دعمها).

بعد ذلك، انظر إلى بناء جملة text-shadow:

ظل النص: طول اللون طول الطول؛

اللون: يشير الطول على التوالي إلى " طول اتجاه المحور X وطول اتجاه المحور Y ونصف قطر طمس الظل " بالترتيب
القيم الموجبة على المحور X تعني إلى اليمين، والقيم السالبة على اليسار، وبنفس الطريقة، القيم السالبة على المحور Y تعني إلى أعلى أو فارغ (ستتم معالجته بشكل افتراضي)

على سبيل المثال:

ظل النص: -1px 2px 3px #ffb69a;

هذا يعني أن الظل يقع بمقدار 1 بكسل إلى اليسار في اتجاه المحور X، و2 بكسل للأسفل في اتجاه المحور Y، ونصف قطر تمويه الظل هو 3 بكسل، واللون #ffb69a

بعض التجارب والعروض التوضيحية

لقد أجريت تجربة صغيرة وأنشأت صفحة تجريبية للسماح للمستخدمين الذين لا تدعم متصفحاتهم ظل النص برؤية تأثير الظل، يرجى إلقاء نظرة على لقطة الشاشة أدناه (قال أحد الأصدقاء إن "Firebird" يشبه "الدجاج") :

إذا كنت تستخدم Firefox 3.1+ وSafari ومتصفحات أخرى، فيرجى النقر فوق Demo مباشرة.