Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
Creating and linking external CSS files
by Ades Tynyshov
Advanced CSS (linking to an external style sheet)
by Adam Priestley
Text with Shadow using CSS
by Sebastian Sulinski
CSS Menu Style 1
by Nick La
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Apply Shadow Using CSS
rss

Apply Shadow Using CSS

Author: Alex Allied More by this author

Added: Nov 14, 2006 Rating:  Average Rating: 3.01 Votes: 80 Position: 7936 of 13056Average Rating: 3.01 Votes: 80 Position: 7936 of 13056Average Rating: 3.01 Votes: 80 Position: 7936 of 13056Average Rating: 3.01 Votes: 80 Position: 7936 of 13056Average Rating: 3.01 Votes: 80 Position: 7936 of 13056 Level: Experienced Software:  Dreamweaver

Kinoshita Shadowed

Learn how to drop a shadow to images or photos without using Photoshop! It's fairly straight-forward and all you need is a few simple CSS codes and this transparent shadow in PNG format.

Below are the two parts of CSS needed. The first one sets the shadow image as the background, the second one will render a border around an image.

Explanation of each CSS syntax are provided to give you a better understanding of how the code works.

.img-shadow {
float:right;
background: url(trans-shadow.png) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
}

.img-shadow img {
display: block; /* IE won't do well without this */
position: relative; /* Make the shadow's position relative to its image */
padding: 5px; /* This creates a border around the image */
background-color: #fff; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */
margin: -6px 6px 6px -6px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */
}

Save the CSS, and call it in your webpage file through the following HTML codes.

<span class="img-shadow"><img src="tutorial-kinoshita.jpg"/></span>

As I've explained above in the CSS code, the PNG transparent image has compatibility issues with Internet Explorer. Let's put the codes to test with a cyan background in two of the most popular web-browsers on the Internet, Firefox and Internet Explorer. The results below, explains it all.

Firefox renders the transparent PNGs perfectly Internet Explorer doesn't support transparent PNG

It is believed that Internet Explorer will be able to support that format in their "Longhorn" version which will be released soon. So as for now, IE-oriented designers should use a white background for their image, instead.



Author's URL: www.alexallied.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Apply Shadow Using CSS"