Eenvoudig tekstmasker
De op deze site worden drie variaties getoond van drie geanimeerde tekstmaskers. Dat is transparante tekst met daar achter
een foto of afbeelding beweegt, al of niet gestuurd door muisbewegingen of iets anders. Zie de items
438, 485 en
486.
Op deze pagina wordt een tekstmasker getoond zonder de beweging. De code kun je downloaden om zelf te gebruiken, echter zonder
de achtergrond-afbeelding.
Tekst!!
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt.
- De werking van het script
- Het script wordt uitgevoerd tijdens het laden van de pagina, daarna doet het niets meer. Vanwege het statische karakter
van dit effect is dat ook niet nodig.
- HTML
- De HTML bestaat uit één enkele regel code: Een <div>-tag met klasse tekst, die de tekst
in het effect bevat. Hier is dat Tekst!!.
- CSS
- De CSS van het effect bestaat uit één enkele klasse, tekst. In tekst zijn drie samenhangende taken
te onderscheiden:
1º afmetingen en positionering in het document,
2º De transparante tekst en de achtergrond-afbeelding,
3º De opmaak van de letters.
- De breedte van tekst in het voorbeeld is 400px. Dit is precies genoeg ruimte voor Tekst!!.
- tekst wordt gecentreerd in de regel met margin:0 auto.
- De CSS-eigenschappen waarmee de achtergrond van tekst wordt opgemaakt beginnen allemaal met background-.
- background-image:url('foto.jpg'); stelt de achtergrond-afbeelding in. Het is het pad naar de bestandsnaam.
- background-size:cover; stelt in dat de achtergrond-afbeelding de hele oppervlakte van tekst bedekt.
- background-clip:text; stelt in dat de achtergrond wordt begrensd door de contouren van de letters.
- background-position:center top; bepaalt de plaats van de achtergrond-afbeelding binnen tekst in X- resp. Y-richting.
- Meer informatie over deze eigenschappen is o.a. te vinden op w3schools.com
- Om de achtergrond door de letters heen zichtbaar te maken is text-fill-color:transparent; gebruikt.
- Voor bijna alle browsers is voor de eigenschap text-fill-color de prefix -webkit nodig.
- De tekst zelf is opgemaakt met font-size, font-weight en font-family.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Regel een geschikte achtergrond-afbeelding en zet de bestandsnaam het CSS-regel background-image:url(…). Bouw de code op zoals hieronder is aangegeven.
- De eigenschap background-position kan worden veranderd om de achtergrond optimaal achter de tekst te krijgen. De andere background-eignschappen moeten ongewijzigd blijven.
- Pas de eigenschappen van de letters aan: grootte, gewicht en lettertype. Gebruik van een
webfont wordt aanbevolen, zodat het effect er in elke browser hetzelfde
uit ziet.
- Tenslotte...
- Om dit effect goed tot zijn recht te laten komen is het gebruik van grote, vette letters noodzakelijk.
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>).
<style>
.tekst {
position:relative;
width:400px;
margin:0 auto;
background-image:url('foto.jpg');
background-size:cover;
background-clip:text;
background-position:center top;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
font-size:1000%;
font-weight:bold;
font-family:serif;
}
</style>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).
<div class="tekst">Tekst!!</div>
Downloaden:
Druk op de knop:
File: voorb767.zip, 437 bytes.
