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.

text-shadow

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

• X otklon - metrička vrednost koja definiše udaljenost senke po horizontali (pozitivna vrednost za udesno, negativna za ulevo)
• Y otklon - metrička vrednost koja definiše udaljenost senke po vertikali (pozitivna vrednost za naniže, negativna za naviše)
• zamućenost - metrička vrednost koja definiše zamućenost senke
• boja - kolorna vrednost - boja senke

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.

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.

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