Kırpma ve maskeleme kavramı oldukça basittir. Öğelerin belirli kısımlarını gizleyin ve diğerlerini gösterin. Aralarındaki gerçek fark da oldukça basit. Kırpma her zaman bir vektör yoludur, burada yolun iç kısmı görünür ve yolun dışında görünmez. Bir maskenin bir görüntü olduğu yerde, siyah bölümlerin görüntüyü şeffaf olarak maskelediği ve beyaz bölümlerin görüntünün geçmesine izin verdiği gri tonlamalı bir görüntü olarak değerlendirilir.
Kırpma ve maskelemeyi uygulamak, tarayıcı desteği (ve tüm küçük giriş ve çıkışlar) oldukça değişken olduğundan, özellikle kolay değildir. Tüm bunları bu ekran video kaydında, mücadelelerde ve hepsinde deniyoruz.
Tüm olasılıklar için sözdizimi şöyledir:
.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* Masking */ /* mask-image, mask-position, mask-repeat, mask-clip, mask-size… */ mask: url(mask.svg); mask-type: luminance || alpha; -webkit-mask-box-image: url(stampTiles.svg) 30 repeat; mask-border: url(stampTiles.svg) 30 repeat; )Bu videoda oynadığımız demo içeriklerinden bazıları burada ve burada.
İşte bununla ilgili bir sürü kaynak:
- CSS-Tricks Almanac'ta klibi yol
- CSS'de Kırpma ve Maskeleme
- WPD'de klip yolu
- MDN'de klip yolu
- MDN'de kırpma ve maskeleme
- (Kullanımdan kaldırılmış) CSS Klip Özelliği (Etkileyici Web'ler)
- CSS Maskeleme Özelliği
- Dirk Schulze tarafından CSS Maskeleme
- CSS ve
SVG'de Kırpma - Klip yolu Özelliği ve Öğesi Sara Soueidan tarafından - CodePen'de klipsli kalemler etiketli
- Demolar ve tarayıcı desteği Demo Pen by Yoksel
- Jakob Jenkov tarafından SVG Maskeleri
- Alan Greenblatt'ın kırpma ve maskeleme özellikleri için tarayıcı destek düzeyleri üzerine araştırması