CSS' maskeleme resmi özelliği ile resimlere efekt uygulayın

CSS maskeleme, bir resmi maske katmanı olarak kullanma seçeneği sunar. Bu sayede, resim düzenleyici kullanmadan ilgi çekici efektler oluşturmak için maske olarak resim, SVG veya degrade kullanabilirsiniz.

Rachel Andrew

clip-path mülkünü kullanarak bir öğeyi kırptığınızda kırpılan alan görünmez hale gelir. Bunun yerine, resmin bir bölümünü opak yapmak veya başka bir efekt uygulamak istiyorsanız maskeleme özelliğini kullanmanız gerekir. Bu yayında, CSS'de mask-image mülkünün nasıl kullanılacağı açıklanmaktadır. Bu mülk, maske katmanı olarak kullanılacak bir resim belirtmenize olanak tanır. Bu durumda üç seçeneğiniz vardır. Maske olarak resim dosyası, SVG veya gradyan kullanabilirsiniz.

Tarayıcı uyumluluğu

Çoğu tarayıcı, standart CSS maskeleme özelliğini yalnızca kısmen destekler. En iyi tarayıcı uyumluluğunu elde etmek için standart mülke ek olarak -webkit- ön ekini kullanmanız gerekir. Tarayıcı desteğiyle ilgili tüm bilgiler için CSS maskelerini kullanabilir miyim? başlıklı makaleyi inceleyin.

Ön ek özelliğini kullanan tarayıcı desteği iyi olsa da, bir resmin üstündeki metni görünür kılmak için maskeleme kullanılırken maskeleme kullanılamadığında ne olacağına dikkat edin. mask-image veya -webkit-mask-image desteğini algılamak ve maskelenmiş sürümünüzü eklemeden önce okunabilir bir yedek sağlamak için özellik sorguları kullanmanız yararlı olabilir.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

Resim kullanarak maskeleme

mask-image mülkü, background-image mülküne benzer şekilde çalışır. Resim iletmek için url() değeri kullanın. Maske resminizde şeffaf veya yarı şeffaf bir alan olmalıdır.

Tamamen şeffaf bir alan, resmin bu alanın altındaki kısmının görünmemesine neden olur. Yarı şeffaf bir alan kullanıldığında ise orijinal resmin bir kısmı gösterilir. Farklılığı aşağıdaki Glitch'te görebilirsiniz. İlk resim, maskesiz balonların orijinal resmidir. İkinci resimde, tamamen şeffaf bir arka plan üzerinde beyaz bir yıldızın bulunduğu bir maske uygulanmıştır. Üçüncü resimde, şeffaflık gradyanı içeren bir arka plan üzerinde beyaz bir yıldız vardır.

Bu örnekte, cover değerine sahip mask-size özelliğini de kullanıyorum. Bu özellik, background-size ile aynı şekilde çalışır. cover ve contain anahtar kelimelerini kullanabilir veya geçerli bir uzunluk birimi ya da yüzde kullanarak arka plana bir boyut verebilirsiniz.

Küçük bir resmi tekrar eden bir desen olarak kullanmak için maskenizi arka plan resmini tekrarladığınız gibi tekrarlayabilirsiniz.

SVG ile maskeleme

Maske olarak resim dosyası yerine SVG kullanabilirsiniz. Bunu yapmanın birkaç yolu vardır. Birincisi, SVG içinde bir <mask> öğesi bulundurmak ve mask-image mülkünde bu öğenin kimliğine referans vermektir.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

Bu yaklaşımın avantajı, maskenin yalnızca bir resme değil, herhangi bir HTML öğesine uygulanabilmesidir. Maalesef bu yaklaşımı destekleyen tek tarayıcı Firefox'tur.

Ancak, bir resmi maskelemeyle ilgili en yaygın senaryoda olduğu gibi, resmi SVG'ye dahil edebiliriz.

Gradyanla maskeleme

Maske olarak CSS renk geçişi kullanmak, resim veya SVG oluşturma zahmetine girmenize gerek kalmadan maskelenmiş bir alana sahip olmanın zarif bir yoludur.

Maske olarak kullanılan basit bir doğrusal gradyan, örneğin bir resmin alt kısmının, altyazı altında çok koyu olmasını önleyebilir.

Desteklenen degrade türlerinden herhangi birini kullanabilir ve dilediğiniz kadar yaratıcı olabilirsiniz. Bir sonraki örnekte, başlığın arkasında aydınlatılacak dairesel bir maske oluşturmak için radyal degrade kullanılmaktadır.

Birden fazla maske kullanma

Arka plan resimlerinde olduğu gibi, birden fazla maske kaynağı belirtebilir ve istediğiniz efekti elde etmek için bunları birleştirebilirsiniz. Bu özellik, özellikle maske olarak CSS renk geçişleriyle oluşturulmuş bir desen kullanmak istiyorsanız yararlıdır. Bu tür resimlerde genellikle birden fazla arka plan resmi kullanılır. Bu nedenle, resimler kolayca maskeye dönüştürülebilir.

Örneğin, bu makalede hoş bir dama desenini buldum. Arka plan resimleri kullanılan kod şu şekilde görünür:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Bu veya arka plan resimleri için tasarlanmış diğer tüm desenleri maske haline getirmek istiyorsanız background-* özelliklerini, -webkit ön ekiyle başlayanlar da dahil olmak üzere ilgili mask özellikleriyle değiştirmeniz gerekir.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

Resimlere degrade desenleri uygulayarak çok güzel efektler elde edebilirsiniz. Glitch'i remiks olarak derlemeyi ve başka varyasyonlar denemeyi deneyin.

Kırpma ile birlikte CSS maskeleri, grafik uygulaması kullanmaya gerek kalmadan resimlere ve diğer HTML öğelerine ilgi çekici öğeler eklemenin bir yoludur.

Fotoğraf: Julio Rionaldo, Unsplash.