Gevormde uitsneden

Webfuncties: Maskers

Overzicht

Met CSS-maskering kun je een element bijsnijden tot een aangepaste vorm, zoals een inkeping toevoegen aan een kaart of een gevormde rand maken. Als je vormen combineert voor complexe lay-outs, kies je je maskerstrategie op basis van het type content dat het element bevat:

Maskeringsstrategie Vooral geschikt voor Tekstimpact
Directe svg-maskering van elementen Afbeeldingen, iconen, decoratieve vormen, complexe vormen Niet aanbevolen (kan tekst bijsnijden)
Svg-maskering van aangrenzend element Kaarten met tekst, cruciale content Tekst blijft volledig leesbaar
Pure CSS-kleurovergangen Eenvoudige geometrische vormen Niet aanbevolen (kan tekst bijsnijden)

Implementatie

Zo implementeer je gevormde uitsneden:

Een svg-masker gebruiken

Met SVG-maskers kunt u vormen definiëren die worden afgetrokken van of toegevoegd aan het zichtbare gebied met witte (tonen) en zwarte (verbergen) vullingen.

Luminantie versus alfamaskering: SVG-maskers staan standaard op de modus luminantie (helderheid). Daarom gebruiken we fill="white" om gebieden te onthullen en fill="black" om ze uit te snijden. Als je liever de transparantie van de svg (alfakanaal) gebruikt in plaats van kleuren, kun je mask-type: alpha; instellen in css of mask-type="alpha" op het svg-element <mask>.

Directe svg-maskering van elementen

Als er geen tekst in het element staat waar je je zorgen over hoeft te maken (zoals profielavatars, productafbeeldingen of illustraties), kun je het svg-masker rechtstreeks op het element toepassen.

Als u maskContentUnits="objectBoundingBox" gebruikt in het svg-masker, wordt het masker automatisch geschaald naar de breedte en hoogte van elk element waarop het wordt toegepast.

<!-- 1. Define the mask in SVG (hidden from view) -->
<svg width="0" height="0" style="position: absolute;" aria-hidden="true">
  <defs>
    <!-- objectBoundingBox makes the mask scale from 0 to 1 along the element's borders -->
    <mask id="splat-mask" maskContentUnits="objectBoundingBox">
      <!-- Organic Bezier path defining an artistic paint splat shape -->
      <path d="M 0.5 0.05 C 0.58 0.05, 0.58 0.21, 0.67 0.18 C 0.76 0.15, 0.79 0.08, 0.85 0.15 C 0.91 0.22, 0.83 0.32, 0.89 0.38 C 0.95 0.44, 1.03 0.45, 0.99 0.55 C 0.95 0.65, 0.82 0.62, 0.8 0.72 C 0.78 0.82, 0.89 0.92, 0.8 0.97 C 0.71 1.02, 0.64 0.88, 0.55 0.93 C 0.46 0.98, 0.44 1.06, 0.35 1.01 C 0.26 0.96, 0.31 0.81, 0.22 0.79 C 0.13 0.77, 0.01 0.88, 0.01 0.77 C 0.01 0.66, 0.16 0.62, 0.14 0.52 C 0.12 0.42, -0.02 0.39, 0.03 0.29 C 0.08 0.19, 0.23 0.27, 0.29 0.19 C 0.35 0.11, 0.3 0.01, 0.4 0.01 C 0.5 0.01, 0.42 0.05, 0.5 0.05 Z" fill="white" />
    </mask>
  </defs>
</svg>

<!-- 2. Apply the mask to the image element -->
<img src="avatar.jpg" alt="User Profile" class="shaped-avatar">

<style>
.shaped-avatar {
  width: 200px;
  height: 200px;
  object-fit: cover;
  
  /* Apply the SVG mask ID with standard and webkit-prefixed properties */
  -webkit-mask-image: url(#splat-mask);
  mask-image: url(#splat-mask);
}
</style>

Svg-maskering van aangrenzend element

Pas het masker toe op een aangrenzend element in plaats van op het bovenliggende element dat tekst bevat. Zo wordt tekst niet afgekapt en blijft deze leesbaar.

Je kunt dit oplossen door je component in een tweedelige lay-out te structureren:

  1. Een veilige, ongemaskeerde tekstcontainer (.card-body) voor alle leesbare content.
  2. Een leeg decoratief div (.card-accent) dat ernaast wordt geplaatst en het aangepaste svg-masker krijgt.

Door beide delen dezelfde achtergrondkleur te geven, worden ze visueel samengevoegd tot één component met een aangepaste vorm.

<!-- 1. Define the SVG mask (hidden from view) -->
<svg width="0" height="0" style="position: absolute;" aria-hidden="true">
  <defs>
    <!-- Use objectBoundingBox to make the mask scale with the element -->
    <mask id="accent-stencil" maskContentUnits="objectBoundingBox">
      <!-- Fill the entire area with white (fully visible) -->
      <rect width="1" height="1" fill="white" />
      <!-- Draw a black shape to cut out a concave curve. Extending the path to x=1.1 guarantees it fully clears the right edge, preventing subpixel lines -->
      <path d="M 1.1,0 C 0.4,0.1 0.4,0.9 1.1,1 L 1.1,0 Z" fill="black" />
    </mask>
  </defs>
</svg>

<!-- 2. Create the unified card layout -->
<div class="unified-card">
  <!-- The text-bearing element remains unmasked and perfectly rectangular -->
  <div class="card-body">
    <h3>Premium Membership</h3>
    <p>Get exclusive weekly updates on modern web standards and premium UI designs.</p>
  </div>
  <!-- The empty accent element next to it is masked to form the custom shape -->
  <div class="card-accent"></div>
</div>

<style>
.unified-card {
  display: flex;
  width: 400px;
}

.card-body {
  flex: 1;
  background-color: #1e293b; /* Elegant slate color */
  color: #f8fafc;
  padding: 24px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.card-accent {
  width: 60px;
  background-color: #1e293b; /* Same background color so they merge visually without seams */
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;

  /* Reference the SVG mask */
  -webkit-mask-image: url(#card-accent-mask);
  mask-image: url(#card-accent-mask);
}
</style>

Eén CSS-verloop gebruiken voor eenvoudige uitsneden

Als je alleen eenvoudige geometrische uitsneden nodig hebt (zoals een halfronde inkeping aan de bovenkant, inkepingen aan de zijkant of rechte diagonale sneden), hoef je geen externe SVG te schrijven of te vermelden. In plaats daarvan kunt u een radiaal of lineair css-verloop rechtstreeks definiëren in de property mask-image.

<div class="gradient-masked-card">
  <h3>Notched Coupon Card</h3>
  <p>This card uses a pure CSS radial gradient to cut out a semi-circular notch along its top edge.</p>
</div>

<style>
.gradient-masked-card {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  padding: 40px 24px 24px 24px; /* Extra top padding ensures content clears the notch */
  border-radius: 16px;
  text-align: center;

  /* radial-gradient places a circle at 50% (horizontal center) and 0% (top edge), cutting out a 20px transparent notch */
  -webkit-mask-image: radial-gradient(circle at 50% 0%, transparent 20px, black 21px);
  mask-image: radial-gradient(circle at 50% 0%, transparent 20px, black 21px);
}
</style>

Reservestrategieën

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

  • Voor afbeeldingen met een vorm: Het element wordt op een nette manier gedegradeerd en wordt weergegeven als een normaal rechthoekig element met de standaardstijlen voor terugval.
  • Voor gevormde kaarten: Het aangrenzende decoratieve .card-accent-element blijft een effen, niet-gemaskeerde rechthoek. Omdat de achtergrondkleur hetzelfde is als die van de tekstcontainer, wordt de hele kaart weergegeven als een standaard, nette rechthoekige container.
  • Progressive enhancement: Door tekstlagen volledig buiten het masker te houden, blijft je content gegarandeerd volledig leesbaar, gestructureerd en toegankelijk in oudere browsers.