U bent waarschijnlijk bekend met het gebruik van tekst om een afbeelding in Photoshop te maskeren; het is de bekendste manier om wat textuur of zelfs een afbeeldingsachtergrond aan je tekst toe te voegen. U kunt die tekst vervolgens gebruiken als afbeelding op uw website; zou het echter niet geweldig zijn als je hetzelfde effect zou kunnen toepassen met alleen HTML en CSS? Het goede nieuws is, dat kan!
CSS heeft eigenschappen zoals achtergrond-clip en masker-afbeelding geïntroduceerd die u kunt gebruiken om vergelijkbare effecten te creëren als degene die u aan het maken bent in Photoshop. Bovendien kunt u SVG ook gebruiken om een afbeelding met tekst te knippen.
Vandaag bekijken we de opties en gooien we zelfs enkele eenvoudige animaties in. Als u de code wilt volgen, kunt u dit doen download de bestanden hier.
Het is te voorspellen dat sommige van de eigenschappen die we zullen gebruiken niet universeel worden ondersteund, wat betekent dat ze zullen falen in browsers zoals IE en Firefox. Het goede nieuws is dat deze eigenschappen in stilte zullen uitvallen, wat betekent dat deze technieken een progressieve verbetering zijn en prima te gebruiken in sites.
De eerste optie die we zullen bekijken, is de eigenschap background-clip . Deze eigenschap bepaalt of de achtergrond wordt uitgebreid naar de rand of niet. Hiermee kan de tekst van een gedefinieerd element een afbeelding knippen.
Onze markup is gewoon een h1 met de klasse bgClip:
Clip Text
Laten we nu de magie toevoegen met CSS ...
We voegen textuur aan onze tekst toe met een afbeelding van de nachtelijke hemel. We zorgen er ook voor dat de tekst soepel wordt weergegeven met behulp van font-smoothing. Merk op dat om dit te laten werken de tekstkleur transparant moet zijn, dus we zullen ook tekstvulkleur gebruiken : transparant.
.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;Nu willen we alleen een kleine animatie toevoegen om de achtergrond aantrekkelijker te maken:
-webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {< from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}Dit is het resultaat:
De laatste techniek waar we naar gaan kijken is het textureren van tekst met masker-afbeelding. De basisfunctionaliteit van deze eigenschap is dat deze het tekstgebied dat zichtbaar is, op basis van dekking snijdt.
Alles wat we nodig hebben is een h1-element verpakt in een div:
Mask Text
Om de afbeelding met de tekst te maskeren gebruiken we de -webkit-masker-afbeelding om de afbeelding op te geven en we voegen ook een mooie tekstschaduw toe voor goede maat. Ten slotte wil ik wat soepele zweefeffecten vastleggen om de hele tekst bij mouseover te onthullen (alleen omdat we dit kunnen):
#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}Dit is het resultaat: