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

ميزة الظلال في CSS3 توفر للخطوط والعناصر HTML الأخرى وجود ظل محدد بلون معين إضافةً إلى وجود درجة تشتيت وأبعاد محددة وهي تكون عبر خاصية text-shadow خاصة بوجود الظلال في النصوص وخاصية box-shadow خاصة بوجود الظلال في العناصر HTML عموماً مثل أشكال الصناديق، ما زال دعم خصائص هذه الميزة محدود على المتصفحات التي تعمل على محرك webkit مثل متصفح Safari وChrome، متصفح Firefox إضافةً دعم متصفح Opera لميزة الظلال.

لدينا خاصيتين في هذه الميزة وهم text-shadow و box-shadow، وسبق أن وضعت صورة توضيحية حول قيم هاتين الخاصيتين والقيمة تكتب بهذه الطريقة:

property: (x)px (y)px (blur value) (color value)

كما تلاحظ فإن القيمة الأولى للبعد على المحور الأفقي x والقيمة الثانية للبعد على المحور العمودي y والقيمة الثالثة هي درجة التشتيت والقيمة الرابعة لون الظل، صورة لتوضيح الخاصية أكثر:

خاصية text-shadow

تعمل هذه الخاصية على وضع الظل خلف أي نص يتم تحديده والخاصية مدعومة في محرك Mozilla/Gecho و Webkit ولكنها لا تحتاج إلى جزئية معينة قبل الخاصية مثل -moz- او -webkit- كبقية الخصائص الأخرى الخاصة بتقنية CSS3، تكتب بهذه الطريقة في شفرة  CSS:

Element {
     text-shadow: 1px 1px 3px #00000;
}

يمكن تغيير القيم السابقة بالطبع لأنها مكتوبة كمثال فقط، حددنا في الشفرة السابقة أبعاد الظل على المستوى الأفقي والعمودي وتشويه بقيمة 3px إضافةً إلى لون الظل وهو اللون الأسود.

خاصية box-shadow

تعمل هذه الخاصية على وضع الظل في أي عنصر HTML مثل عمل الصناديق ووضع الظلال عليها لكي يكون شكلها جميل، وتحتاج عند كتابة هذه الخاصية إلى التمييز بين متصفحات محرك Mozilla و متصفحات محرك Webkit، تكتب بهذه الطريقة في شفرة CSS:

Element {
     -moz-box-shadow: 0 0 5px #000000;
     -webkit-box-shadow: 0 0 5px #000000;
}

حددنا في الشفرة السابقة أبعاد الظل على المستوى الأفقي والعمودي ويحملون القيمة سفر وتشويه بقيمة 5px إضافةً إلى لون الظل وهو اللون الأسود.

والصيغة الأصلية للخاصية هي box-shadow وجميع المتصفحات التي لا تدعم خاصية box-shadow حالياً ستظهر فيها ميزة الظلال عن طريق الصيغة الرئيسية في المستقبل لذا يجب كتابتها لعرض عمل الخاصية في النسخ المستقبلية من التصفحات التي لاتدعمها في الوقت الحالي:

Element {
 box-shadow: 0 0 5px #000000;
}

مثال عملي: عمل ظل على صندوق ونصوص معاً

هذا مثال عملي سهل جداً تطبيق على ما ذكرته في الدرس من خاصية text-shadow و box-shadow، سأضع شفرة HTML تحوي صندوق وبداخله نصوص (عنوان وفقرتين):

<div id="box">
	<h2>تعريف لكلمة مدونة</h2>

    <p>" المدونة " هي المصطلح أو التعريب الأكثر قبولا لكلمة blog الإنجليزية التي نحتوي على كلمتين Web log بمعنى سجل الشبكة [1]  وهي نوع من أنواع المواقع، وعادة ما تكون لفرد بحيث يقوم بإدخال تعليقات، أو يصف حدث معين، أو غيرها من المواد مثل الرسومات أو الفيديو. المدخلات تكون مرتبة ترتيبا زمنيا تصاعديا. "المدونة" ممكن ان تستخدم كفعل، وتعني إضافة محتوى للمدونة.</p>

    <p>بعض المدونات توفر العديد من الأخبار أو التعليقات على موضوع معين، والبعض الآخر تعمل كاليوميات الشخصية على الإنترنت. المدونة النموذجية هي التي تجمع بين النصوص والصور، وروابط مدونات أخرى، وصفحات ويب، ووسائل الإعلام ذات الصلة بالموضوع. قدرة القارئ أن يضع تعليقات في شكل تفاعلي يعد جزءا هاما في العديد من المدونات. معظم المدونات نصية، على الرغم من أن بعضها يركز على الفن (مدونات الفن)، أوالصور الفوتوغرافية (مدونات الصور)، أوأشرطة الفيديو (مدونات الفيديو) أوالموسيقى (مدونات MP3)، أوالصوت (بودكاست). المدونات الصغرى  هو نوع آخر من المدونات، ويضم وظائف قصيرة جدا.</p>

    <p>اعتبارا من ديسمبر 2007 ،أصبح محرك بحث المدونات تيشنوراتييتبع أكثر من 112 مليون مدونة.</p>

    <p><strong>المصدر:</strong> <a href="http://ar.wikipedia.org/wiki/%D9%85%D8%AF%D9%88%D9%86%D8%A9">صفحة المدونة</a> في الويكيبيديا العربية</p>
</div>

في الشفرة السابقة سيظهر الصندوق الذي سنطبق فيه ميزة الظلال عبر تقنية CSS3 ويحمل الصندوق صنف .box، وهنا شفرة CSS عادية بدون ميزة الظلال لنضع المقارنة:

#box {
	margin: 0 auto;
	padding: 10px;
	width: 60%;
	text-align: right;
	border: 1px solid #666666;
}

#box h2 {
	margin: 0 0 10px;
	font: bold 22px "Simplified Arabic";
	color: #ffa200;
}

#box p {
	margin: 15px 0;
	font: 13px tahoma;
	line-height: 22px;
	color: #34312c;
}

الصورة الحالية للصندوق والنصوص:

لإضافة ميزة الظلال نستعمل خاصية text-shadow و box-shadow على صنف #box و العنوان والفقرات التي بداخله عبر شفرة CSS هذه:

#box {
	box-shadow: 0 0 10px #707070;
	-moz-box-shadow: 0 0 10px #707070;
	-webkit-box-shadow: 0 0 10px #707070;
}

#box h2 {
	text-shadow: 0 1px 0 #6f511e;
}

#box p {
	text-shadow: -1px 1px 2px #c4c4c4;
}

الصورة النهائية لشكل الصندوق والنصوص التي بداخله: