MasquageComme dans Photoshop, il est possible d'empêcher une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. Pour ce faire, il existes deux méthodes: utiliser une fonction ou une image de référence.
La propriété clip-path permet d'utiliser une fonction comme méthode de masquage.
Exemples:
clip-path
clip-path
La propriété mask-image permet d'utiliser une image SVG comme méthode de masquage.
Exemples:
Assurez-vous que votre image et votre masque aient le même aspect ratio.
Comme la propriété mask-image n'est toujours pas standard, en plus de la propriété, vous devez aussi ajouter sa version Webkit: -webkit-mask-image.
mask-image
mask-image
mask-image
EXERCICE Masquage - Barbie Selfie Pour cet exercice, vous devez écrire du CSS afin de recréer l'effet généré par le site web promotionel Barbie Selfie Generator.