CSS maskeleme, resimleri maske katmanı olarak kullanma seçeneği sunar. Yani maskeniz olarak resim, SVG veya gradyan kullanabilirsiniz, böylece resim düzenleyici olmadan ilginç efektler oluşturabilirsiniz.
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 ona başka bir efekt uygulamak isterseniz maskelemeyi kullanmanız gerekir.
Bu yayında, maske katmanı olarak kullanılacak bir resim belirtmenizi sağlayan mask-image özelliğinin CSS'de nasıl kullanılacağı açıklanmaktadır.
Bu size üç seçenek sunar. Maskeniz, SVG'niz veya gradyan olarak bir resim dosyası kullanabilirsiniz.
Tarayıcı uyumluluğu
Çoğu tarayıcı, standart CSS maskeleme özelliğini yalnızca kısmi olarak destekler.
En iyi tarayıcı uyumluluğunu sağlamak için standart özelliğe ek olarak -webkit- önekini de kullanmanız gerekir.
Tam tarayıcı desteği bilgileri için CSS Maskeleri kullanabilir miyim? başlıklı makaleye bakın.
Önek özelliğini kullanan tarayıcı desteği iyi olsa da bir resmin üzerindeki metni görünür yapmak için maskeleme kullanırken maskeleme kullanılamadığında ne olacağına dikkat edin.
Maskelenmiş sürümünüzü eklemeden önce mask-image veya -webkit-mask-image desteğini algılamak ve okunabilir bir yedek sağlamak için özellik sorgularını kullanmak faydalı olabilir.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Resim kullanarak maskeleme
mask-image özelliğinin işleyiş şekli, background-image özelliğiyle benzerdir.
Resim iletmek için url() değeri kullanın.
Maske resminizin şeffaf veya yarı şeffaf bir alanı olmalıdır.
Tamamen şeffaf bir alan, resmin o alanın altındaki bölümünün görünmez olmasına neden olur. Bununla birlikte, yarı saydam bir alanın kullanılması, orijinal resmin bir kısmının gösterilmesine olanak tanır. Farkı 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ında gradyan şeffaflığı olan beyaz bir yıldız var.
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 değeri kullanarak arka plan için bir boyut belirleyebilirsiniz.
Küçük bir resmi tekrar eden desen olarak kullanmak için, maskenizi bir arka plan resmini tekrar eder gibi tekrarlayabilirsiniz.
SVG ile maskeleme
Maske olarak bir resim dosyası kullanmak yerine SVG'yi kullanabilirsiniz.
Bunu başarmanın birkaç yolu vardır.
Birincisi, SVG içinde bir <mask> öğesinin bulunması ve bu öğenin mask-image özelliğinde 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 sadece bir resme değil, herhangi bir HTML öğesine uygulanabilmesidir. Ne yazık ki Firefox bu yaklaşımı destekleyen tek tarayıcıdır.
Bununla birlikte, resim maskeleme şeklindeki en yaygın senaryoda söz konusu resmi SVG'ye dahil edebiliriz.
Gradyan ile maskeleme
Maskeniz olarak bir CSS gradyanı kullanmak, resim veya SVG oluşturma zahmetine girmeden maskelenmiş bir alan elde etmenin zarif bir yoludur.
Maske olarak kullanılan basit bir çizgisel renk geçişi, örneğin, resmin alt kısmının, altyazı altında çok karanlık olmamasını sağlayabilir.
Desteklenen gradyan türlerinden herhangi birini kullanabilir ve istediğiniz kadar yaratıcı olabilirsiniz. Sıradaki örnekte, altyazının arkasında aydınlatmak üzere yuvarlak bir maske oluşturmak için dairesel bir gradyan kullanılmaktadır.
Birden fazla maske kullanma
Arka plan resimlerinde olduğu gibi, birden fazla maske kaynağı belirleyerek istediğiniz efekti elde etmek için bunları birleştirebilirsiniz. Bu, özellikle maskeniz olarak CSS gradyanlarıyla oluşturulmuş bir kalıp kullanmak istiyorsanız yararlı olur. Bunlar genellikle birden fazla arka plan resmi kullandığından kolayca maskeye dönüştürülebilir.
Örneğin, bu makalede hoş bir dama tahtası deseni bulmuşumdur. Arka plan resimlerini kullanan 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;
Bunu veya arka plan resimleri için tasarlanmış diğer herhangi bir kalıbı maskeye dönüştürmek için background-* özelliklerini, -webkit önekli olanlar da dahil olmak üzere alakalı 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 renk geçişi desenleri uygulanarak gerçekten çok güzel bazı efektler oluşturulabilir. Glitch'i remiksleyin ve diğer varyasyonlarını test edin.
Kırpmanın yanı sıra CSS maskeleri, grafik uygulaması kullanmaya gerek kalmadan resimlere ve diğer HTML öğelerine ilgi çekmenin bir yoludur.
Fotoğraf: Julio Rionaldo'nun Unsplash.