منتدى استراحات زايد - عمل ظل Shadow بتقنية CSS

السلام عليكم و رحمة الله و بركاته

عمل ظل SHADOW للصفحات او البلوكات او الصور يعتبر تقنية محببة للمصممين

و هناك من يعتمد على عمل صورة ظل و وضعها كظل بالاعتماد على :

كود PHP:

background : url(img_shadow.gif) no-repeat left bottom;

بحيث ينزل صورة الخلفية الى الاسفل و يزيحها قليلا الى اليمين او اليسار حسب الطلب

لكن درس اليوم مميز و بسيط و لا يعتمد على الصور

تابع معي :

في حال اعتبرنا ملف ال index.html كالتالي :

كود PHP:

<span style="color: #000000">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

My project

body {
margin: 0px;
padding: 20px;
font-family: verdana;
font-size: 12px;
}

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s* when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries* but also the leap into electronic typesetting* remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages* and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

فسيكون الشكل العام لأكواد ال CSS كالتالي :

كود PHP:

#shadow-container {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}

#shadow-container .shadow2*
#shadow-container .shadow3*
#shadow-container .container {
position: relative;
left: -1px;
top: -1px;
}

#shadow-container .shadow1 {
background: #F1F0F1;
}

#shadow-container .shadow2 {
background: #DBDADB;
}

#shadow-container .shadow3 {
background: #B8B6B8;
}

بالتوفيق
#shadow-container .container {
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
}