CSS Box Shadow
Jakob Jenkov |
The box-shadow CSS property can add a shadow underneath an HTML element so it looks like it is raised
above the other HTML elements in the page, almost like 3D.
The box-shadow CSS property takes 5 parameters. The format looks like this:
box-shadow : inset offsetX offsetY blurRadius spreadRadius shadowColor
The inset keyword is optional. If you put it in, the box shadow will be drawn inside the HTML element
instead, making the HTML element look like it is pressed into the screen instead of raised up from the screen.
The offsetX and offsetY parameters specify how much the shadow is to "stick out" from
the HTML element. The offsetX parameter specifies the distance along the X-axis and the offsetY
specifies the distance along the Y-axis. You can use both positive and negative numbers to control where the shadow
is displayed.
The blurRadius specifies how much the shadow is to be blurred. The larger a blur radius, the more
blurred the box shadow will be.
The spreadRadius specifies how much the shadow should spread. You can use both a positive and negative
spread radius. A negative spread radius will confine the shadow to stick out only under one of the edges of
the HTML element.
The shadowColor specifies the color of the shadow. This is just a standard CSS color
specified using standard CSS syntax. Note, that the blur radius impacts the real color too, by blurring the box shadow
color.
Here is a CSS box shadow example:
<div style="box-shadow: 5px 5px 6px #cccccc;
padding: 10px; border: 1px solid #eeeeee;">
A box with a CSS box shadow
</div>
And here is a div element with the above box shadow styles applied:
Here is an example with a negative spread radius (-6px) and 0 as
offsetX:
<div style="box-shadow: 0px 8px 6px -6px #cccccc;
padding: 10px; border: 1px solid #eeeeee;">
A box with a CSS box shadow with negative spread radius.
</div>
Here is an example with the inset keyword added too. Notice how the box shadow is now
drawn inside the HTML element in the top of the HTML element, making it look like it is pressed into the page.
<div style="box-shadow: inset 6px 6px 6px -6px #cccccc;
padding: 10px; border: 1px solid #eeeeee;">
A box with a CSS box shadow using inset
</div>
| Tweet | |
Jakob Jenkov | |
