Guide de programmation pour l'API Rich Media

Masquage en HTML5

Vous déciderez de recourir ou non au masquage et déterminerez le type de masquage à utiliser en fonction de votre création et de son concept.

Trois méthodes de création de masques

Lorsque votre création recouvre la page d'un éditeur ou lorsque différents éléments de la création sont animés, il est utile de pouvoir créer des parties transparentes. Trois types de propriétés vous permettent d'obtenir un effet de masquage avec CSS :

Si vous voulez comparer les effets des propriétés "clip-path" et "mask properties", consultez la page en anglais Clipping and Masking in CSS (Clipping et masking dans CSS) sur le site CSS-Tricks.

 

Propriété "overflow:hidden"

L'une des méthodes de clipping consiste à imbriquer l'élément à découper dans un élément "div" auquel on a appliqué la propriété overflow:hidden. Cette méthode est compatible avec tous les navigateurs, mais elle se limite aux formes acceptées par l'élément "div" (avec la propriété border-radius appliquée).

Propriété "clip-path"

Il s'agit d'une propriété CSS qui permet de définir les chemins de découpe les mieux adaptés aux formes présentant des arêtes (vecteurs). Les chemins de découpe dépendent d'une forme SVG et offrent une flexibilité supérieure en termes de formes. Sachez toutefois que la propriété clip-path n'est compatible avec aucune version d'Internet Explorer.

À moins d'être un expert, il est pratiquement impossible de définir manuellement des chemins de découpe. Utilisez plutôt l'un des nombreux outils visuels disponibles gratuitement en ligne, tels que Clippy, avec lequel vous pourrez créer facilement des formes simples ou complexes.

Propriété "mask"

La propriété mask permet de masquer une partie d'un élément en se basant sur la transparence ou la luminosité de la source graphique. Les navigateurs basés sur WebKit (Chrome et Safari) sont les seuls navigateurs qui acceptent le masquage référençant une image (masking). En savoir plus sur la propriété mask

Pour savoir quel navigateur est compatible avec les propriétés clip-path et mask, consultez le site caniuse.com. La propriété overflow:hidden est quant à elle compatible avec tous les navigateurs.

Choisir la méthode adaptée à votre campagne

Avant de décider de la méthode à appliquer, sachez que la compatibilité du clipping CSS est limitée dans Internet Explorer et Safari :

  • Aucune compatibilité en ce qui concerne Internet Explorer.
  • Safari n'accepte pas les chemins SVG ; seules les formes intégrées à la déclaration CSS, telles que les cercles et les polygones, sont compatibles avec ce navigateur.

Pour une meilleure compatibilité, utilisez la propriété overflow:hidden pour adapter le contenu aux limites d'un élément parent. Par contre, cette méthode limite la forme du masque aux rectangles et aux ellipses (en utilisant border-radius). En revanche, d'autres propriétés importantes de "clip-path" sont maintenues :

  • Un contenu DOM arbitraire peut être utilisé, notamment du texte, des images, des éléments SVG et "canvas".
  • Le masque peut être animé dans la limite des formes acceptées par l'élément "div".
  • Les événements "mouse" issus de la zone invisible sont supprimés. Si une partie d'un élément n'est pas visible, il est impossible d'interagir accidentellement avec lui.

Créer des effets de masking courants avec des formes simples

Même si la propriété overflow:hidden vous limite aux formes de masque simples, vous pouvez obtenir certains effets qui vous seront utiles en animant les propriétés du masque :

  • Animer la largeur pour qu'elle passe d'une valeur nulle à la largeur de l'image afin de créer une impression d'émergence. Exemple
  • Utiliser les effets d'ombres afin de créer un masque dont les bords sont estompés. Exemple
  • Définir un arrondi des angles important et animer la largeur et la hauteur afin de créer un masque circulaire centré sur le contenu. Exemple
  • Déplacer/faire pivoter le masque afin de créer un effet de projecteur. Exemple

Combiner des masques en vue de créer des formes complexes

  • Intersection : créer une intersection en imbriquant les conteneurs de masques. Par exemple, créez une intersection entre un rectangle et un cercle afin de générer un masque semi-circulaire en expansion. Exemple
  • Union : Google Web Designer est compatible avec un type de données appelé "groupe". Les groupes vous permettent de créer des masques distincts qui recouvrent le même contenu, donnant l'impression qu'il n'y a qu'un seul masque possédant plusieurs parties (alors qu'en réalité chaque masque possède un DOM indépendant). Exemple

Animer des éléments parents et enfants dans des sens opposés

Lorsque vous animez un élément "div", tous les éléments enfants s'animent avec lui. Par conséquent, si vous voulez donner l'impression que le masque s'anime, créez une animation des éléments enfants dans le sens opposé pour que ceux-ci semblent être statiques. Exemple

Autres techniques utiles

Superposer des images partiellement transparentes

Placez, au-dessus de votre contenu, une image qui correspond à l'arrière-plan de la zone opaque et qui est par ailleurs transparente. Vous pouvez ainsi créer des formes arbitraires, mais vous ne pouvez pas empiler des masques (étant donné que chaque masque fusionne avec l'ensemble de la zone opaque plutôt que de s'afficher de manière sélective dans la zone visible). La forme de masque ne peut pas non plus être animée (en dehors du déplacement/de la rotation et de l'échelle). Exemple

Utiliser un élément "canvas"

Si l'ensemble de votre contenu se trouve dans un élément <canvas>, de nombreuses possibilités d'ajout d'effets de clipping s'offrent à vous. Toutefois, le canevas est une boîte noire et, pour qu'il accepte un contenu enrichi, son exécution est conséquente et complexe.

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?