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

CSS maskeleme, bir resmi maske katmanı olarak kullanma seçeneği sunar. Bu, resim düzenleyici olmadan ilginç efektler oluşturmak için maskeniz olarak bir resim, SVG veya gradyan kullanabileceğiniz anlamına gelir.

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 kısmını opak yapmak veya başka bir efekt uygulamak isterseniz maskelemeyi 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ğu için standart mülke ek olarak -webkit- ön ekini de kullanmanız gerekir. Tarayıcı desteğiyle ilgili tüm bilgiler için CSS maskelerini kullanabilir miyim? başlıklı makaleyi inceleyin.

Ön ek içeren özelliği 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. Bir resmi 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 kullanmak, orijinal resmin bir kısmının gösterilmesine olanak tanır. 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ü resmin arka planı üzerinde, gradyan şeffaflığına sahip beyaz bir yıldız var.

Bu örnekte, cover değeriyle 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.

Gradyan ile 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 olmamasına yardımcı olabilir.

Desteklenen degrade türlerinden herhangi birini kullanabilir ve dilediğiniz kadar yaratıcı olabilirsiniz. Bir sonraki örnekte, başlığın arkasında aydınlatmak için dairesel bir maske oluşturmak üzere 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 desenli tişört 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ırpmanın yanı sıra CSS maskeleri, bir grafik uygulaması kullanmaya gerek kalmadan resimlere ve diğer HTML öğelerine ilgi alanı eklemenin bir yoludur.

Fotoğraf: Julio Rionaldo'nun Unsplash.