3D effecten op je website.

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). Hier ga ik jullie eens een afbeeldingsloze manier leren, want ik ben zo een afbeeldingsloze freak werd mij verteld.

Laten we beginnen.

Onze XHTML structuur

Wat zouden we doen zonder deze, we gaan hiervoor 3 div’s gebruiken, 1 voor de rand rond de inhoud, 1 voor de schaduw en 1 voor het overgangseffect om de illusie compleet te maken.

<div class="blur">
<div class="shaduw">
<div class="inhoud">blaat blabber blaat en foo</div>
</div>
</div>

Zoals je ziet heb ik trefwoordelijk de benaming gekozen, dan weet je ook waarmee je bezig bent als het op Css aankomt, zonder opmaak ziet het er zo uit.

De magie van CSS

Lets style some drop shadow.

Laten we met de inhoud beginnen en deze voorzien van een boord.

.inhoud{
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: 5px;
}

Dus de achtergrond is wit, tekstkleur is zwart en 1px boord in het zwart en een beetje padding van 5px. Het voorlopige resultaat kan je bekijken.

Zoals je misschien wel weet, achtergrond is standaard altijd wit, en tekst kleur is altijd standaard zwart, maar ik heb het er hier bijgezet zodat het voor beginnelingen eenvoudiger is om nadien aanpassingen uit te voeren voor achtergrond en tekst.

De shaduw

De schaduw verkijgen we door de onderliggende div een background-color te geven.

.shaduw{
background-color: #666;
}
.shaduw, .inhoud{
position: relative;
bottom: 2px;
right: 2px;
}

De magie zit hem in het tweede gedeelte van de CSS, we geven aan de div .shaduw en .inhoud de position: relative mee en bepalen dat ze zich elk afzonderlijk 2px naar boven en naar links moeten plaatsen, door position: relative verhouden ze zich afzonderlijk van elkaar waardoor eigenlijk de inhoud zich 4px verschuift. Bekijk het resultaat.

Nu nog een beetje finetuning

Om het compleet te maken gan we de overgang van de schaduw naar de achtergrond een beetje wazig maken door dezelfde truck te gebruiken van een achtergrondkleur toe te voegen aan de laatste div, daar we reeds bepaald hebben dat .inhoud en .shaduw zich elk 2px moet verschuiven is er ruimte voor de kleur die we een beetje moeten tussen wit en zwart moeten krijgen.

.blur{
background-color: #ccc;
margin-left: 4px;
margin-top: 4px;
}

Het uiteindelijk resultaat is toch vrij goed gelukt niet?.