Varjojen Lisääminen Syvyyden Luomiseksi

Voimme käyttää laatikkovarjoja (box shadows) luodaksemme visuaalisen efektin, jossa elementti näyttää leijuvan taustan yläpuolella. Tämä efekti lisää syvyyttä, korostaa tiettyjä elementtejä ja tuo visuaalista kiinnostavuutta verkkosivulle. Efekti saavutetaan käyttämällä box-shadow-ominaisuutta.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x määrittää varjon vaakasuuntaisen sijainnin; positiivinen arvo siirtää varjoa oikealle elementistä ja negatiivinen vasemmalle;
• offset-y määrittää varjon pystysuuntaisen sijainnin; positiivinen arvo siirtää varjoa alaspäin ja negatiivinen ylöspäin;
• blur-radius asettaa varjon sumentumisen asteen ja on valinnainen arvo; suurempi arvo tuottaa sumeamman varjon;
• spread-radius on myös valinnainen ja kasvattaa tai pienentää varjon kokoa positiivisen tai negatiivisen arvon mukaan;
• color määrittää varjon värin millä tahansa kelvollisella väriarvolla ja on myös valinnainen arvo.

box-shadow-ominaisuuden lisäksi text-shadow ja drop-shadow -ominaisuuksilla voidaan luoda varjoja tekstille ja muille elementeille. Ne toimivat samalla tavalla kuin box-shadow-ominaisuus. Näitä ominaisuuksia kuitenkin käytetään harvemmin verrattuna box-shadow.-ominaisuuteen.