CSS3: Schaduwen toevoegen aan tekst en elementen

Geschreven door: op zaterdag 13 juni 2015

Leestijd:

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.

css3-shadows

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:

css3-box-shadow-default-simple

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;

}

css3-box-shadow-blur

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:

css3-box-shadow-spread

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:

css3-box-shadow-inset

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:

css3-box-shadow-inset

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:

css3-text-shadow

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.


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
allrig.jpg
aliancys.jpg
eriks.jpg
heinen_en_hopman.jpg
handicare_stairlifts.jpg
Onze Middelen en Technologieën
Microsoft partner
Adobe partner
Asp dotnet
Google analytics
Google adwords
TelefoonE-mail