--> (Word) | --> (PDF) | --> (Epub) | |
This article has been published [fromdate] |
Used in casting shadows off block-level elements (like divs).
- The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
- The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
- The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
- The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
- Color (Hexadecimal or by {name}).
Example
Inner Shadow
Example
Internet Explorer Box Shadow
You need extra elements...
.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; }
One-Side Only
Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.
.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; }
SOURCE | LINK (Css-tricks.com) | LANGUAGE | ENGLISH |