Pure CSS Drop Shadow box
I'm playing with a pure CSS approach to making a drop shadow for a Div with out using any images.
A simple approach with embeded DIV's each with a slightly different dark gray color.
My problem is that for some reason there apears to be a 1px white line seperating each DIV color, but that would seem to be impossible as white is not used in any of the background colors.
Anyone know what is going on???
I posted a link to the code already, but I'll go a head an post the source code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>Pure CSS Drop Shadow Box</title>
padding:0 4px 4px 0;
padding:0 3px 3px 0;
padding:0 2px 2px 0;
padding:0 1px 1px 0;
border:1px solid #333333;
<h4>Pure CSS Drop Shadow Box</h4>
<p>No images were used to make the drop shadow. Just CSS Div boxes</p>
What browser are you seeing this white border in?
Ha - you are correct.
I'm simply an idiot. The problem is that there is too much of a difference in the div background colors and I was seeing color banding, thinking it was 1px white lines.
Oh - well - I'll simply use the opacity solution that I came up with for my tip box shadows: http://www.stansight.com/DropShadowTipBox.html
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread