CSS3 - Sjenke (Shadow)

Korištenje CSS3 Drop Shadows

CSS3 vam daje mogućnost dodavanja efekata sjene elementima kao što to radite u Photoshopu bez upotrebe bilo kakvih slika. Prije CSS3, izrezane slike su se koristile za stvaranje sjena oko elemenata što je bilo prilično dosadno. Sljedeći dio opisaće vam kako primijeniti sjene na tekst i elemente.


CSS3 svojstvo box-shadow

Svojstvo box-shadow može se koristiti za dodavanje sjene u okvire elementa. Možete čak primijeniti više efekata sjene pomoću liste sjena odvojenih zarezom. Osnovna sintaksa stvaranja sjene okvira može se napisati kao: 

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

Komponente svojstva box-shadow imaju sljedeće značenje:

  • offset-x - Postavlja horizontalni pomak sjene.
  • offset-y - Postavlja vertikalni pomak sjene.
  • blur-radius - Postavlja radijus zamućenja. Što je veća vrijednost, veće je zamućenje i više će ivica sjene biti zamagljena. Negativne vrijednosti nisu dozvoljene.
  • color - Postavlja boju sjene. Ako je vrijednost boje izostavljena ili nije navedena, ona uzima vrijednost svojstva boje.
.box{
    width: 200px;
    height: 150px;
    background: #ccc;
    box-shadow: 5px 5px 10px #999;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Box Shadow efekta</title>
<style>      
    .box{
    width: 200px;
    height: 150px;
    background: #ccc;
    box-shadow: 5px 5px 10px #999;
  }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Slično tome, možete dodati sjenu višestrukih okvira pomoću liste odvojene zarezima: 

.box{
    width: 200px;
    height: 150px;
    background: #000;
    box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 višestrukog Box Shadow efekta</title>
<style>      
    .box{
    width: 200px;
    height: 150px;
    background: #000;
    box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
  }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS3 svojstvo text-shadow

Svojstvo text-shadow možete koristiti za primjenu efekata sjene na tekst. Takođe možete primijeniti više sjena na tekst koristeći isti zapis kao i box-shadow. 

h1 {
    text-shadow: 5px 5px 10px #666;
}
h2 {
    text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Text Shadow efekta</title>
<style>      
    h1 {
    text-shadow: 5px 5px 10px #666;
  }
  h2 {
    text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
  }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <h2>Volim da učim CSS3 uz IT TUTORIJALE!</h2>
</body>
</html>