Karmaşık Şekiller

Web özellikleri: Maskeler SVG

Genel Bakış

Öğeleri fırça darbeleri veya organik dokular gibi karmaşık, serbest biçimli şekillere kırpmak için CSS Maskeleme'yi (mask-image) kullanın. clip-path, geometrik şekiller veya vektör yolları için mükemmel olsa da mask-image, bir öğenin görünür alanını tanımlamak için resimler (şeffaf PNG'ler gibi) veya SVG'ler kullanmanıza olanak tanır. Bu yaklaşım, yarı şeffaflığı desteklediği için daha etkileyicidir. clip-path ile elde edilmesi zor veya imkansız olan yumuşak kenarlar ve karmaşık dokular oluşturulmasına olanak tanır.

Uygulama

CSS maskelerini kullanarak karmaşık şekiller uygulamak için:

Bir resimdeki şeffaflığı kullanma

Bir resmin şeffaflığını maske olarak kullanabilirsiniz. Bu durumda opak kısımlar görünür, şeffaf kısımlar ise gizli olur. Bu, PNG, SVG veya şeffaflık içeren başka bir resim ya da CSS gradyanı gibi oluşturulmuş bir resim olabilir.

.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;
}

HTML'de SVG öğesi kullanma

Sayfanızın HTML'sindeki satır içi SVG'de tanımlanan bir <mask> öğesine de referans verebilirsiniz. Maskenin öğenin boyutuna göre otomatik olarak ölçeklenmesi için maskContentUnits="objectBoundingBox" kullanın. Bu, tarayıcıya maske içindeki tüm koordinatları mutlak pikseller yerine 0 ile 1 arasındaki kesirler (ör. %50 için 0.5) olarak yorumlamasını söyler.

Parlaklık ve Alfa Maskeleme: Varsayılan olarak SVG maskeleri, opaklığı belirlemek için parlaklığı kullanır. Beyaz gösterir, siyah gizler ve gri yarı şeffaflık oluşturur. Maskenin SVG şekillerinizin alfa kanalını (şeffaflık) kullanmasını istiyorsanız CSS'nizde mask-type: alpha; veya doğrudan SVG <mask> öğesinde mask-type="alpha" değerini belirtebilirsiniz.

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

Yedek stratejiler

Tarayıcı mask-image veya ön ekli sürümü desteklemiyorsa:

  • Öğe kırpılmaz ve normal bir dikdörtgen olarak gösterilir.
  • İçeriğin hâlâ okunabilir olduğundan ve maske olmadan düzenin bozulmadığından emin olun (progresif geliştirme).
  • İsteğe bağlı olarak, clip-path ile daha basit bir yedek şekil sağlamak için özellik algılamayı kullanın.
/* 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);
  }
}