chiprivers Posted October 24, 2007 Share Posted October 24, 2007 Is it possible to create a basic shadow effect on photos using purely CSS and HTML without the need to have any images to represent the shadow fade? Quote Link to comment Share on other sites More sharing options...
cmgmyr Posted October 24, 2007 Share Posted October 24, 2007 here, check this out: http://saila.com/webdesign/shadow/ Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted October 25, 2007 Share Posted October 25, 2007 Now that's pretty cool ... and it's OLD if the author is concerned about the evil Netscape 4! It works fine in FF and IE6. Here is the test run code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> .box { float: left; width: 100px; height: 100px; } #boxContent { border: none; background: #9FC; } #boxContent { position: relative; left: -2px; top: -2px; } #boxContainer { position: relative; background: #666; margin: 4px; } </style> </head> <body> <div class="box" id="boxContainer"> <div class="box" id="boxContent"> A drop shadow around a box </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
LiamProductions Posted October 26, 2007 Share Posted October 26, 2007 Thats pretty cool. But i would recommend doing it on photoshop with a transparent background. Because it does not work on some browsers and it may have w3c standards errors. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted October 26, 2007 Share Posted October 26, 2007 It validated fine and works in Firefox and IE. I'll check out Safari, Opera and Konquerer. Frankly, the only browsers I could see it potentially not working in would be old IE 5 win and Mac and Old Netscape. And at this point, most designers have stopped trying to accommodate those dinos anyway - it's too easy to update IE to at least 6 and anyone using Netscape 4 has no idea what the web looks like anyway. As for text-based browsers ... well ... they wouldn't see the graphic either. HOWEVER, I don't know if the technique will work on an image (which I now realize is what chiprivers asked). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.