Crearea unei umbre pentru un element
Proprietatea box-shadow permite crearea unei umbre pentru un element. Această proprietate poate accepta mai multe valori simultan:
box-shadow: hoffset voffset blur spread color inset- hoffset: deplasare orizontală a umbrei față de element. La o valoare pozitivă, umbra se mută la dreapta, iar la o valoare negativă - la stângaxî
- voffset: deplasare verticală a umbrei față de element. La o valoare pozitivă, umbra se mută în jos, iar la o valoare negativă - în sus
- blur: o valoare opțională care determină raza de estompare a umbrei. Cu cât această valoare este mai mare, cu atât marginile umbrei vor fi mai estompate. Implicit, valoarea este 0
- spread: o valoare opțională care determină extinderea umbrei. O valoare pozitivă extinde umbra în exterior în toate direcțiile de la element, iar o valoare negativă îndreaptă umbra către element
- color: o valoare opțională care stabilește culoarea umbrei
- inset: o valoare opțională care face ca umbra să fie desenată în interiorul blocului elementului
De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Umbrele în CSS3</title>
<style>
div{
width: 128px;
height: 96px;
margin: 20px;
border: 1px solid #ccc;
background-color: #eee;
box-shadow: 10px 4px 10px 3px #888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Se pot defini mai multe umbre diferite prin separarea lor cu virgulă:
box-shadow: 5px 3px 8px 3px #faa, 10px 4px 10px 3px #888 inset;