CSS maskeleme, size bir görseli 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.
clip-path özelliğini 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 özelliğinin nasıl kullanılacağı açıklanmaktadır.
maske katmanı olarak kullanılacak bir resim belirtmenizi sağlar.
Bu size üç seçenek sunar. Bir resim dosyasını maskeniz, SVG veya gradyan olarak kullanabilirsiniz.
Tarayıcı uyumluluğu
Çoğu tarayıcı, standart CSS maskeleme özelliğini yalnızca kısmi destekler.
En iyi tarayıcı uyumluluğu için standart mülke ek olarak -webkit- ön ekini de kullanmanız gerekir.
Tarayıcıyla ilgili tüm bilgiler için CSS Maskelerini kullanabilir miyim? bölümüne bakın.
Önekli özelliği kullanan tarayıcı desteği iyi olsa da
bir resmin üzerinde metin görünmesi için maskeleme kullanırken maskeleme kullanılamadığında ne olacağına dikkat edin.
mask-image veya -webkit-mask-image desteğini tespit etmek için özellik sorguları kullanmak yararlı olabilir
ve maskelenmiş sürümünüzü eklemeden önce okunabilir bir yedek sağlayın.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Resimle maskeleme
mask-image özelliği, background-image özelliğine benzer şekilde çalışır.
Bir resmi iletmek için url() değeri kullanın.
Maske resminizin şeffaf veya yarı şeffaf bir alanı olmalıdır.
Tamamen şeffaf bir alan, o alanın altındaki resmin bir kısmının görünmez olmasına neden olur. Ancak yarı saydam bir alan kullanmak, orijinal resmin bir kısmının görünmesine olanak tanır. Farkı aşağıdaki Glitch'te görebilirsiniz. İlk görüntü, maskesi olmayan balonların orijinal resmi. İkinci resmin tamamen şeffaf arka planı üzerinde beyaz yıldız bulunan bir maske uygulanmış. Üçü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 herhangi bir uzunluk birimi ya da yüzde kullanarak arka plana boyut verebilirsiniz.
Bir arka plan resmini tekrarlıyormuş gibi maskenizi de tekrarlayabilirsiniz. kullanarak küçük bir resmi yinelenen desen olarak kullanın.
SVG ile maskeleme
Maske olarak bir resim dosyası kullanmak yerine SVG'yi kullanabilirsiniz.
Bunu yapmanın birkaç yolu vardır.
İlki, SVG'nin içinde bir <mask> öğesinin bulunması ve mask-image özelliğinde bu öğenin kimliğine referans verilmesidir.
<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.
Bununla birlikte, bir resmi maskelemenin en yaygın senaryosunda, resmi SVG'ye ekleyebiliriz.
Gradyan ile maskeleme
Maskeniz olarak bir CSS gradyanı kullanmak, resim veya SVG oluşturma zahmetine girmenize gerek kalmadan maskelenmiş bir alana ulaşmanın zarif bir yoludur.
Örneğin, maske olarak kullanılan basit bir doğrusal gradyan, resmin alt kısmının bir altyazının altında çok karanlık olmamasını sağlayabilir.
Desteklenen gradyan türlerinden herhangi birini kullanabilir ve istediğiniz kadar yaratıcı olabilirsiniz. Aşağıdaki örnekte, başlığın arkasını aydınlatacak yuvarlak bir maske oluşturmak için dairesel bir renk geçişi kullanılmaktadır.
Birden fazla maske kullanma
Arka plan resimlerinde olduğu gibi birden fazla maske kaynağı belirtebilirsiniz. istediğiniz efekti elde etmek için bunları birleştirebilirsiniz. Bu, özellikle maskeniz olarak CSS gradyanlarıyla oluşturulmuş bir kalıbı kullanmak istediğinizde yararlı olur. Bunlar genellikle birden fazla arka plan resmi kullanır ve bu nedenle kolayca maskeye çevrilebilir.
Örneğin, bu makalede güzel bir dama tahtası deseni buldum. Arka plan resimleri kullanılan kod şöyle 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;
Bunu veya arka plan resimleri için tasarlanmış başka herhangi bir deseni maskeye dönüştürmek için
background-* özelliklerini alakalı mask özellikleriyle değiştirmeniz gerekir.
-webkit önekli olanlar da dahil.
-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 gradyan desenleri uygulanarak yapılabilecek bazı gerçekten güzel efektler vardır. Glitch'i remikslemeyi ve başka varyasyonlarını test etmeyi deneyin.
Kırpmayla birlikte 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.