CSS3: Schaduwen toevoegen aan tekst en elementen

In een eerder artikel werden enkele nieuwe mogelijkheden die CSS3 verschaft voor het opmaken van een website beschreven. Hier kan je lezen hoe je gebruik maakt van een aantal andere functies: box-shadow en tekst-shadow, waarmee je schaduwen kunt toepassen op elementen in je website.

Schaduwen

Met CSS3 kan je elementen op je site een schaduw geven. Het gaat om twee types:

1. Box-shadow: schaduw op een element, bijvoorbeeld een popup-menu.
2. Text-shadow: schaduw die achter een tekst wordt getoond.

Box-shadow

Met een box-shadow geef je een element schaduw. Deze schaduw kan buiten het element liggen of in het element. Je geeft op welke kleur de schaduw heeft, waar deze zichtbaar moet zijn en je geeft aan of de schaduw vast of wazig is.

Zie onderstaande article, met opmaak.

article{

       padding: 20px;

       margin: 20px;

}

Een simpele schaduw pas je zo toe:

article{

       padding: 20px;

       margin: 20px;

      

       box-shadow: 5px 15px #999;

}

Het resultaat is als volgt:

Blur

In het voorbeeld hierboven is alleen aangegeven waar de schaduw geplaatst moet worden, horizontaal 5px, verticaal 15px. Omdat er niet is opgegeven hoe de schaduw eruit moet komen te zien, is de schaduw nu solide, zonder wazige rand.

De wazigheid (blur) geef je op als derde argument:

article{

       padding: 20px;

       margin: 20px;

      

       box-shadow: 5px 15px 5px #999;

}

Een vierde argument geeft aan hoe groot de schaduw moet zijn:

article{

       padding: 20px;

       margin: 20px;

      

       box-shadow: 5px 15px 5px 5px #999;

}

Met als gevolg:

Inset

In bovenstaande voorbeelden, is de schaduw buiten het element zichtbaar, maar een schaduw kan ook binnen een element worden getoond, via het attribuut inset. Het enige wat je hiervoor moet doen, is het woord inset toevoegen aan de CSS-verklaring:

article{

       padding: 20px;

       margin: 20px;

      

       box-shadow: inset 5px 15px 5px 5px #999;

}

De schaduw is nu binnen het element zichtbaar:

Meerdere schaduwen

Daarnaast is er nog de mogelijkheid om meerdere schaduwen toe te voegen aan een element. Dat doe je door de verschillende schaduwen komma-gescheiden op te geven, zie bijvoorbeeld:

article{

       padding: 20px;

       margin: 20px;

      

       box-shadow: inset 5px 5px 5px #333, 5px 15px 5px 5px #999;

}

De eerste schaduw wordt nu in het element geplaatst, de tweede erbuiten:

Text-shadow

Ook teksten kunnen een schaduw krijgen. De syntax hiervan is vrijwel gelijk aan box-shadow, behalve dat er geen inset en argument voor de grootte aanwezig zijn. Ook bij tekst-shadow kan je meerdere, door komma’s gescheiden schaduwen opgeven:

article{

       padding: 20px;

       margin: 20px;

      

       box-shadow: inset 5px 5px 5px #333, 5px 15px 5px 5px #999;

       color: #ddd;

       text-shadow: 1px 1px #000, -1px -1px #eee, 2px 2px 5px #00f;

}

Volgende code geeft onderstaande opmaak:

Zo kan je met box-shadow en text-shadow nét dei extra verfijning meegeven aan je site, waardoor deze professioneler oogt en zorgt voor meer conversies.