Masquage

Comme 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.

clip-path

La propriété clip-path permet d'utiliser une fonction comme méthode de masquage.

Exemples:

clip-path clip-path mask-image

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.