CSS Maskeler

CSS gölgeliği kullanarak, bir gölgelik oluşturabilir ve bunu unsura yerleştirerek unsura bazı kısımları kısmen veya tamamen gizleyebilirsiniz.

mask-image özniteliği

CSS mask-image öznitelik, gölgelik katman resmini belirtir.

Gölgelik katman resmi PNG resmi, SVG resmi,CSS İzlenim veya SVG <mask> elementi.

Tarayıcı desteği

Aşağıdaki tablodaki sayılar, bu özelliğin tamamen desteklenen ilk tarayıcı sürümünü belirtir.

ile -webkit- Ön ekli sayı, bu ön ek'in desteklenen ilk sürümünü belirtir.

Gölgelik katmanı olarak resim kullan

PNG veya SVG resmini gölgelik katmanı olarak kullanmak için url() Değer, gölgelik katman resmini geçirir.

Gölgelik resmi, şeffaf veya yarım şeffaf alanlara sahip olmalıdır. Siyah, tamamen şeffaftır.

Kullanacağımız gölgelik resmi (PNG resmi) budur:

Bu, İtalya Beş Balık Köyü'nden gelen resimdir:

Şimdi, gölgelik resmini (yukarıdaki PNG resmini) İtalya Beş Balık Köyü resminin gölgelik katmanı olarak uygulayacağız:

Örnek

Aşağıda kaynak kodu bulunmaktadır:

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

Kişisel olarak deneyin

örnek açıklaması

mask-image öznitelik, elementin mask hattı olarak kullanılan resmi belirler.

mask-repeat öznitelik, mask hattı resminin tekrar etmesini veya nasıl tekrar edeceğini belirler. no-repeat değeri, mask hattı resminin tekrar etmemesi anlamına gelir (mask hattı resmi sadece bir kez görüntülenir).

diğer bir özellik

Eğer mask-repeat Özellik, mask hattı resminin tüm Wuyancun resminde tekrar etmesini sağlar:

Örnek

Aşağıda kaynak kodu bulunmaktadır:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Kişisel olarak deneyin

Gradyant kullanarak mask hattı:

CSS doğrultu ve radyal gradyanlar, mask hattı olarak da kullanılabilir.

Doğrultu gradyant örneği

Burada, resmin mask hattı olarak doğrultu gradyant kullanıyoruz. Bu doğrultu gradyant, üstten (siyah) alta (şeffaf) doğru gider:

Örnek

Doğrultu gradyant kullanarak mask hattı:

.mask1 {
  -webkit-mask-image: doğrultu-gradyant(siyah, şeffaf);
  mask-image: doğrultu-gradyant(siyah, şeffaf);
}

Kişisel olarak deneyin

Burada, resmin mask hattı olarak doğrultu gradyant ve metin mask hattı kullanıyoruz:

Örnek

Doğrultu gradyant ve metin mask hattı kullanarak mask hattı:

.mask1 {
  azami-genişlik: 600px;
  yükseklik: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) tekrar etmeyin;
  -webkit-mask-image: doğrultu-gradyant(siyah, şeffaf);
  mask-image: doğrultu-gradyant (siyah, şeffaf);
}

Kişisel olarak deneyin

Radyal gradyant örneği

Burada, resmin mask hattı olarak radyal gradyant (şekli daire) kullanıyoruz:

Örnek

Radyal gradyant kullanarak mask hattı (dairesel):

.mask2 {
  -webkit-mask-image: merkezi-radyal-gradyant(circle, siyah 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: merkezi-radyal-gradyant(circle, siyah 50%, rgba(0, 0, 0, 0.5) 50%);
}

Kişisel olarak deneyin

Burada, resmin gölge katmanı olarak yatay dalga gradyanını (oval şeklinde) kullanırız:

Örnek

Başka bir yatay dalga gradyanını kullanarak gölge katmanı (oval):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Kişisel olarak deneyin

SVG olarak gölge katmanı kullanma

SVG <mask> elementi, SVG grafikleri içinde kullanılarak gölge etkisi oluşturmak için kullanılabilir.

Burada, SVG <mask> elementini kullanarak resimlere farklı gölge katmanları oluştururuz:

Örnek

Bir SVG gölge katmanı (üçgen şeklinde):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Kişisel olarak deneyin

Örnek

Bir SVG gölge katmanı (yıldız şeklinde):

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Kişisel olarak deneyin

Örnek

Bir SVG gölge katmanı (yuvarlak şeklinde):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Kişisel olarak deneyin