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 */
}

Gerelateerde Snippets

Geen reacties op "Drop Shadow zonder afbeelding"

Reactie formulier


Demo: Drop Shadow zonder afbeelding:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.