HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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