Koristi se za lijevanje sjena (često nazvanih "Ispuštanje sjena", kao u Photoshopu) iz elemenata. Evo primjera s najdubljom mogućom podrškom za preglednik:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Taj:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Horizontalni pomak (potreban) sjene, pozitivan znači da će sjena biti s desne strane okvira, negativni pomak stavit će sjenku s lijeve strane okvira.
- Vertikalni pomak (potreban) sjene, negativan znači da će sjena biti iznad okvira, pozitivan znači da će sjena biti ispod okvira.
- Radijus zamućenja (potreban), ako je postavljena na 0, sjena će biti oštra, što je veći broj, to će biti zamućenija, a sjena će se dalje širiti. Na primjer, sjena s vodoravnim pomakom od 5 piksela koja također ima radijus zamućenja od 5 piksela bit će 10 piksela ukupne sjene.
- Polumjer širenja (neobavezno), pozitivne vrijednosti povećavaju veličinu sjene, negativne vrijednosti smanjuju veličinu. Zadana vrijednost je 0 (sjena je iste veličine kao zamućenje).
- Boja (obavezna) - uzima bilo koju vrijednost boje, poput hex-a, named-a, rgba ili hsla. Ako je vrijednost boje izostavljena, sjene okvira crtaju se u boji prednjeg plana (tekst
color). No, imajte na umu da stariji preglednici WebKit (prije Chromea 20 i Safari 6) ignoriraju pravilo kada se boja izostavlja.
Korištenje poluprozirne boje kao što rgba(0, 0, 0, 0.4)je najčešća i lijep efekt, jer ne pokriva potpuno / neprozirno ono što je gotovo, već omogućuje da se ono ispod nalazi malo, poput prave sjene.
Primjer
Unutarnja sjena
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Primjer
Internet Explorer (8 i stariji) Box Shadow
Trebate dodatni element, ali to je moguće učiniti filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Samo s jedne strane
Korištenjem negativnog radijusa širenja možete stisnuti sjenu kutije i odgurnuti je samo s jednog ruba kutije.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Više granica i više
Možete zarezom odvojiti okvir-sjenku koliko god puta želite. Na primjer, ovo pokazuje dvije sjene s različitim položajima i različitim bojama na istom elementu:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Primjer pokazuje kako to možete koristiti za stvaranje više obruba:
Pogledajte olovku Multiple box hlad u sjeni! Chris Coyier (@chriscoyier) na CodePenu.
Primjenom sjena na pseudo elemente kojima zatim manipulirate, možete dobiti neke prilično otmjene 3D sjene u obliku okvira:
Pogledajte Pen CSS3 Box Shadows Effects Halila İbrahima Nuroğlua (@haibnu) na CodePenu.
Super glatke sjene putem višestrukih vrijednosti odvojenih zarezom:
Pogledajte
sjenilo glatke kutije olovke Chrisa Coyiera (@chriscoyier)
na CodePenu.
Podrška preglednika
Pogledajte isječak na vrhu stranice za pojedinosti o pokrivenosti prefiksa dobavljača. Ovo je jedno od onih svojstava kod kojih je ispuštanje prefiksa u ovom trenutku prilično razumno.