Complexe vormen

Overzicht

Gebruik CSS-maskering (mask-image) om elementen bij te snijden tot complexe, vrije vormen zoals penseelstreken of organische texturen. clip-path is uitstekend voor geometrische vormen of vectorpaden, maar met mask-image kun je afbeeldingen (zoals png's met transparantie) of svg's gebruiken om het zichtbare gebied van een element te definiëren. Deze aanpak is expressiever omdat deze semi-transparantie ondersteunt, waardoor zachte randen en complexe texturen mogelijk zijn die moeilijk of onmogelijk te bereiken zijn met clip-path.

Implementatie

Zo implementeert u complexe vormen met CSS-maskers:

Transparantie van een afbeelding gebruiken

U kunt de transparantie van een afbeelding als masker gebruiken, waarbij ondoorzichtige delen zichtbaar zijn en transparante delen verborgen zijn. Dit kan een png, svg of andere afbeelding met transparantie zijn, of een generatieve afbeelding, zoals een CSS-verloop.

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

Een SVG-element gebruiken in HTML

Je kunt ook verwijzen naar een <mask>-element dat is gedefinieerd in een inline SVG in de HTML van je pagina. Gebruik maskContentUnits="objectBoundingBox" om het masker automatisch te schalen met de grootte van het element. Hiermee wordt de browser geïnstrueerd om alle coördinaten in het masker te interpreteren als breuken van 0 tot 1 (zoals 0.5 voor 50%) in plaats van absolute pixels.

Luminantie versus alfamaskering: SVG-maskers gebruiken standaard luminantie (helderheid) om de dekking te bepalen, waarbij wit onthult, zwart verbergt en grijs semi-transparantie creëert. Als u wilt dat het masker het alfakanaal (transparantie) van uw SVG-vormen gebruikt, kunt u mask-type: alpha; opgeven in uw CSS of mask-type="alpha" rechtstreeks op het SVG-element <mask>.

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

Reservestrategieën

Als een browser mask-image of de versie met voorvoegsel niet ondersteunt, gebeurt het volgende:

• Het element wordt niet bijgesneden en wordt getoond als een normale rechthoek.
• Zorg dat de content nog steeds leesbaar is en de vormgeving niet wordt verbroken zonder het masker (progressive enhancement).
• Gebruik eventueel functieherkenning om een eenvoudigere reservevorm te bieden met clip-path.

/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}