Avec l’ajout de quelques nouvelles propriétés CSS au cours des dernières années, les développeurs frontend peuvent maintenant créer des visuels de texte intéressants beaucoup plus facilement. “Knockout” ou “cutout” texte, où les mots clippent une image de fond, un dégradé ou une vidéo, sont possibles avec très peu de code.

Dans cet article, nous allons explorer cinq techniques de masquage et d’écrêtage de texte CSS en utilisant les propriétés background-clip et clip-path.

CSS Gradient Text#

Débutons par la création d’un effet de texte dégradé CSS. L’idée générale est de définir un dégradé d’arrière-plan derrière un certain texte, puis de “clipper” l’arrière-plan sur les bords du texte.

Cela ne nécessite en fait que quatre lignes de CSS pour l’accomplir.

Supposons que nous avons un h1.

<h1>Gradients</h1>

En CSS, ajoutons un fond dégradé :

h1 {background: linear-gradient(30deg, #9ED8DB 40%, #007B82 70%);}

Si vous êtes comme moi et que vous ne pouvez jamais vous souvenir de la syntaxe exacte des dégradés CSS, consultez l’outil génial de génération de dégradés sur coolors.co.

Maintenant, ajoutons la propriété qui fait le clipping : background-clip.

La propriété CSS background-clip définit si l’arrière-plan d’un élément s’étend sous son cadre de bordure, son cadre de remplissage ou son cadre de contenu. – MDN Docs

h1 {...background-clip: text;-webkit-background-clip: text;}

L’utilisation de la valeur text avec cette propriété permet au dégradé d’arrière-plan de déborder et d’écrêter les bords de l’arrière-plan dans le texte.

La dernière propriété dont nous avons besoin est une couleur de texte. Elle doit être définie sur transparent afin que le fond soit complètement visible. Sans cela, vous ne verrez probablement qu’un mince contour du dégradé.

h1 {...color: transparent;}

Le préfixe -webkit est en fait requis pour Chrome et Safari au moment de la rédaction de cet article parce que la valeur text n’a qu’un support partiel. L’ajout des propriétés préfixées et non préfixées devrait prendre en charge la plupart des navigateurs à l’exception d’Internet Explorer. Si vous devez supporter IE, vous pouvez ajouter une couleur de texte non transparente comme solution de repli et l’inclure avant la couleur transparente.

Vérifiez la doc background-clip pour des infos complètes sur le support des navigateurs.

CSS Animated Gradient Text#

Pour le prochain effet, restons-en aux gradients et utilisons un gradient animé comme arrière-plan du texte.

<h1>Animated</h1>

Et pour le CSS :

h1 {background: radial-gradient(circle, #80ffc1 0%, #ff6161 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}

Nous continuons à utiliser les propriétés background-clip, et définissons la couleur du texte à transparent comme dans l’exemple précédent.

Puisque nous travaillons avec une animation, nous devons la définir ensuite. L’animation doit se dérouler à l’infini et alterner de gauche à droite, et inversement.

h1 {...animation: animatedGradient 2s infinite ease; animation-direction: alternate;}

En dernier lieu, nous définissons l’image clé de l’animation, qui augmente la valeur background-size pour obtenir le mouvement réel de l’animation.

@keyframes animatedGradient { from { background-size: 100%; } to { background-size: 250%; }}

CSS Image Background Text#

Ce prochain exemple sera à nouveau similaire à ceux que nous venons de couvrir. La seule différence est que nous utiliserons une image réelle au lieu d’un dégradé comme arrière-plan.

<h1>Images</h1>

h1 {background: url('./image.jpg') no-repeat center center; background-clip: text; -webkit-background-clip: text; color: transparent;}

Dans notre cas, nous voulons nous assurer que l’image d’arrière-plan ne se répète pas et est centrée verticalement et horizontalement.

CSS Video Background Text#

D’accord, ensuite nous allons utiliser la vidéo comme arrière-plan de notre texte. Cet effet est différent car il utilise un SVG au lieu d’un h1.

D’abord, nous avons besoin d’un div qui contient une balise vidéo.

<div class="video-container"> <video loop autoPlay muted playsInline> <source src="./video.mp4" type="video/mp4" />... Other <source /> tags here if necessary </video></div>

Sur la balise vidéo, nous ajoutons quelques propriétés : loop autoPlay muted playsInline. Jusqu’à présent, cela devrait vous permettre d’obtenir une vidéo en boucle sur la page qui joue automatiquement sans son.

Maintenant les styles:

.video-container { position: relative;}.video-container video {margin: auto; display: block; clip-path: url(#videoText); width: 640px;}.video-container svg { width: 0; height: 0; position: absolute;}

La propriété la plus importante ici est clip-path.

La propriété CSS clip-path crée une région d’écrêtage qui définit quelle partie d’un élément doit être affichée. Les parties qui sont à l’intérieur de la région sont affichées, tandis que celles qui sont à l’extérieur sont cachées. – MDN Docs

Cela aura un peu plus de sens après que nous ayons ajouté le SVG, mais nous voulons essentiellement utiliser le chemin du SVG comme région de découpage de notre vidéo, comme cela est référencé par la valeur url(#videoText).

Maintenant, nous avons besoin d’un SVG. Il existe différentes façons de les créer et de les exporter, mais j’utilise habituellement Figma ou Sketch. Tout ce que vous avez vraiment besoin de faire est d’ajouter du texte dans le programme de votre choix et de l’exporter en tant que SVG.

Le SVG que j’utilise ci-dessous est un exemple simplifié. Le vôtre aura les propriétés habituelles xmlns, viewBox, et path.

Une fois que vous avez un SVG exporté, il y a quelques ajouts à faire. Tout d’abord, nous devons ajouter un élément clipPath autour du chemin.

L’élément SVG <clipPath> définit un chemin d’écrêtage qui sera utilisé par la propriété clip-path.Un chemin d’écrêtage restreint la région à laquelle la peinture peut être appliquée. Conceptuellement, les parties du dessin qui se trouvent en dehors de la région délimitée par le chemin d’écrêtage ne sont pas dessinées. – MDN Docs

À un haut niveau, ce n’est pas trop différent de la propriété background-clip que nous avons utilisée dans les exemples précédents.

<svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg>

L’élément clipPath devrait avoir un ID qui correspond à celui que nous avons ajouté dans notre CSS : videoText. Il a également besoin d’une propriété et d’une valeur clipPathUnits="objectBoundingBox".

La dernière chose à ajouter sont quelques valeurs transform. Nous en avons besoin car le SVG lui-même est intentionnellement défini à une hauteur et une largeur de 0 avec le CSS que nous avons ajouté. À cause de cela, nous devons remettre le chemin à l’échelle pour qu’il soit visible.

Pour obtenir les valeurs d’échelle, divisez 1 par la hauteur et la largeur. Puisque le texte dans mon exemple a une largeur de 640px et une hauteur de 360px :

1 / 640 = 0.0015625

1 / 360 = 0.002777777777778

scale(0.0015625, 0.002777777777778)

Vous pourriez avoir besoin d’expérimenter un peu avec ceci selon la largeur et la hauteur que vous voulez.

Enfin, ajoutez le SVG terminé dans le .video-container div.

<div class="video-container"><svg> <clipPath clipPathUnits="objectBoundingBox" transform="scale(0.0015625, 0.002777777777778)"><path d="M196.62 ..." /> </clipPath></svg><video>...</video></div>

CSS Split Color Text#

Pour notre dernier exemple, nous allons créer un effet de texte à couleur divisée. Il y a probablement quelques façons différentes de le faire, mais j’ai pu l’accomplir avec ce qui suit.

Premièrement, nous avons besoin d’un h1, sauf que cette fois nous lui ajoutons un attribut data. Vous verrez pourquoi dans une minute. Nous voulons également nous assurer qu’il y a un div autour du h1.

<div class="split-text-container"><h1 data-text="Split Colors">Split Colors</h1></div>

Maintenant pour les styles.

.split-text-container { position: relative;}h1 { color: #fff;}h1::before { content: attr(data-text);clip-path: polygon(0px 105%, 93% 0%, 100% 100%);margin: 0;color: #ff6161;position: absolute; top: 0; left: 0; right: 0;}

Il y a deux parties importantes ici:

1. L’utilisation de la fonction CSS attr(). La fonction obtient un attribut de l’élément sélectionné et nous permet d’utiliser cette valeur dans le CSS. Dans notre cas, nous voulons l’attribut data-text que nous avons ajouté afin de pouvoir l’utiliser dans la propriété content. Cela nous donne deux éléments de texte avec lesquels travailler : le h1 original et l’élément psuedo.

2. La propriété clip-path. Dans l’exemple précédent, nous avons utilisé un SVG séparé comme valeur de cette propriété. Nous faisons quelque chose de similaire, sauf que nous utilisons une forme polygon. C’est ce qui donne l’apparence que la couleur du texte est “divisée”. Nous utilisons la forme de ce polygon pour écrêter le texte du pseudo-élément rouge afin qu’il ne soit que partiellement visible, puis nous le positionnons au-dessus du texte blanc h1 en utilisant le positionnement absolu.

Enfin, un dernier ajout consiste à s’assurer que le texte est toujours sélectionnable.

h1::before {...pointer-events: none; /* Make text selectable */}

Sans la propriété pointer-events, le pseudo-élément empêche en fait une partie de notre texte d’être sélectionné.

Summary#

Et voilà : cinq effets CSS différents de détourage et de masquage à essayer dans votre prochain projet ! Les exemples que nous avons couverts ne font vraiment qu’effleurer la surface des choses que vous pouvez faire avec ces propriétés. Certaines autres options pourraient impliquer l’utilisation de textures, de SVG plus élaborés et de différents types d’animation.