CSS'de kırpma özelliğini kullanmak, tasarımlarımızda kutu gibi görünen her şeyden uzaklaşmamıza yardımcı olabilir. Çeşitli temel şekiller veya SVG kullanarak klip yolu oluşturabilirsiniz. Daha sonra, bir öğenin göstermek istemediğiniz bölümlerini kesip kaldırın.
Web sayfalarındaki öğelerin tümü dikdörtgen bir kutunun içinde tanımlanır.
Ancak bu, her şeyi kutu gibi göstermemiz gerektiği anlamına gelmez.
İlginç efektler oluşturmak amacıyla bir resmin veya başka bir öğenin bazı kısımlarını kırpmak için CSS clip-path özelliğini kullanabilirsiniz.
Yukarıdaki örnekte balon resmi karedir (kaynak).
clip-path ve circle() temel şekil değeri kullanıldığında, balonun etrafındaki ek gökyüzü kırpılır ve sayfada dairesel bir resim bırakılır.
Resim bir bağlantı olduğundan clip-path mülküyle ilgili başka içerikler görebilirsiniz.
Resimlerin gizli bölümlerinde etkinlikler tetiklenmediğinden, yalnızca resmin görünür alanı tıklanabilir.
Kırpma sadece resimlere değil herhangi bir HTML öğesine uygulanabilir.
clip-path oluşturmanın birkaç farklı yolu vardır. Bu yayında, bu yöntemleri ele alacağız.
Tarayıcı uyumluluğu
Eski tarayıcılarda yedek olarak tarayıcının clip-path özelliğini yoksayıp kırpılmamış resmi göstermesine izin verebilirsiniz.
Bu soruna neden oluyorsa bir özellik sorgusunda clip-path öğesini test edip desteklenmeyen tarayıcıları desteklemek için alternatif bir düzen sunabilirsiniz.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Temel şekiller
clip-path özelliği bir dizi değer alabilir.
İlk örnekte kullanılan değer circle() idi.
Bu, CSS Şekilleri spesifikasyonunda tanımlanan temel şekil değerlerinden biridir.
Bu, bir alanı kırpabileceğiniz ve metnin söz konusu şeklin çevresinde kaydırılması için shape-outside için aynı değeri kullanabileceğiniz anlamına gelir.
Temel şekillerin tam listesi şöyledir:
inset()
inset() değeri, kırpılan alanı öğenin kenarından içine alır ve üst, sağ, alt ve sol kenarlar için değerler aktarılabilir.
Ayrıca, round anahtar kelimesini kullanarak kırpılan alanın köşelerini eğmek için border-radius de eklenebilir.
Örneğimde, her ikisi de .box sınıfında olan iki kutum var.
İlk kutuda kırpma yok, ikinci kutu inset() değerleri kullanılarak kırpılır.
circle()
Gördüğünüz gibi, circle() değeri dairesel olarak kırpılmış bir alan oluşturur.
İlk değer, bir uzunluk ya da bir yüzde değeri ve çemberin 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.
Uzunlukları veya yüzdeleri de kullanabilirsiniz.
Düz kenarlara dikkat edin!
Tüm bu değerlerde şeklin öğe üzerindeki kenar boşluğu kutusu tarafından kırpılacağını unutmayın. Bir resmin üzerinde bir daire oluşturursanız ve bu şekil, resmin doğal boyutunun dışına çıkarsa, düz bir kenar elde edersiniz.
circle(50%) uygulandı. Resim kare olmadığı için üstteki ve alttaki kenar boşluğu kutusuna vurduk ve daire kırpıldı.ellipse()
Elips, temelde bir basık dairedir ve bu nedenle circle() şekline çok benzerdir. Ancak x için yarıçap ve y için yarıçap ile elipsin orta noktasının değerini kabul eder.
polygon()
polygon() değeri, her bir noktanın koordinatlarını ayarlayarak istediğiniz sayıda noktayı tanımlayarak oldukça karmaşık şekiller oluşturmanıza yardımcı olabilir.
Poligonlar oluşturmanıza ve nelerin mümkün olduğunu görmenize yardımcı olması için clip-path oluşturma aracı olan Clippy'ye göz atın, ardından kodu kopyalayıp kendi projenize yapıştırın.
Kutu değerlerinden şekiller
CSS Şekilleri'nde de tanımlanan kutu değerlerinden şekillerdir.
Bunlar CSS Kutusu Modeli ile ilgilidir: content-box, border-box, padding-box ve margin-box anahtar kelime değerlerine sahip içerik kutusu, dolgu kutusu, kenarlık kutusu ve kenar boşluğu kutusu.
Bu değerler tek başına ya da şekil tarafından kullanılan referans kutusunu tanımlamak için temel bir şekille birlikte kullanılabilir. Örneğin, aşağıdaki örnekte şekil, içeriğin kenarına kırpılacaktır.
.box {
clip-path: content-box;
}
Bu örnekte daire, referans kutusu olarak margin-box (varsayılan) yerine content-box öğesini kullanır.
.box {
clip-path: circle(45%) content-box;
}
Tarayıcılar şu anda clip-path özelliği için kutu değerlerinin kullanımını desteklememektedir.
Ancak shape-outside için desteklenir.
SVG öğesi kullanma
Kırpılan alanınız üzerinde temel şekillerde olduğundan daha fazla kontrol
sağlamak için SVG clipPath öğesi kullanın.
Ardından, clip-path değerini url() olarak kullanarak bu kimliğe başvurun.
Kırpılan alana animasyon ekleme
Bazı ilgi çekici efektler oluşturmak için clip-path öğesine CSS geçişleri ve animasyonları uygulanabilir.
Bir sonraki örnekte, yarıçap değeri farklı olan iki daire arasında geçiş yaparak fareyle üzerine gelindiğinde bir daire canlandırıyorum.
Animasyonları kırpmayla kullanmanın birçok yaratıcı yolu vardır. CSS Püf Noktaları'nda Clip-path ile animasyon yapma bazı fikirlerin üzerinden geçer.
Fotoğrafçı: Matthew Henry, Burst'ta.