Tekst met verlopende kleuren
De tekst hierboven is een variant van wat besproken wordt in het item Eenvoudig tekstmasker. De achtergrond-afbeelding is vervangen door een kleurverloop.
Alleen de verschillen ten opzichte van 'Eenvoudig tekstmasker' worden besproken. Voor het overige wordt daarnaar verwezen. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
De HTML van dit voorbeeld is gelijk aan die van 'Eenvoudig tekstmasker'.
De CSS van dit voorbeeld verschilt van die van 'Eenvoudig tekstmasker' op twee punten:
• background-image:url() is vervangen door background-image:linear-gradient().
• background-size: en background-position worden hier niet gebruikt.
• Behalve width> moet hier ook height worden gebruikt.
• font-size wordt ingesteld in px in plaats van %.
• width> en height worden ingesteld in verhouding tot font-size.
Dit is vooral belangrijk voor width. Als die te klein is verdwijnt een deel van de tekst. Als die te groot is verdwijnt
een deel van het kleurverloop. Een te grote width zou in het voorbeeld het rood (links) en het paars (rechts) laten
verdwijnen.
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:240px; height:40px;
margin:0 auto;
background-image:linear-gradient(to right, red, orange, yellow, green, blue, indigo ,violet);
background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
font-family:sans-serif;
font-size:36px;
font-weight:bold;
text-align:center;
}
</style>
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen).
<div class="tekst">Hallo wereld!</div>
Downloaden:
Druk op de knop:
File: voorb782.zip, 477 bytes.
