We’ve finally answered the question we’ve been getting asked a lot lately. (the kind of question that only comes up in a bad economy) The answer was simply (more…)
I was going over some old articles I wrote and noticed the css drop shadow article might not have been exactly what you were looking for. So here is some new and improved code to copy, paste, and enjoy.
Some Content Goes Here.
This is a site I’ve been working on. CollegeRecruiter.com
Notice the Featured Employers box?
A shadow around the entire box (even with rounded corners in Firefox) without the use of a single image. NO IMAGES!!!!
By using border-right and border-bottom instead, I could even make it a standard drop shadow.
Check out the simplified code here:
<div style=”BORDER-RIGHT: #ebebeb 1px solid; BORDER-TOP: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; WIDTH: 195px; BORDER-BOTTOM: #ebebeb 1px solid; HEIGHT: 270px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>
<div style=”BORDER-RIGHT: #d7d7d7 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #d7d7d7 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #d7d7d7 1px solid; WIDTH: 193px; PADDING-TOP: 0px; BORDER-BOTTOM: #d7d7d7 1px solid; HEIGHT: 268px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>
<div style=”BORDER-RIGHT: #bdbdbd 1px solid; BORDER-TOP: #bdbdbd 1px solid; BORDER-LEFT: #bdbdbd 1px solid; WIDTH: 191px; BORDER-BOTTOM: #bdbdbd 1px solid; HEIGHT: 266px; moz-border-radius: 1em 1em; border-radius: 1em 1em”>
<div style=”MARGIN: 10px; WIDTH: 195px; WHITE-SPACE: nowrap; moz-border-radius: 1em 1em; border-radius: 1em 1em”>
Some content
</div></div></div></div>
Amazing or no? Please post your comments! There is a problem with getting Firefox to display the padding or margins correctly on the inner most box. If anyone can come up with a solution, I’d be glad to rework and post a tutorial or something.
