|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.|
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
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.
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.
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.
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.
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.
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:
Now you have all the tools required to create awesome CSS drop shadows. You might also like to check out this CSS Marquee code.