Hypergurl How to make CSS drop shadow boxes for text and images. Ready made CSS code for adding a drop shadow effect to text boxes or images. CSS drop shadows used to be referred to as shadow filters.





You can give your website design a more professional look by using CSS Styles to create drop shadow effect on your tables and images. Unlike javascripts, CSS style codes are fast loading and don't memory hog your computers resources.



Click Here for More CSS code templates

How to add a CSS drop shadow border to text boxes and images

You can easily add a drop shadow effect to text boxes or images with the use of the css styles and div tags. Not too long ago, this was possible with a simple CSS shadow filter, however as many browsers no longer support filters, so we have now updated these CSS codes to suit.

In very simple terms, what we do to achieve the drop shadow effect is to apply a CSS style in the head tags of your HTML, and then a div class within the body, which holds the container for the text or image. To make this simpler we have ready made CSS drop shadow code that you can copy and paste on to your webpage below each example demonstrated below.

CSS drop shadow applied to a block of text

This is an example of the CSS shadow effect in action. You can make the block of text any size you want and have any color background you desire. Change the text size and color to suit. The code for this is shown below in the code box.

Copy and paste the css code below into your webpage. The first part within and including the style tags need to go into the head tags of your document. The div class goes into your page where required.

<style type="text/css">
.shadow{
box-shadow: 5px 5px #000000;
-webkit-box-shadow: 5px 5px #000000;
-moz-box-shadow: 5px 5px #000000;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000, offX=5, offY=5, positive=true);
}
</style>

<div class="shadow" style="width:250px; height:100px; padding:5px; background:navy; border: 1px solid black;"> Your Content Goes Here</div>


CSS drop shadow effect applied with a bit of blur.

This is the same as the first code, except it has an extra blur command included. You'll notice this time lines 3,4 and 5 have an extra px number. You can play around with the settings to obtain different results.

This is the same CSS box, except this time we've added a bit of blur to the drop drop shadow.

Copy and paste the CSS code below into your webpage. Same rules as above. The style types going in the head tags, while the div class tag, where required within the body.

<style type="text/css">
.shadowblur{
box-shadow: 7px 7px 8px #000000;
-webkit-box-shadow: 7px 7px 8px #000000;
-moz-box-shadow: 7px 7px 8px #000000;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000, offX=7, offY=7, positive=true); } </style>

<div class="shadowblur" style="width:250px; height:100px; padding:5px; background:gold; border: 1px solid black;"> </div>


CSS Shadow filter applied to an image

Here we have applied a CSS drop shadow effect on an image. It helps make the image stand out much better than without the drop shadow effect.

CSS Drop shadow effect

Ready made CSS code to copy and paste into your webpage. Again remember, the style type part (lines 1-7) need to be pasted into the head tags of your webpage.

<style type="text/css">
.shadowblur{
box-shadow: 7px 7px 8px #000000;
-webkit-box-shadow: 7px 7px 8px #000000;
-moz-box-shadow: 7px 7px 8px #000000;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000, offX=7, offY=7, positive=true); } </style>

<img src="bookcovers.jpg" class="shadowblur width="118" height="154" alt="CSS Drop shadow effect">



How to change the direction of a CSS drop shadow filter

To change the direction of the drop shadow from one side of the block of text or image, to the opposite side, simply add a negative (-) to the following lines as demonstrated in the CSS code below (lines 1-4).

Copy and paste css code below into your webpage:

<style type="text/css">
.shadowblur2{
box-shadow: -7px 7px 8px #000000;
-webkit-box-shadow: -7px 7px 8px #000000;
-moz-box-shadow: -7px 7px 8px #000000;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000, offX=-7, offY=-7, positive=true); }
</style>

<img src="bookcovers.jpg" class="shadowblur width="118" height="154" alt="CSS Drop shadow effect">


Now you have all the tools required to create awesome CSS drop shadows. You might also like to check out this CSS Marquee code.

  bullet SITE SEARCH



Site design copyright 2000 - 2013 © Tanya Puntti Hypergurl.com