Wycinanki

Funkcje internetowe: Maski

Przegląd

Maskowanie CSS umożliwia przycinanie elementu do niestandardowego kształtu, np. dodanie wycięcia do karty lub utworzenie obramowania o określonym kształcie. Podczas łączenia kształtów w złożone układy wybierz strategię maskowania na podstawie typu treści, które zawiera element:

Strategia maskowania Najlepsze zastosowania Wpływ tekstu
Bezpośrednie maskowanie elementów SVG obrazy, ikony, dekoracyjne kształty, złożone kształty; Niezalecane (może przyciąć tekst)
Maskowanie SVG sąsiedniego elementu Karty z tekstem, kluczowe treści Tekst jest w pełni czytelny
Gradienty CSS Proste kształty geometryczne Niezalecane (może przyciąć tekst)

Implementacja

Aby wdrożyć wycięcia o określonym kształcie:

Używanie maski SVG

Maski SVG umożliwiają definiowanie kształtów, które odejmują lub dodają do widocznego obszaru za pomocą białych (odkrywanie) i czarnych (ukrywanie) wypełnień.

Luminancja a maskowanie alfa: maski SVG domyślnie działają w trybie luminancji (jasności), dlatego używamy koloru fill="white" do odsłaniania obszarów i koloru fill="black" do ich wycinania. Jeśli zamiast kolorów wolisz używać przezroczystości SVG (kanału alfa), możesz ustawić mask-type: alpha; w kodzie CSS lub mask-type="alpha" w elemencie SVG <mask>.

Bezpośrednie maskowanie elementów SVG

Jeśli w elemencie nie ma tekstu (np. w przypadku awatarów profilu, zdjęć produktów lub ilustracji), możesz zastosować maskę SVG bezpośrednio do elementu.

Użycie maskContentUnits="objectBoundingBox" w masce SVG zapewnia automatyczne skalowanie maski do szerokości i wysokości dowolnego elementu, do którego jest stosowana.

<!-- 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>

Maskowanie SVG sąsiedniego elementu

Zastosuj maskę do elementu przylegającego, a nie do elementu nadrzędnego zawierającego tekst. Dzięki temu tekst nie zostanie przycięty i będzie czytelny.

Aby rozwiązać ten problem, podziel komponent na 2 części:

  1. bezpieczny, nieukryty kontener tekstowy (.card-body) na wszystkie czytelne treści;
  2. Pusty element dekoracyjny div (.card-accent) umieszczony obok niego, który otrzymuje niestandardową maskę SVG.

Jeśli przypiszesz obu częściom ten sam kolor tła, wizualnie połączą się one w jeden komponent o niestandardowym kształcie.

<!-- 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>

Używanie pojedynczego gradientu CSS do prostych wycięć

Jeśli potrzebujesz tylko prostych geometrycznych wycięć (takich jak półkoliste wycięcie u góry, boczne wcięcia lub proste cięcia po przekątnej), nie musisz pisać ani odwoływać się do zewnętrznego pliku SVG. Zamiast tego możesz zdefiniować gradient promieniowy lub liniowy CSS bezpośrednio we właściwości 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>

Strategie zastępcze

Jeśli przeglądarka nie obsługuje mask-image ani wersji z prefiksem:

  • W przypadku obrazów o nietypowych kształtach: element będzie wyświetlany jako zwykły prostokątny element z domyślnymi stylami zastępczymi.
  • W przypadku kart o niestandardowym kształcie: sąsiadujący element dekoracyjny .card-accent pozostanie jednolitym, niezamaskowanym prostokątem. Ponieważ ma ten sam kolor tła co kontener tekstu, cała karta będzie renderowana jako standardowy, czysty prostokątny kontener.
  • Progresywne ulepszanie: dzięki temu, że warstwy tekstowe znajdują się całkowicie poza maską, masz pewność, że treść pozostanie w pełni czytelna, uporządkowana i dostępna w starszych przeglądarkach.