CSS's Clip-path özelliği ile ilginç resim şekilleri oluşturun

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.

Rachel Andrew

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()
• circle()
• ellipse()
• polygon()

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.