CSS'de kırpma kullanmak, kutu gibi görünen tasarımlarımızdaki her şeyden uzaklaşmamıza yardımcı olabilir. Çeşitli temel şekiller veya SVG kullanarak klip yolu oluşturabilirsiniz. Ardından, öğenin göstermek istemediğiniz kısımlarını kesin.
Web sayfalarındaki öğelerin tümü dikdörtgen bir kutu içinde tanımlanır.
Ancak bu, her şeyi kutu gibi göstermemiz gerektiği anlamına gelmiyor.
Bir resmin veya başka bir öğenin bazı kısımlarını kırpmak için CSS clip-path
özelliğini kullanabilirsiniz.
ve ilginç efektler oluşturun.
Yukarıdaki örnekte, balon resmi karedir (kaynak).
clip-path
ve circle()
temel şekil değeri kullanılıyor
balonun çevresindeki ilave gökyüzü kırpılıyor ve sayfada dairesel bir resim bırakılıyor.
Resim bir bağlantı olduğundan clip-path
mülküyle ilgili başka bir şey görebilirsiniz.
Etkinlikler resmin gizli kısımlarında tetiklenmediğinden, yalnızca resmin görünür alanı tıklanabilir.
Kırpma, yalnızca resimlere değil, tüm HTML öğelerine uygulanabilir.
clip-path
oluşturmanın birkaç farklı yolu vardır. Bu gönderide bunlara göz atacağız.
Tarayıcı uyumluluğu
Eski tarayıcılar için, tarayıcının clip-path
özelliğini yoksaymasına ve kırpılmamış resmi göstermesine izin vermek bir yedek olabilir.
Bu bir sorunsa özellik sorgusunda clip-path
için test yapabilir ve desteklemeyen tarayıcılar için alternatif bir düzen sunabilirsiniz.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Temel şekiller
clip-path
mülkü çeşitli değerler alabilir.
İlk örnekte kullanılan değer circle()
idi.
Bu,
CSS Şekilleri spesifikasyonu.
Bu, bir alandan klip oluşturabileceğiniz anlamına gelir.
ve metnin bu şeklin çevresinden akıtılması için shape-outside
için de aynı değeri kullanın.
Temel şekillerin tam listesi:
inset()
inset()
değeri, kırpılan alanı öğenin kenarından içeriye koyar.
ve üst, sağ, alt ve sol kenarlar için değerler iletilebilir.
Kesilen alanın köşelerini eğmek için border-radius
eklenebilir.
kullanarak round
anahtar kelimesini kullanabilirsiniz.
Örneğimde her ikisi de .box
sınıfına sahip iki kutum var.
İlk kutuda kırpma yok, ikinci kutuda inset()
değerleri kullanılarak kırpılıyor.
circle()
Gördüğünüz gibi, circle()
değeri dairesel bir kırpılmış alan oluşturur.
İlk değer bir uzunluk veya yüzde değeridir ve dairenin yarıçapıdır.
İsteğe bağlı ikinci bir değer, dairenin merkezini ayarlamanıza olanak tanır.
Aşağıdaki örnekte, kırpılmış dairemi sağ üste ayarlamak için anahtar kelime değerlerini kullanıyorum.
Uzunluk veya yüzde değerleri de kullanabilirsiniz.
Düz kenarlara dikkat edin!
Tüm bu değerlerde, şeklin öğedeki kenar boşluğu kutusu tarafından kırpılacağını unutmayın. Bir resmin üzerinde daire oluşturursanız ve bu şekil resmin doğal boyutunun dışına çıkarsa düz bir kenar elde edersiniz.
ellipse()
Elipsler, bastırılmış bir dairedir.
ve circle()
gibi davranır ancak x için bir yarıçap ve y için bir yarıçap kabul eder,
+ elipsin merkezi değerinin toplamıdır.
polygon()
polygon()
değeri oldukça karmaşık şekiller oluşturmanıza yardımcı olabilir.
noktaları tanımlayarak
her bir noktanın koordinatlarını ayarlayın.
Poligonlar oluşturmanıza ve mümkün olanları görmenize yardımcı olması için Clippy'ye göz atın,
clip-path
oluşturma aracı
kodu kopyalayıp kendi projenize yapıştırın.
Kutu değerlerinden şekiller
CSS Şekillerinde, kutu değerlerinden alınan şekiller de tanımlanır.
Bunlar, CSS Kutusu Modeli ile ilgilidir. İçerik kutusu, dolgu kutusu, kenarlık kutusu,
content-box
, border-box
, padding-box
ve margin-box
anahtar kelime değerlerini içeren kenar boşluğu kutusunu işaretleyin.
Bu değerler, tek başlarına ya da şeklin kullandığı referans kutusunu tanımlamak için temel bir şeklin yanında kullanılabilir. Örneğin, aşağıdaki kodda şekil içeriğin kenarına kırpılır.
.box {
clip-path: content-box;
}
Bu örnekte daire, referans kutusu olarak margin-box
(varsayılan) yerine content-box
'ü kullanır.
.box {
clip-path: circle(45%) content-box;
}
Şu anda tarayıcılar, clip-path
mülkü için kutu değerlerinin kullanımını desteklemiyor.
Ancak bunlar shape-outside
için desteklenir.
SVG öğesi kullanma
Kısaltılan alanınız üzerinde temel şekillerle elde edebileceğinizden daha fazla kontrol sahibi olmak için
SVG clipPath
öğesi kullanın.
Ardından, clip-path
değeri olarak url()
kullanıp bu kimliği referans gösterin.
Kırpılan alana animasyon ekleme
Bazı ilginç efektler oluşturmak için clip-path
öğesine CSS geçişleri ve animasyonları uygulanabilir.
Bir sonraki örnekte, farklı yarıçap değerlerine sahip iki daire arasında geçiş yaparak fareyle üzerine gelindiğinde bir dairenin animasyonu yapılmaktadır.
Animasyonun kırpma ile kullanılmasının birçok yaratıcı yolu vardır. CSS Tricks'te Clip-path ile animasyon oluşturmak için bazı fikirler sunulur.
Fotoğrafçı: Matthew Henry, Burst'ta.