Kategoriler
Genel

CSS mask-image kullanımı

 

Bir öğenin bir bölümüne veya tümüne bir efekt vermek istiyorsanız CSS’de mask-image tam size göre. Bu gönderide mask-image nasıl çalışır bakıp örnekleri sunacağız.

mask-image 3 maskeleme seçeneği sunar, bir görsel dosyası, SVG ve gradient.

Tarayıcı uyumluluğu konusunda if kullanmanız mümkün:

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

Örnekler:

Kullanım:

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

Kaynak: https://web.dev/css-masking/

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr