Koristi se za bacanje sjena s elemenata na razini bloka (poput div-ova).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Horizontalni pomak sjene, pozitivan znači da će sjena biti s desne strane okvira, negativni pomak stavit će sjenku s lijeve strane okvira.
- Okomiti pomak sjene, negativni znači da će sjena biti iznad okvira, pozitivan znači da će sjena biti ispod okvira.
- Radijus zamućenja (nije obavezno), ako je postavljeno na 0, sjena će biti oštra, što je veći broj, to će biti zamućenija.
- 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
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
Sjena Internet Boxa
Trebaju vam dodatni elementi ...
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 ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )Povezano
- CSS3: širite vrijednost i okvir sjene samo s jedne strane
- Mozilla dokumenti
- Više granica sa
box-shadow.