03 Mar, 2009
Drop Shadow zonder afbeelding
Categoriën: box |Color |crossbrowser |hack |IE6 |IE7 |solution |valid
De illusie criëeren van een schaduw op bepaalde elementen is niets nieuws meer, het kan op verschilende manieren worden verkregen, maar toch wel hoofdzakelijk met afbeelding(en). Dit is een pure CSS oplossing.
HTML
<div class="blur"> <div class="shaduw"> <div class="inhoud">blaat blabber blaat en foo</div> </div> </div>
CSS
.shaduw, .inhoud{
position: relative;
bottom: 2px;
right: 2px;
}
.shaduw{
background-color: #666;
}
.inhoud{
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: 5px;
}
.blur{
background-color: #ccc;
margin-left: 4px;
margin-top: 4px;
height: 1%; /* voor ie7 & 6 */
}