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

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

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


كود PHP:
                      background url(img_shadow.gifno-repeat left bottom
بحيث ينزل صورة الخلفية الى الاسفل و يزيحها قليلا الى اليمين او اليسار حسب الطلب

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

تابع معي :


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


كود PHP:
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<
head>
    <
title>My project</title>
    <
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.shadow.css" />
 
    <
style>
        
body {
            
margin0px;
            
padding20px;
            
font-familyverdana;
            
font-size12px;
        }
    </
style>
 
</
head>
 
<
body>
 
    <
div id="shadow-container">
        <
div class="shadow1">
            <
div class="shadow2">
                <
div class="shadow3">
                    <
div class="container">
                        
Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum has been the industrys standard dummy text ever since the 1500swhen an unknown printer took a galley of type and scrambled it to make a type specimen bookIt has survived not only five centuriesbut also the leap into electronic typesettingremaining essentially unchangedIt 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.
                    </
div>
                </
div>
            </
div>
        </
div>
    </
div>
 
</
body>
</
html
فسيكون الشكل العام لأكواد ال CSS كالتالي :


كود PHP:
                      #shadow-container {
    
positionrelative;
    
left3px;
    
top3px;
    
margin-right3px;
    
margin-bottom3px;
}
 
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
    
positionrelative;
    
left: -1px;
    
top: -1px;
}
 
    
#shadow-container .shadow1 {
        
background#F1F0F1;
    
}
 
    
#shadow-container .shadow2 {
        
background#DBDADB;
    
}
 
    
#shadow-container .shadow3 {
        
background#B8B6B8;
    
}
  
    
#shadow-container .container {
        
background#ffffff;
        
border1px solid #848284;

  
[IMG]http://cdn5.tribalfusion.com/media/37536.gif[/IMG]    
        
padding10px;
    } 

بالتوفيق