:BefTer Drop Shadows
I just came across :BefTer Drop Shadows, a clever technique which uses the :before and :after pseudo elements to create drop shadows.
When I checked the original demo, I found that it works fine in Mozilla 1.6, Opera 7.5, OmniWeb 5b, Firefox 0.8 and Camino 0.8, all on Mac OS X 10.3.3. However, in Safari 1.2.1, the lower left corner is missing.
I had a look and found that adding
div.beftershadow img {
display:block;
}
will make Safari display the lower left corner, without breaking it in any of the other browsers.
- Previous post: Ticked Off Visited Links
- Next post: Bookmarks for standards testing
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
I have taken the width and height out of the style(-sheet) and now I can shadow every image with:
<div class="beftershadow" style={width:80px;height:80px;}> <img src="images/ball.jpg" width="72" height="72" alt="ball dus" border="0"> </div>
(just add 8 px to image size)
Sorry, comments are closed for this post.