شرح تفصيلي لظلال CSS:

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

h2{ الخلفية:url(sprites.png) عدم التكرار 0 0; حجم الخط: 0;
h2#title1{الخلفية-الموضع:0 -30px;}
h2#title2{الخلفية-الموضع:0 -60px;}
....

هذا أمر صعب، حيث أن تجميع الصور معًا سيستغرق الكثير من الوقت، ومن أجل تحقيق تأثيرات بصرية أفضل، قد تضطر إلى استخدام صور png عالية الجودة بحجم 32 بت، مما سيجعلك تواجه IE 6 png اللعين. مشكلة الشفافية!

في الواقع، يمكننا استخدام CSS بالكامل لتحقيق تأثير الظل للنص!

يمكنك مشاهدة العرض التوضيحي أولاً.

ظل النص

يتيح لنا ظل النص تحقيق تأثيرات ظل النص المثالية. الكتابة الأساسية:

ظل النص: [لون نصف قطر تمويه المحور السيني والمحور ص]، [لون نصف قطر التمويه للمحور السيني والمحور الصادي]...

أو

ظل النص: [لون نصف قطر نصف قطر المحور ص للمحور س]، [لون نصف قطر المحور ص للمحور س]...

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

مثال:

h1{اللون:#000; الخلفية:#333;
مسافة بادئة للنص: 2em؛
ظل النص:أسود 2px 2px 2px }

التأثير هو كما يلي:

هذه السمة مدعومة حاليًا من قبل معظم المتصفحات باستثناء IE، يمكننا استخدام مرشح الظل لتحقيق ذلك:

عامل التصفية: الظل (اللون='أسود'، الاتجاه='135'، القوة='2')

ربما لاحظت أن استخدام مرشح الظل يمكن أن يحدد فقط اتجاه الزاوية، ولكن ليس المحور xy، كما تم استبدال المحور z بالقوة. لاحظ أنه عند استخدام هذا الفلتر، لا يمكنك تعيين لون الخلفية ، وإلا سيكون الفلتر غير صالح! بالإضافة إلى ذلك، إذا لم تكن جيدًا في الرياضيات ولا تفهم خوارزمية الدوال المثلثية، فيمكنك استخدام مرشح آخر لـ IE: dropshadow:

عامل التصفية: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

حسنًا، سوف يعيقنا IE دائمًا، ولكن من الجدير بالذكر أن هذين المرشحين من IE يدعمان الظلال متعددة الطبقات ! على سبيل المثال، يمكنك كتابة:

عامل التصفية: الظل المسقط (OffX=2، OffY=2، اللون='أحمر'، إيجابي='صحيح')
dropshadow(OffX=2, OffY=2, اللون='أصفر', إيجابي='صحيح')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');

لمعرفة المزيد حول هذين المرشحين لـ IE، راجع: Shadow و Dropshadow

دعونا نلقي نظرة على مثال للظلال متعددة الطبقات (تجاهل IE هنا):

h1{font:bold 32px/2 Verdana، جنيف، sans-serif اللون:#f39;
ظل النص:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}

التأثير كما هو موضح في الشكل:

نستخدم هنا لون rgba، وهي طريقة للإعلان عن اللون والشفافية في نفس الوقت في CSS، وهي سمة لون تدعمها معظم متصفحات المستوى A ( باستثناء IE ). لمعرفة المزيد، يرجى الاطلاع على: " RGBa" Color دعم المتصفح " - في الوقت نفسه، نوصي باستخدام طريقة الكتابة البسيطة هذه لشفافية الألوان الصلبة.

توافق المتصفح مع ظل النص

حاليًا، يتم دعم text-shadow بواسطة Firefox 3.5+، وSafari 1.1+/chrome 2.0+ وopera 9.5، ولكنه غير مدعوم بواسطة IE. تجدر الإشارة إلى أن Safari 4.0 فقط هو الذي يدعم الظلال متعددة الطبقات.

• كافة إصدارات IE لا تدعم ظل النص؛
• يدعم Opera 9.5+ ما يصل إلى 6-9 طبقات من الظلال ويستخدم ترتيب عرض CSS2 (الظل المحدد الأول موجود في الأسفل). ولأسباب تتعلق بالأداء، يقتصر نصف قطر التمويه على 100 بكسل؛
• يدعم Gecko (Firefox) نظريًا طبقات لا حصر لها من ظلال النص (لكن لا يُنصح بتجربتها) ويتبع ترتيب عرض CSS3 الجديد (يكون الظل المحدد أولاً في الأعلى)؛
• يدعم Safari 1.1-3.2 طبقة واحدة فقط من ظل النص (يتم عرض الإعلان قبل الفاصلة الأولى فقط ويتم تجاهل ما يلي). يدعم Safari 4.0+ الظلال متعددة الطبقات وترتيب عرض CSS3 الجديد فقط؛

مربع الظل

لنتحدث عن IE أولاً، وهو لا يدعم خاصية box-shadow، ولكن يمكن استخدام المرشحين المذكورين أعلاه لتحقيق تأثيرات الظل. وهذا يعني أن IE لا يميز بين ظل النص وظل المربع ! وهذا يخلق بعض المشاكل: النص الموجود داخل العنصر يرث إعدادات ظل العنصر. ولكن إذا لم تحدد خلفية العنصر وحدوده، فسيظهر ظل النص فقط. إذا قمت بتحديد سمة الخلفية فقط دون تحديد الحدود، فسيظهر ظل المربع فقط، ولن يكون للنص ظل و إذا قمت بتحديد سمة الحدود فقط وإذا لم يتم تعريف الخلفية، فسيظهر ظل المربع، وسيكون لنص المحتوى والصور أيضًا ظلال. يمكن للطلاب المهتمين تجربتها.

حسنًا، دعونا الآن ننسى أمر IE ونلقي نظرة على box-shadow. في الواقع، بعد فهم text-shadow، من السهل فهم box-shadow حاليًا، فقط Firefox وsafari/chrome يدعمان سمة box-shadow من خلال السمات الخاصة. على الرغم من أن متصفح Opera لا يدعم هذه السمة حاليًا، إلا أنه مذكور في وثائقه أن الإصدار التالي من محرك Presto 2.3 (أحدث إصدار من محرك Opera 10.10 هو Presto 2.2.15) سيدعم box-shadow، ثم Let ننتظر ببطء.

بناء جملة box-shadow هو نفس text-shadow.

#boxShadow{
...
-webkit-box-shadow:2px 2px 2px أسود؛
-moz-box-shadow:2px 2px 2px أسود؛
...
}

في الواقع، يُعد كل من box-shadow و border-radius شريكين جيدين:

#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
نصف قطر الحدود: 10 بكسل؛
الحدود: 1px الصلبة ddd؛
-webkit-box-shadow:0 0 10px أسود;
-moz-box-shadow:0 0 10px أسود;
الحشو: 10 بكسل؛}

التأثير كما هو موضح في الشكل:

بدأ Firefox في دعم box-shadow فقط في الإصدار 3.5، والعرض الحالي للظلال ليس مثاليًا بعد.

تلخيص

يعد CSS Shadow ميزة مفيدة جدًا في CSS3، ويمكننا بالفعل استخدام text-shadow في Firefox/webkit/Opera، وسيتم تنفيذ box-shadow قريبًا في هذه المتصفحات. فقط IE هو فريد من نوعه ولا يزال يصر على مرشحاته الرديئة. هذا فشل حقًا.