“box-shadow” je CSS funkcija namenjena prikazu senc na blokovnih elementih, kot so npr. DIV polja. Ta funkcionalnost nam prinese moč ustvarjanja globin v našem 2D oknu in prenese izdelovanje senc iz grafičnih programov v kodo, natančneje CSS.
Osnovni gradniki funkcije “box-shadow” so horizontalni odmik, vertikalni odmik, zameglitev, širjenje in barva. V praksi pa deluje na naslednji način:
- Horizontalni odmik: pozitiven odmik pomeni, da bo senca na desni strani elementa, negativni odmik pomeni, da bo senca na levi strani elementa.
- Vertikalni odmik: negativen odmik pomeni, da bo senca na zgornji strani elementa, pozitiven odmik pomeni, da bo senca na dnu elementa.
- Zamegljitev (opcijsko): vrednost 0 pomeni, da bo rob sence oster, višja vrednost pomeni, da bo rob sence zamegljen.
- Širjenje (opcijsko ): pozitivna vrednost poveča velikost sence, negativna vrednost zmanjša velikost. Osnovna nastavitev je 0, enako kot zamegljitev.
- Barva: Barva, ki definira senco. Uporaba rgba zapisa omogoča še dodatno transparentnost, npr. rgba(0, 0, 0, 0.8).
.senca {
-moz-box-shadow: 3px 3px 10px 3px #ccc;
-webkit-box-shadow: 3px 3px 10px 3px #ccc;
box-shadow: 3px 3px 10px 3px #ccc;
}Notranja senca
.notranja-senca {
-moz-box-shadow: 0 0 10px 0 #000 inset;
-webkit-box-shadow: 0 0 10px 0 #000 inset;
box-shadow: 0 0 10px 0 #000 inset;
}
Uporaba sence samo na eni strani
Uporaba negativne vrednosti na širjenju omogoča prikaz sence samo na eni strani.
.senca-spodaj {
-moz-box-shadow: 0 8px 10px -6px #000;
-webkit-box-shadow: 0 8px 10px -6px #000;
box-shadow: 0 8px 10px -6px #000;
}
Uporaba sence na levi in desni strani
V primerih, ko želimo imeti sence levo in desno pa lahko uporabimo več “box-shadow” deklaracij, za vsako stran eno.
.senca-levo-desno {
-moz-box-shadow: 6px 0 15px -4px #000, -5px 0 8px -4px #000;
-webkit-box-shadow: 6px 0 15px -4px #000, -5px 0 8px -4px #000;
box-shadow: 6px 0 15px -4px #000, -5px 0 8px -4px #000;
}
Podpora brskalnikom “box-shadow”
Podpora CSS funkciji “box-shadow” je na zadovoljivi ravni. Pred implementacijo takšnih rešitev se je vedno dobro pozanimati o sami podpori v brskalnikih. “box-shadow” funkcija je podprta v brskalnikih IE9+, Edge 13, Firefox 44+, Chrome47+, Safari 6+, Opera15+, iOS Safari 9+, Android 4.3+, … Podporo funkcije “box-shadow” in številnih drugih lahko preverite na “Can I use …” .
