Vous êtes probablement habitué à utiliser du texte pour masquer une image dans Photoshop; c'est la manière la plus connue d'ajouter une texture, ou même un arrière-plan d'image, à votre texte. Vous pouvez ensuite utiliser ce texte comme image sur votre site Web. ne serait-ce pas génial si vous pouviez appliquer le même effet en utilisant uniquement HTML et CSS? La bonne nouvelle est que vous pouvez!
CSS a introduit des propriétés telles que background-clip et mask-image que vous pouvez utiliser pour créer des effets similaires à ceux que vous créez dans Photoshop. En plus de cela, vous pouvez également utiliser SVG pour découper une image avec du texte.
Aujourd'hui, nous allons examiner les options et même créer une animation simple. Si vous souhaitez suivre le code, vous pouvez téléchargez les fichiers ici.
Comme on pouvait s'y attendre, certaines des propriétés que nous utiliserons ne sont pas supportées universellement, ce qui signifie qu'elles échoueront dans les navigateurs comme IE et Firefox. La bonne nouvelle est que ces propriétés échoueront silencieusement, ce qui signifie que ces techniques constituent une amélioration progressive, et sont parfaites pour une utilisation sur des sites.
La première option que nous examinerons est la propriété background-clip . Cette propriété définira si l'arrière-plan sera étendu ou non à la bordure. Il permet au texte d'un élément défini de découper une image.
Notre balisage est simplement un h1 avec la classe bgClip:
Clip Text
Maintenant, ajoutons la magie avec CSS ...
Nous allons ajouter de la texture à notre texte avec une image du ciel nocturne. Nous allons également nous assurer que le texte est rendu en douceur grâce au lissage des polices. Notez que pour que cela fonctionne, la couleur du texte doit être transparente, nous utiliserons donc text-fill-color: transparent.
.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;Maintenant, nous voulons juste ajouter une petite animation pour rendre le fond plus attrayant:
-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}}Voici le résultat:
La dernière technique que nous allons examiner est la texturation du texte avec masque-image. La fonctionnalité de base de cette propriété est qu’elle coupe la zone de texte visible en fonction de l’opacité.
Tout ce dont nous avons besoin est un élément h1 enveloppé dans un div:
Mask Text
Pour masquer l'image avec le texte, nous utiliserons -webkit-mask-image pour spécifier l'image et nous ajouterons également une belle ombre de texte pour faire bonne mesure. Enfin, je veux associer des effets de vol stationnaire pour révéler tout le texte au survol de la souris (juste parce que nous le pouvons):
#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;}Voici le résultat: