CSS Maskeleme
CSS maskeleme ile, öğenin bölümlerini kısmen veya tamamen gizlemek için bir öğenin üzerine yerleştirilecek bir maske katmanı oluşturursunuz.
CSS mask-image Özelliği
CSS mask-imageözelliği, bir maske katmanı görüntüsünü belirtir.
Maske katmanı görüntüsü bir PNG görüntüsü, bir SVG görüntüsü, bir CSS gradyanı veya bir SVG <mask> öğesi olabilir .
Tarayıcı Desteği
Not: Çoğu tarayıcının CSS maskelemesi için yalnızca kısmi desteği vardır. Çoğu tarayıcıda standart özelliğe ek olarak -webkit- önekini kullanmanız gerekecektir.
Aşağıdaki tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir. -webkit- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Maske Katmanı Olarak Bir Görüntü Kullanın
Maske katmanı olarak PNG veya SVG görüntüsü kullanmak için maske katmanı görüntüsünü iletmek için bir url() değeri kullanın.
Maske görüntüsünün saydam veya yarı saydam bir alana sahip olması gerekir. Siyah, tamamen şeffaf anlamına gelir.
İşte kullanacağımız maske görüntüsü (bir PNG görüntüsü):
İşte İtalya'daki Cinque Terre'den bir görüntü:
Şimdi, Cinque Terre, İtalya'dan gelen görüntü için maske görüntüsünü (yukarıdaki PNG görüntüsü) maske katmanı olarak uyguluyoruz:
Örnek
İşte kaynak kodu:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Örnek Açıklama
Özellik mask-image, bir öğe için maske katmanı olarak kullanılacak görüntüyü belirtir.
Özellik , mask-repeatbir maske görüntüsünün tekrarlanıp tekrarlanmayacağını veya nasıl tekrarlanacağını belirtir. Değer no-repeat
, maske görüntüsünün tekrarlanmayacağını belirtir (maske görüntüsü yalnızca bir kez gösterilecektir).
Başka bir örnek
Özelliği atlarsak mask-repeat, maske görüntüsü Cinque Terre, İtalya'dan alınan görüntünün her yerinde tekrarlanacaktır:
Örnek
İşte kaynak kodu:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Maske Katmanı Olarak Degradeleri Kullanın
CSS doğrusal ve radyal gradyanları da maske görüntüleri olarak kullanılabilir.
Doğrusal Gradyan Örnekleri
Burada, görüntümüz için maske katmanı olarak doğrusal bir gradyan kullanıyoruz. Bu doğrusal gradyan, yukarıdan (siyah) aşağıya (şeffaf) doğru gider:
Örnek
Maske katmanı olarak doğrusal bir degrade kullanın:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Burada, resmimiz için maske katmanı olarak metin maskeleme ile birlikte doğrusal bir gradyan kullanıyoruz:
Cinque Terre, İtalya'nın kuzeybatısında, Ligurya'da bir kıyı bölgesidir. La Spezia Eyaletinin batısında yer alır ve beş köyden oluşur: Monterosso al Mare, Vernazza, Corniglia, Manarola ve Riomaggiore.
Cinque Terre, İtalya'nın kuzeybatısında, Ligurya'da bir kıyı bölgesidir. La Spezia Eyaletinin batısında yer alır ve beş köyden oluşur: Monterosso al Mare, Vernazza, Corniglia, Manarola ve Riomaggiore.
Cinque Terre, İtalya'nın kuzeybatısında, Ligurya'da bir kıyı bölgesidir. La Spezia Eyaletinin batısında yer alır ve beş köyden oluşur: Monterosso al Mare, Vernazza, Corniglia, Manarola ve Riomaggiore.
Örnek
Maske katmanı olarak metin maskeleme ile birlikte doğrusal bir degrade kullanın:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Radyal Gradyan Örnekleri
Burada, görüntümüz için maske katmanı olarak bir radyal gradyan (daire şeklinde) kullanıyoruz:
Örnek
Maske katmanı (daire) olarak bir radyal degrade kullanın:
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
Burada, görüntümüz için maske katmanı olarak bir radyal gradyan (elips şeklinde) kullanıyoruz:
Örnek
Maske katmanı (elips) olarak başka bir radyal degrade kullanın:
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
SVG'yi Maske Katmanı olarak kullanın
SVG <mask>öğesi, maskeleme efektleri oluşturmak için bir SVG grafiği içinde kullanılabilir.
<mask>Burada, görüntümüz için farklı maske katmanları oluşturmak için SVG öğesini kullanıyoruz :
Örnek
Bir SVG maske katmanı (üçgen olarak oluşturulmuş):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Örnek
Bir SVG maske katmanı (yıldız olarak oluşturulmuş):
<svg width="600" height="400">
<mask id="svgmask2">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask2)"></image>
</svg>
Örnek
Bir SVG maske katmanı (daireler halinde oluşturulur):
<svg width="600" height="400">
<mask
id="svgmask3">
<circle fill="#ffffff" cx="75" cy="75"
r="75"></circle>
<circle fill="#ffffff" cx="80"
cy="260" r="75"></circle>
<circle fill="#ffffff"
cx="270" cy="160" r="75"></circle>
</mask>
<image
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask3)"></image>
</svg>
CSS Maskeleme Özellikleri
Aşağıdaki tablo tüm CSS maskeleme özelliklerini listeler:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |