Handy
Tip: You can give
your website design a more professional template look by using CSS Styles
to create shadows on your tables and images. Unlike javascripts, CSS
style codes can be used on membership driven sites like MySpace and
Neopets.
 Bookmark
This Page | Click Here for More CSS code templates
Learn how to
make a CSS Shadow Filter for your website text boxes
You can
add a drop shadow effect to text boxes or images with the use of the css
shadow filter. The use of the css shadow filter can make your website
design look like a professional template without the use of slow loading
graphics.
In very
simple terms, what we do to achieve the drop shadow effect is to apply
a div, which holds the container for the text or image, within another
div which holds the shadow filter command. To make this simpler we have
ready made css code that you can copy and paste on to your webpage below
each example.
CSS
Shadow filter applied to a box container
This is an example of the shadow filter in action. You can make the box any size
you want and have any color background you desire. Change the text size to suit.
The code for this is below in the text box.
Copy and paste css
code below into your webpage:
CSS
Shadow filter applied to the right of a box container.
This
is the same as the first code with a strength and direction command included.
You can play around with the strength and direction setting to obtain different
results.
The same box with the shadow applied to the right of the container. Copy
and paste css code below into your webpage
CSS Shadow filter
applied to an image
Here
we have applied a border around the image and the css drop shadow effect. Makes
the image stand out much better than without the drop shadow effect. Copy
and paste css code below into your webpage CSS
Shadow filter applied to the right of an image Copy
and paste css code below into your webpage.
|
