10 exemples étonnants de masques CSS, SVG et Canvas en action

Vous pouvez faire des choses incroyables avec les masques SVG. Cette technique existe depuis des années, mais ce n'est que récemment qu'elle a fait son chemin dans le développement Web grand public.

J'ai parcouru le Web pour trouver les démos ci-dessous de masques d'écrêtage personnalisés et de masques SVG/toile. Ces exemples montrent jusqu'où vous pouvez pousser les masques sur le Web, et finalement ce qu'ils peuvent offrir aux développeurs à l'avenir.

1. Masquage de texte

Pour un exemple clair de masquage de texte en action, consultez le stylo ci-dessus. Il utilise le texte de page réel en HTML afin que vous puissiez facilement modifier ce texte pour lire ce que vous voulez.

Toute la magie opère en CSS avec des propriétés comme background-clip. Vous pouvez les appliquer à pratiquement n'importe quel texte sur n'importe quelle page, mais ils ne s'afficheront que si vous disposez d'un arrière-plan clair.

L'effet de zoom est également créé uniquement en CSS, ce qui rend cet extrait de code encore plus impressionnant.

2. Polygones de masque de découpe

Notez que ce stylo utilise JavaScript pour les animations complexes, mais tout le masquage est géré via un élément canvas. C'est une idée étonnamment complexe, donc essayer de suivre le code sera difficile.

Mais l'effet de masquage de polygone ci-dessus est l'un des modèles les plus uniques que j'ai vus. Il prend des formes conçues en CSS et utilise JavaScript pour créer ces formes en tant qu'éléments de page pour masquer une image d'arrière-plan.

Cela exécute une animation cohérente et s'exécute sur un élément Canvas alimenté par JS qui se comporte comme un conteneur pour le contenu SVG/XML. Des trucs assez fous mais c'est marrant de voir ce que les masques peuvent faire !

3. Masquage d'image

Cet exemple coupé et sec montre à quoi ressemble un masque d'image CSS. Vous pouvez voir l'avant et l'après du masque d'image ci-dessus créé par Vincent De Oliveira.

Notez que le masque texturé noir réel n'est qu'un fichier PNG. Mais il est superposé dynamiquement sur une image en CSS pour créer un effet photo masqué.

Vous pouvez le faire avec n'importe quelle texture tant qu'elle est exportée avec transparence. Il y a beaucoup de détails sur la propriété mask et bien qu'elle prenne en charge les fichiers .svg, vous trouverez peut-être plus facile de commencer avec les PNG.

4. Survol des boutons

Avez-vous déjà pensé à personnaliser les effets de survol de vos boutons ? Eh bien, cet extrait de code prouve que vous pouvez le faire avec un peu de créativité et un peu de masquage CSS.

Encore une fois, le code s'exécute sur un masque d'image prédéfini et chaque bouton a son propre effet de masque. La partie la plus cool est l'animation de survol qui ne montre pas seulement le masque, mais l'anime plutôt en vue.

Il s'agit certainement d'un morceau de code expérimental, mais il semble phénoménal dans les navigateurs WebKit et j'espère que cette technique pourrait devenir un incontournable dans quelques années.

5. Masque de texte SVG

Voici un exemple légèrement différent d'un effet de masque de texte créé par le développeur Marco Barria.

Au lieu de définir des images SVG personnalisées, le code utilise en fait un élément SVG. Il est toujours construit sur du contenu texte HTML brut, mais il fonctionne avec un filtre SVG dynamique.

C'est un peu plus technique mais accorde également beaucoup plus de contrôle au développeur. Au lieu de jouer avec Illustrator pour créer des fichiers SVG, vous pouvez coder des SVG en ligne directement dans votre document HTML.

6. Masque de texte sur toile

Avec cet exemple de canevas de Calvin Davis, vous remarquerez qu'il utilise du HTML brut pour le contenu, mais que le texte lui-même n'est pas sélectionnable.

Au lieu de cela, il est rendu sur la page à l'aide d'un élément Canvas qui peut extraire du texte en dehors du DOM. Cela le fait se comporter davantage comme une image, vous verrez donc cet effet où le texte se masque sur l'arrière-plan, mais il ne ressemble pas à du texte.

Certains concepteurs peuvent ne pas aimer cela par manque de convivialité, donc si vous voulez du texte sélectionnable, je ne m'embêterais pas avec cette configuration.

Mais c'est un bon exemple de la façon dont vous pouvez pousser la typographie avec des formes de toile.

7. Dégradé animé

Un autre effet de texte vraiment cool est ce dégradé animé créé par le développeur Svante Richter.

Il utilise tout le code SVG de la page HTML, il crée donc des masques de manière dynamique. Cette configuration SVG fonctionne en prenant en charge toute la page et en lui donnant un arrière-plan dégradé, puis en masquant cet arrière-plan uniquement à travers le texte.

Étant donné que le dégradé peut être animé via CSS, il semblera que le texte soit la seule partie animée. Effet assez cool et c'est quelque chose que vous pourriez envisager d'ajouter à un site Web expérimental ou à une page de destination.

8. Masque d'écrêtage animé

Cette animation de masque d'écrêtage abstrait utilise des bulles alimentées par JS générées de manière aléatoire pour masquer une image. Il utilise un élément canvas avec des masques d'écrêtage animés assemblés pour former un objet blob SVG cohérent.

Cela peut ne pas sembler beaucoup, mais le développeur Neil McCallion a écrit un code assez doux, et le résultat final est vraiment étrange.

Le masquage se produit principalement dans l'élément canvas, mais il est contrôlé via JavaScript. C'est une façon amusante de mélanger deux images avec une animation SVG abstraite.

Encore une fois, cela peut ne pas servir à de nombreuses fins sur un site Web réel, mais c'est une expérience intéressante pour bricoler avec des masques.

9. Masque SVG BG

D'un autre côté, voici un effet de masquage que vous pouvez exécuter sur presque n'importe quel site Web.

Cela utilise un dégradé d'arrière-plan à côté d'un en-tête de héros pour créer un effet de masquage complexe qui se mélange toujours parfaitement.

Le développeur Ryna Rudenko a repoussé les limites avec ce stylo en utilisant un élément de toile brute avec la plupart des effets de masquage superposés dans le HTML.

Non seulement ce masque est pratique et utilisable dans un grand en-tête, mais il est également très bien conçu et fonctionne uniquement sur HTML5 et CSS3. Un excellent exemple de normes Web modernes mises à profit.

10. Masques CSS et SVG

Cette galerie complète de masques SVG montre vraiment tout ce que vous pouvez faire avec du CSS pur.

C'est une démo présentant un tas de techniques de masquage différentes qui utilisent toutes la même photo, différents formats. De plus, chaque exemple comprend des exemples de codes directement sur la page que vous pouvez tester par vous-même, bien qu'il soit tout aussi facile de copier le code depuis l'éditeur de CodePen.

Mais ce petit stylo agit plus comme une introduction guidée aux différents effets de masquage d'image que vous pouvez faire. Super endroit pour commencer si vous voulez vous plonger dans les SVG et les masques avec des démos simples.