EverWeb Codebox

Box Shadow

Using CSS for styling images to add effects like border, frame (padding) and shadows is way more efficient than using images.

Adding a simple box shadow can help an image stand out and give it a kind of 3D effect.


CSS Box Shadow (somtimes mis-named drop shadow) can be used in all modern browsers. The image below is given a class "box-shadow" so the code pasted into the HTML Snippet is this...


<img class="box-shadow" src="{!-ASSETSPATH-!}Images/image-name.jpg" alt="Alt Text" style="width: 600px; height: 400px" />

Alt Text

These are the styles pasted into the page or site wide head code box...


<style type="text/css">

.box-shadow {

    margin: 10px;

    -moz-box-shadow: 2px 2px 10px 5px #666;

    -webkit-box-shadow: 2px 2px 10px 5px #666;

    box-shadow: 2px 2px 10px 5px #666;

}

</style>


Note that the box shadow attribute is expressed with various vendor prefixes for different web browsers. Obviously, any changes need to be applied to all three!

There are five variables in this line - box-shadow: 2px 2px 10px 5px #666;

These are...

[1] The horizontal offset of the shadow. Positive means the shadow will be on the right of the box and a negative offset will put the shadow on the left of the box.

[2] 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.

[3] The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

[4] 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).

[5] Color


There are many variations of effects and frame effects can be created by adding padding, borders and border radius.

Arrested

Negative Spread Box Shadow

This image uses a negative spread radius to squeeze in the box shadow and only push it off one edge of a box.


<style type="text/css">

.negative-spread {

    -webkit-box-shadow: 0 8px 6px -6px #000;

    -moz-box-shadow: 0 8px 6px -6px #000;

    box-shadow: 0 8px 6px -6px #000;

    margin: 10px;

}

</style>

Easy

Click the Easy button to see the widget for creating images with box shadow and rounded corners. The widget also creates circular and oval images from a rectangular one.