CSS: box-shadow

CSS-box-shadow

“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:

  1. Horizontalni odmik: pozitiven odmik pomeni, da bo senca na desni strani elementa, negativni odmik pomeni, da bo senca na levi strani elementa.
  2. Vertikalni odmik: negativen odmik pomeni, da bo senca na zgornji strani elementa, pozitiven odmik pomeni, da bo senca na dnu elementa.
  3. Zamegljitev (opcijsko): vrednost 0 pomeni, da bo rob sence oster, višja vrednost pomeni, da bo rob sence zamegljen.
  4. Širjenje (opcijsko ): pozitivna vrednost poveča velikost sence, negativna vrednost zmanjša velikost. Osnovna nastavitev je 0, enako kot zamegljitev.
  5. 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;
}

CSS-box-shadow-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;
}

CSS-box-shadow-spodaj

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;
}

CSS-box-shadow-levo-desno

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 …” .

Oznake: box-shadowCSSsence

Komentiraj


*