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.
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
CSS maskeleme, Temel olarak yeni kullanıma sunulmasına rağmen mask-image özelliklerinin çoğu, ön ek -webkit-mask-image kullanılarak önceki tarayıcı sürümlerinde kullanılabilir.
Aşağıdaki örneklerde, en iyi tarayıcı desteği için her iki özelliğin birlikte nasıl kullanılacağı gösterilmektedir.
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 CodePen'de 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ği de kullanılmaktadır.
Bu özellik, background-size ile aynı şekilde çalışır.
cover ve contain anahtar kelimelerini kullanın veya geçerli bir uzunluk birimi ya da yüzde kullanarak arka plana bir boyut verin.
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.
.container img {
-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.
Resim maskelemenin en yaygın senaryosu için resmi SVG'ye dahil edebilirsiniz.
İlk yaklaşım, SVG'deki resim de dahil olmak üzere yeni kullanıma sunulan temel sürümdür. Bu sürüm, -webkit ön ekiyle başlayan sürümü destekleyen eski tarayıcılar tarafından desteklenir.
Gradyan maskesi
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 doğrusal gradyan, örneğin bir resmin alt kısmının, altyazı altında çok karanlık 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
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, bu resimler kolayca maskeye dönüştürülebilir.
Örneğin, bu CSS degradeleri içeren desenlerde dama desenli bir desen vardır. 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. Aşağıdaki CodePen'i forking yaparak diğer varyasyonları test edin.
Kırpma ile birlikte CSS maskeleri, grafik uygulaması kullanmaya gerek kalmadan resimlere ve diğer HTML öğelerine ilgi çekici öğeler eklemenin bir yoludur.