Otključavanje CSS-a Box-shadow

Svojstvo box-shadow se koristi za dodavanje efekta senke elementu.

Ovo svojstvo se koristi često za davanje dubine elementima na veb lokaciji, pa je korisno da se u potpunosti razume.

Sintaksa

Sintaksa box-shadow svojstva je sledeća:

.box {
  box-shadow: 5px 10px 5px 4px #666;
}

Prevedimo ovo da biste razumeli šta svaka od vrednosti znači:

box-shadow: horizontal offset | vertical offset | blur radius | spread radius (optional) | color 

Vrednosti

• Horizontal offset - koliko će se levo ili desno širiti senka (ako je vrednost pozitivna širiće se udesno, ako je negativna ići će levo),
• Vertical offset - koliko daleko iznad ili ispod elementa će se širiti senka (ako je vrednost pozitivna širiće se na dno, ako je negativna ići će na vrh),
• Blur radius - što je broj veći, senka će biti zamućenija, ako je broj 0, biće oštar,
• Spread radius - podrazumevana vrednost je 0, što je veći broj to će veća biti veličina senke,
• Color - definiše boju senke.

Primeri

CSS

.box {
  background-color: hotpink;
  height: 200px;
  width: 200px;

  box-shadow: 5px 5px 10px 4px rgba(0,0,0,0.5);
}

Rezultat:

Obično nećemo koristiti jednobojnu boju za box-shadow dodavanje neke neprozirnosti daje joj prirodniji osećaj.

Umetnuta senka

Prilikom stvaranja umetnute senke, rezultujući efekat je da senka uđe u element i čini da sadržaj unutar elementa izgleda depresivno.

CSS

.box {
  background-color: yellow;
  height: 200px;
  width: 200px;

  box-shadow: inset 5px 5px 10px 4px rgba(0,0,0,0.5);
}

Dve različite senke

Takođe možemo stvoriti element koji ima dve različite senke, širine različitih boja.

CSS

.box {
  background-color: orange;
  height: 200px;
  width: 200px;

  box-shadow: 5px 5px 10px purple, -7px -4px 4px green;
}

Solid shadow

CSS

.box {
  background-color: #999;
  border: solid 3px #000;
  height: 200px;
  width: 200px;

  box-shadow: 5rem -20px red;
}

Iz ovog primera vidimo da je upotreba solid shadow dobra, ali obično joj davanje određenog širenja i neprozirnosti rezultira daleko boljim efektom.

Box shadow Generatori

Sada kada ste razumeli svojstvo i videli ste ga na delu, dobro je napomenuti da postoji i puno generatora koje možete koristiti. Često može biti prilično teško prevesti zamišljeni dizajn u vrednosti svojstva box-shadow, tako da postoje alati koji vam mogu pomoći.

Možete da koristite CSS matic, CSS3 Gen, Mozilla box-shadow generator. Sve ovo vam pomaže da vizuelno postignete efekat senke kutije koji želite.

Kompatibilnost pretraživača

Kao što je pomenuto u našem prethodnom članku, dobra je praksa da proverite kompatibilnost pregledača novih svojstava koja učite. Trenutno je najbolja usluga za upotrebu CanIUse.

Smatramo da je podrška za pregledač veoma dobra, osim kada se koristi Opera Mini. Treba da znate da ova funkcija tamo neće raditi.

Zaključak

Objasnili smo svojstvo box-shadow i šta sve njegove vrednosti predstavljaju. Sada je na vama da dalje istražite i otkrijete njegov puni potencijal.

Hvala vam za čitanje!