Több árnyék létrehozása - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

Több árnyék létrehozása

Vesszővel elválasztva több árnyék jellemzői is megadhatók.

Példa:

Forráskód


<style>
  div {border:1px solid green; 
       background-color: green; 
       color:#ffffff;
       width:150px; height:100px; 
       padding: 5px; 
       border-radius: 20px; 
       text-align:center; }
      #id_0 {box-shadow: -3px -3px 15px 10px #880000, 
             5px 5px 15px 10px #008800;}   
      #id_1 {box-shadow: -5px -5px 0px 0px #444444, 
             -5px -5px 15px 0px #444444 inset;}   
      #id_2 {box-shadow: 0px 0px 5px 5px #444444, 
             0px 0px 15px 5px #444444 inset;}  
      #id_3 {box-shadow: 3px 3px 1px 0px #880000, 
             8px 8px 3px 0px #888800, 12px 12px 15px 0px #000088;}    
      #id_4 {box-shadow: 3px 3px 12px 0px #880000 inset, 
             8px 8px 3px 0px #888800, 12px 12px 15px 0px #000088;}
</style>     
...
<body>    
     <div id="id_0">-3px -3px 15px 10px #880000, 
           5px 5px 15px 10px #008800</div>           
     <div id="id_1">-5px -5px 0px 0px #444444, 
          -5px -5px 15px 0px #444444 inset;</div>
     <div id="id_2">0px 0px 5px 5px #444444, 
           0px 0px 15px 5px #444444 inset</div>  
     <div id="id_3">3px 3px 1px 0px #880000, 
           8px 8px 3px 0px #888800, 12px 12px 15px 0px #000088</div>   
     <div id="id_4">3px 3px 12px 0px #880000 inset, 
           8px 8px 3px 0px #888800, 12px 12px 15px 0px #000088</div> 
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szegely_arnyek_2.html