Revision: 8119
Updated Code
at September 3, 2008 16:23 by wizard04
Updated Code
****************
***** CSS ******
****************
.dropShadow {
position:relative;
z-index:1;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3,
.dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
top:0; left:0; /*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3,
.dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
top:0; left:-16px; /*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3,
.dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
top:-16px; left:0; /*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3,
.dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
top:-16px; left:-16px; /*shadow positioned top-left*/
}
/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div,
.dropShadow .drop4 div, .dropShadow .drop5 div {
position:absolute;
top:8px; right:0; bottom:0; left:8px;
border-style:solid;
border-color:#999999;
}
.dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
.dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
.dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
.dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
.dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }
/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div,
.dropShadow .drop4 div div, .dropShadow .drop5 div div {
position:absolute;
top:0; right:0; bottom:0; left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
background-color:white;
}
****************
***** HTML *****
****************
<div class="dropShadow dropBR" style="float:left; position:absolute;">
<div class="drop1"><div><div></div></div></div>
<div class="drop2"><div><div></div></div></div>
<div class="drop3"><div><div></div></div></div>
<div class="drop4"><div><div></div></div></div>
<div class="drop5"><div><div></div></div></div>
<div class="dropContent" style="border:1px solid black; padding:2px;">
<img src="birdhouse4.gif">
</div>
</div>
Revision: 8118
Updated Code
at September 3, 2008 16:21 by wizard04
Updated Code
****************
***** CSS ******
****************
.dropShadow {
position:relative;
z-index:1;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3,
.dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
top:0; left:0; /*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3,
.dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
top:0; left:-16px; /*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3,
.dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
top:-16px; left:0; /*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3,
.dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
top:-16px; left:-16px; /*shadow positioned top-left*/
}
/*top & bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div,
.dropShadow .drop4 div, .dropShadow .drop5 div {
position:absolute;
top:8px; right:0; bottom:0; left:8px;
border-style:solid;
border-color:#999999;
}
.dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
.dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
.dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
.dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
.dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }
/*left & right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div,
.dropShadow .drop4 div div, .dropShadow .drop5 div div {
position:absolute;
top:0; right:0; bottom:0; left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
background-color:white;
}
****************
***** HTML *****
****************
<div class="dropShadow dropBR" style="float:left; position:absolute;">
<div class="drop1"><div><div></div></div></div>
<div class="drop2"><div><div></div></div></div>
<div class="drop3"><div><div></div></div></div>
<div class="drop4"><div><div></div></div></div>
<div class="drop5"><div><div></div></div></div>
<div class="dropContent" style="border:1px solid black; padding:2px;">
<img src="ccc/images/birdhouse4.gif">
</div>
</div>
Revision: 8117
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at September 3, 2008 16:18 by wizard04
Initial Code
****************
***** CSS ******
****************
.dropShadow {
position:relative;
z-index:1;
}
/*border boxes; inside-->outside*/
.dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
.dropShadow .drop4, .dropShadow .drop5 {
position:absolute;
right:0;
bottom:0;
width:100%;
height:100%;
}
.dropShadow .drop1 { opacity:0.5; }
.dropShadow .drop2 { opacity:0.4; }
.dropShadow .drop3 { opacity:0.3; }
.dropShadow .drop4 { opacity:0.2; }
.dropShadow .drop5 { opacity:0.1; }
.dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3,
.dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
top:0; left:0; /*shadow positioned bottom-right*/
}
.dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3,
.dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
top:0; left:-16px; /*shadow positioned bottom-left*/
}
.dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3,
.dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
top:-16px; left:0; /*shadow positioned top-right*/
}
.dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3,
.dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
top:-16px; left:-16px; /*shadow positioned top-left*/
}
/*bottom borders*/
.dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div,
.dropShadow .drop4 div, .dropShadow .drop5 div {
position:absolute;
top:8px; right:0; bottom:0; left:8px;
border-style:solid;
border-color:#999999;
}
.dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
.dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
.dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
.dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
.dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }
/*right borders*/
.dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div,
.dropShadow .drop4 div div, .dropShadow .drop5 div div {
position:absolute;
top:0; right:0; bottom:0; left:0;
margin:0;
}
.dropShadow .drop1 div div { border-width:0 1px 0 1px; }
.dropShadow .drop2 div div { border-width:0 1px 0 1px; }
.dropShadow .drop3 div div { border-width:0 2px 0 2px; }
.dropShadow .drop4 div div { border-width:0 2px 0 2px; }
.dropShadow .drop5 div div { border-width:0 2px 0 2px; }
/*content being shadowed*/
.dropShadow .dropContent {
position:relative;
z-index:1;
background-color:white;
}
****************
***** HTML *****
****************
<div class="dropShadow dropBR" style="float:left; position:absolute;">
<div class="drop1"><div><div></div></div></div>
<div class="drop2"><div><div></div></div></div>
<div class="drop3"><div><div></div></div></div>
<div class="drop4"><div><div></div></div></div>
<div class="drop5"><div><div></div></div></div>
<div class="dropContent" style="border:1px solid black; padding:2px;">
<img src="ccc/images/birdhouse4.gif">
</div>
</div>
Initial URL
http://test.dragonzreef.com/cssDropShadow.htm
Initial Description
Creates a drop shadow for a div. In IE I can't get `filter:alpha(opacity=__)` to work right, but it degrades gracefully without it so I left it out.
Initial Title
CSS Drop Shadow
Initial Tags
css, html
Initial Language
CSS