خدع css / تأثير الظل بدون صور

بها الفئات classes الفئة container. ويحدد عن طريقها عرض الصندوق الكلي وموضعه داخل الصفحة، بعد ذلك تأتي داخلها الفئة shadow. وهي للظل كما سترى لاحقاً في خواص CSS، ثم أخيراً داخلها الفئة content. للمحتويات.

المرحلة التالية تنسيق خواص CSS وتبدأ مع الفئة container. بتحديد عرض الصندوق وتوسيطة داخل الصفحة أو أتركة بدون تحديد عرض حتى يتمدد بكامل نافذة المتصفح المفتوحة

كود:
.container {
margin: 0 auto;
width: 430px;
}

نكمل مع خصائص CSS لكل من الفئات المخصصة..

كود:

.shadow {
background-color: #EFE9D9;
}
.content {
border: 1px solid #D9D9CD;
background-color: #FFF;
position: relative;
padding: 10px;
color: #555;
bottom: 4px;
left: 4px;
}

في الفئة shadow. لم أضع إلا لون مناسب خلفية ليكون هو الظل، وبالمثل في الفئة content. وضعت لون للخلفية أبيض مع حد ولون آخر للخطوط وهوامش داخلية، ولاحظ جيداً الخواص المحددة فأنا وضعت position بالوضع relative ثم حددت له إحداثيات تموضع من جهة اليسار وفي الأسفل..

إنتهى