Les masques CSS

Vers de nouveaux usages dans le webdesign

Vincent De Oliveira · @iamvdo

Vincent De Oliveira

Qui a déjà utilisé les masques CSS?

Même sans le savoir...

`border-radius`

img {
  border-radius: 50%;
}

`overflow: hidden`

.wrap {
  overflow: hidden;
}
.wrap:hover {
  transform: rotate(45deg);
}
.wrap:hover .wrap-img {
  transform: rotate(-45deg);
}

.wrap,
.wrap-inner {
  overflow: hidden;
}
.wrap:hover {
  transform: rotate(45deg);
}
.wrap:hover .wrap-inner {
  transform: rotate(45deg);
}
.wrap:hover .wrap-img {
  transform: rotate(-90deg);
}

OK, le mec se fout de nous!

C'est pas faux. Même si...

Café Club

Clipping & Masking

Clipping

.element {
  clip-path: circle(100px at center);
}

Équivalent masques vectoriels de Photoshop

Utilise une forme simple
- inset(), circle(), ellipse(), polygon()
Référence un <clipPath> SVG

Clipping 101

img{
  /* Chrome, Safari, Opera */
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 100% 38%, 80% 100%, 80% 100%, 19% 100%, 19% 100%, 0 38%, 0% 38%, 50% 0);
  /* Firefox */
  clip-path: url('#clip1');
  /* IE, I'm looking at you */
}
img:hover{
  -webkit-clip-path: polygon(50% 0%, 62% 38%, 100% 38%, 69% 61%, 80% 100%, 50% 77%, 19% 100%, 30% 61%, 0% 38%, 37% 38%);
}

<svg>
<clipPath id="clip1" clipPathUnits="objectBoundingBox">
  <polygon points=".5,0 .62,.38 1,.38 .69,.61 .8,1 .5,.77 .19,1 .3,.61 0,.38 .37,.38" />
</clipPath>
</svg>

Attention, fonctionne avec Firefox et WebKit uniquement

Clipping support

Tableau de support de la propriété clip-path

Masking

.element {
  mask: url(mask.png);
}

Équivalent masque de fusion de Photoshop

Utilise une image de transparence
- url(), linear-gradient(), radial-gradient()
Référence un <mask> SVG

Masque alpha

Transparence
Masques d'écrêtage de Photoshop
Masques CSS par défaut

Masque de luminance

Luminance
Masques de fusion de Photoshop
Masques SVG par défaut

Masking 101

img{
  /* WebKit */
  -webkit-mask: linear-gradient(black, transparent 75%);
  -webkit-mask-size: 100% 100%;
  /* Firefox */
  mask: url('#mask1');
}

<svg>
<mask id="mask1" maskUnits="userSpaceOnUse">
  <rect width="308" height="328" fill="url(#gr)"/>
  <linearGradient x1="0" y1="0" x2="0" y2="1" id="gr">
    <stop offset="0%" stop-color="white" />
    <stop offset="75%" stop-color="black" />
  </linearGradient>
</mask>
</svg>

Attention, fonctionne avec Firefox et WebKit uniquement