3D-tekst met CSS
De bedoeling van deze pagina is zonder toelichting wel duidelijk. Op deze bladzijde wordt uitgelegd hoe je zo'n kop maakt.
De code van het voorbeeld staat onderaan deze bladzijde. Je kunt hem downloaden om zelf te gebruiken.
De kop is helemaal gemaakt met CSS. Er komen geen plaatjes en/of JavaScript aan te pas.
- Er worden twee items besproken:
- De benodigde CSS.
- Gebruiken in je eigen site.
- De CSS
- De kop is gemaakt met behulp van een CSS-class: drieD.
- Om te beginnen zet je de margin en de padding op nul. Daarmee voorkom je dat er te veel witruimte om de kop ontstaat.
- Vervolgens maak je de kop op: color, font-size, font-weight, line-height, enzovoort.
- Als je de kop (zoals op deze pagina) wilt centreren, geef je text-align:center mee.
- Nu is het tijd om het 3D-effect te maken. Dat gebeurt met een trucje: Je zet er een aantal malen een text-shadow bij, van één pixel breed, en zonder verloop. Die schaduwen laatje steeds één pixel verschuiven. Je geeft ze wel allemaal de zelfde kleur. De vervaging (blur) zet je steeds op nul.
- In het voorbeeld is het 3D-effect 10 pixels diep. Er zijn dus 10 schaduwen opgegeven, gescheiden door komma's. Als je een minder diep effect wilt, verminder je het aantal schaduwen.
- Meer informatie over text-shadow vind je in het item Opvallende koppen I: Tekstschaduw.
- Bij een diep 3D-effect (zoals hier) kan het effect dichtlopen. Dat vang je op door de letter-spacing te verhogen.
Op deze pagina is 4px gebruikt. Meestal is 2px wel voldoende.
- Gebruiken in je site
- De tekst van de kop zet je in een HTML-element dat je class="drieD" meegeeft.
- Je positioneert het op de gebruikelijke manier.
- De soort koppen is heel geschikt als hoofd-kop, dus alleen aan het begin van een pagina of middenin een pagina, maar dan omgeven door behoorlijk wat witruimte. Gebruik als tussenkopje raad ik niet aan. Daarvoor is het effect al gauw te zwaar. Maak, als je het toch doet, in elk geval het effect minder diep dan hier is in het voorbeeld is gedaan.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Zet dit in de <BODY>, op de plaats waar de kop moet verschijnen).<style>
.drieD {
margin:0;
padding:0;
font-size: 40px;
font-weight:bold;
color: maroon;
line-height: 60px;
letter-spacing: 2px;
text-align:center;
text-shadow: #888 1px -1px 0,
#888 2px -2px 0,
#888 3px -3px 0,
#888 4px -4px 0,
#888 5px -5px 0,
#888 6px -6px 0,
#888 7px -7px 0,
#888 8px -8px 0,
#888 9px -9px 0,
#888 10px -10px 0;
}
</style>
<p class="drieD">3D-tekst met CSS</p>
Inspiratie : Webdesigner Magazine nr. 47, pag. 35 (juni 2012). Dit blad wordt sinds eind november
2017 niet meer gemaakt. / bron: jsbin.com
Verfijning: Ben's Hobbyhoekje ©2015
Downloaden:
Druk op de knop:
File: voorb126.zip, 452 bytes.
Opmerking:
Het item 3D-tekst met CSS II: met een kleurverloop toont een leuke variant
van dit effect.
