Efekat senke u CSS-u

Dodavanje senke može da ostavi jak vizuelni utisak. Na taj način možemo da izdvojimo, tj. pojačamo neke elemente u odnosu na druge, kao i da postignemo efekat "dubine" i trodimenzionalnosti na stranici.

box-shadow Senka ispod elementa
text-shadow Senka ispod teksta

text-shadow

Ovaj atribut simulira efekat senke ispod teksta. Ako želimo potpunu kontrolu, tribut zahteva četiri parametra:

text-shadow: 3px -2px 5px #003;

Atribut senke je kompleksniji nego što to izgleda. Moguće je zadati više setova ove četiri vrednosti, odvojene zarezima. Tako se definišu višestruke senke.

text-shadow: 3px -2px 5px #003, 1px 1px 0px #000;

box-shadow

Kada želimo da prikažemo senku ispod elementa, zadajemo iste parametre kao i za efekat senke ispod teksta. Ovde postoji još i poseban parametar inset koji se može zadati ispred ostalih, kako bismo simulirali unutrašnju senku, tj. iluziju da je elemenat "probušen" na stranici.

box-shadow: 2px 2px 4px #000; box-shadow: inset 2px 2px 4px #000;

Pogledajte interaktivni primer kako biste dobili ideje kako sve možete da koristite senke.


  h1 {
    box-shadow: inset 2px 2px 4px #000;
    text-shadow: 4px 4px 2px blue, -4px -4px 2px red;
  }

css-shadows-sr
  1. Mozilla Developer Network, CSS Reference
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.