Kategoriler
Kodlama

CSS mask-image kullanımı

CSS mask-image kullanımı hakkında, örnekler.

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/