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    

A doboz árnyéka



A szövegekhez hasonlóan a dobozokhoz is rendelhetünk egy vagy több árnyékot.

A doboz árnyékát a box-shadow tulajdonsággal állíthatjuk be.

Az árnyék mindig követi a szegély alakját. Ha lekerekített szegélyt használunk, akkor az árnyék is lekerekített lesz.

Az árnyékot elhelyezhetjük a dobozon belül vagy kívül. Ha belül kívánjuk elhelyezni, akkor az inset kulcsszót is meg kell adnunk a stílusdefinícióban.

A doboz árnyékának beállítása:

kijelölő
{
box-shadow
:
érték,
érték,
érték,
érték,
érték,
inset;
}


  1. Az első érték az árnyék vízszintes kiterjedését adja meg. Pozitív érték esetén jobbra, negatív érték esetén pedig balra jelenik meg az árnyék.
  2. A második érték az árnyék függőleges kiterjedését adja meg. Pozitív érték esetén lefelé, negatív érték esetén pedig felfelé jelenik meg az árnyék.
  3. Ha a harmadik érték 0, akkor az árnyák éles, az érték növeléséve elmosódottá, homályossá tehető.
  4. A negyedik értékkel az árnyék minden irányba kiterjeszthető. Negatív érték esetén pedig összehúzható.
  5. Az ötödik érték az árnyék színét határozza meg, a CSS3 színek fejezetben megismert módon.
  6. A végén az inset kulcsszót megadva az árnyák belülre kerül.

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: 5px 5px 0px 0px #444444;}   
      #id_1 {box-shadow: -5px -5px 0px 0px #444444;}   
      #id_2 {box-shadow: -5px -5px 10px 0px #444444;}  
      #id_3 {box-shadow: -3px -3px 10px 5px #444444;}   
      #id_4 {box-shadow: 10px 0px 10px 2px #444444;}  
</style>     
...
<body>    
     <div id="id_0">5px 5px 0 0</div>           
     <div id="id_1">-5px -5px 0 0</div>
     <div id="id_2">-5px -5px 5px 0</div>  
     <div id="id_3">-3px -3px 10px 5px</div>   
     <div id="id_4">10px 0 10px 2px</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_1.html