kullanarak bir öğeyi kırptığınızda clip-path özelliği sayesinde kırpılan alan görünmez olur. Bunun yerine görüntünün bir bölümünü opak yapmak veya ona başka bir efekt uygulamak istiyorsanız, o zaman maskeleme kullanmanız gerekir. Bu gönderi, nasıl kullanılacağını açıklar mask-image maske katmanı olarak kullanılacak bir görüntü belirtmenize izin veren CSS özelliği. Bu size üç seçenek sunar. Bir görüntü dosyasını maskeniz, bir SVG veya bir degrade olarak kullanabilirsiniz.
Tarayıcı Uyumluluğu #
Çoğu tarayıcı, standart CSS maskeleme özelliği için yalnızca kısmi desteğe sahiptir. kullanmanız gerekecek -webkit- En iyi tarayıcı uyumluluğunu elde etmek için standart özelliğe ek olarak önek. Görmek CSS Maskelerini kullanabilir miyim? tam tarayıcı desteği bilgileri için.
- Chrome 1, Desteklenir 1
- Firefox 53, Desteklenir 53
- Kenar 79, Desteklenen 79
- Safari 15.4, Desteklenir 15.4
Prefixed özelliğini kullanan tarayıcı desteği iyi olsa da, bir görüntünün üstündeki metni görünür yapmak için maskelemeyi kullanırken, maskeleme kullanılamıyorsa ne olacağına dikkat edin. desteğini tespit etmek için özellik sorgularını kullanmak faydalı olabilir. mask-image veya -webkit-mask-image ve maskelenmiş sürümünüzü eklemeden önce okunabilir bir geri dönüş sağlamak.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Bir görüntü ile maskeleme #
bu mask-image özellik şuna benzer şekilde çalışır: background-image mülk. Kullanın url() bir görüntüde iletilecek değer. Maske resminizin şeffaf veya yarı şeffaf bir alana sahip olması gerekir.
Tamamen şeffaf bir alan, görüntünün o alanın altındaki kısmının görünmez olmasına neden olur. Bununla birlikte, yarı saydam olan bir alanın kullanılması, orijinal görüntünün bir kısmının görünmesine izin verecektir. Aşağıdaki Glitch’teki farkı görebilirsiniz. İlk görsel maskesiz balonların orijinal görselidir. İkinci görüntüde, tamamen şeffaf bir arka plan üzerinde beyaz bir yıldız bulunan bir maske uygulanmış. Üçüncü görüntünün, degrade şeffaflığı olan bir arka plan üzerinde beyaz bir yıldızı vardır.
Bu örnekte ben de kullanıyorum mask-size değeri olan özellik cover. Bu özellik şu şekilde çalışır: background-size. Anahtar kelimeleri kullanabilirsiniz cover Ve contain veya herhangi bir geçerli uzunluk birimi veya yüzde kullanarak arka plana bir boyut verebilirsiniz.
Küçük bir görüntüyü yinelenen bir model olarak kullanmak için, tıpkı bir arka plan görüntüsünü tekrarladığınız gibi maskenizi de yineleyebilirsiniz.
SVG ile maskeleme #
Maske olarak bir görüntü dosyası kullanmak yerine SVG kullanabilirsiniz. Bunu başarmanın birkaç yolu var. Birincisi, bir <mask> SVG içindeki öğe ve bu öğenin kimliğine referans mask-image mülk.
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 görüntüye değil, herhangi bir HTML öğesine uygulanabilmesidir. Ne yazık ki Firefox, bu yaklaşımı destekleyen tek tarayıcıdır.
Yine de her şey bitmiş değil, bir görüntüyü maskelemeye ilişkin en yaygın senaryoda olduğu gibi, görüntüyü SVG’ye dahil edebiliriz.
Gradyan ile maskeleme #
Maskeniz olarak bir CSS gradyanı kullanmak, bir görüntü veya SVG oluşturma zahmetine girmeden maskelenmiş bir alan elde etmenin zarif bir yoludur.
Örneğin, maske olarak kullanılan basit bir doğrusal gradyan, bir görüntünün alt kısmının bir başlığın altında çok koyu olmamasını sağlayabilir.
Desteklenen degrade türlerinden herhangi birini kullanabilir ve istediğiniz kadar yaratıcı olabilirsiniz. Bu sonraki örnek, başlığın arkasını aydınlatmak için dairesel bir maske oluşturmak için radyal bir gradyan kullanır.
Birden fazla maske kullanma #
Arka plan görüntülerinde olduğu gibi, istediğiniz efekti elde etmek için bunları birleştirerek birden fazla maske kaynağı belirleyebilirsiniz. Bu, özellikle maskeniz olarak CSS gradyanlarıyla oluşturulan bir deseni kullanmak istiyorsanız kullanışlıdır. Bunlar genellikle birden çok arka plan görüntüsü kullanır ve bu nedenle kolayca bir maskeye çevrilebilir.
Örnek olarak, güzel bir dama tahtası deseni buldum. Bu makale. Arka plan resimlerini kullanan 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 görüntüleri için tasarlanmış diğer herhangi bir deseni bir maskeye dönüştürmek için, background-* ilgili özelliklere sahip mask özellikler de dahil olmak üzere -webkit ön ekli olanlar
-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;
Görüntülere degrade desenler uygulayarak yapılabilecek gerçekten güzel efektler var. Glitch’i yeniden karıştırmayı ve diğer bazı varyasyonları test etmeyi deneyin.
Kırpmanın yanı sıra CSS maskeleri, bir grafik uygulaması kullanmaya gerek kalmadan resimlere ve diğer HTML öğelerine ilgi katmanın bir yoludur.
fotoğrafı çeken Julio Rionaldo Unsplash’ta.