CSS’nin clip-path özelliğiyle ilginç görüntü şekilleri oluşturun

Web sayfalarındaki öğelerin tümü dikdörtgen bir kutu içinde tanımlanır. Ancak bu, her şeyi bir kutu gibi göstermemiz gerektiği anlamına gelmez. CSS’yi kullanabilirsiniz clip-path ilginç efektler oluşturmak için bir görüntünün veya başka bir öğenin parçalarını kesme özelliği.

Yukarıdaki örnekte, balon resmi karedir (kaynak). kullanma clip-path ve temel şekil değeri circle() balonun etrafındaki ek gökyüzü, sayfada dairesel bir görüntü bırakarak kırpılır.

Resim bir bağlantı olduğundan, hakkında başka bir şey görebilirsiniz. clip-path mülk. Olaylar görüntünün gizli kısımlarında tetiklenmediği için görüntünün yalnızca görünen alanına tıklanabilir.

Kırpma, yalnızca resimlere değil, herhangi bir HTML öğesine uygulanabilir. oluşturmanın birkaç farklı yolu vardır. clip-pathbu yazıda onlara bir göz atacağız.

Tarayıcı Uyumluluğu #

Eski tarayıcılar için bir geri dönüş, tarayıcının clip-path özelliğini seçin ve kırpılmamış görüntüyü gösterin. Bu bir sorunsa test edebilirsiniz clip-path bir özellik sorgusunda ve desteklemeyen tarayıcılar için alternatif bir düzen sunar.

@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}

Basit şekiller #

bu clip-path özellik bir dizi değer alabilir. İlk örnekte kullanılan değer şuydu: circle(). Bu, içinde tanımlanan temel şekil değerlerinden biridir. CSS Şekilleri belirtimi. Bu, bir alanı kırpabileceğiniz ve ayrıca aynı değeri shape-outside metnin bu şeklin etrafına sarılmasına neden olmak için.

Temel şekillerin tam listesi:

inset() #

bu inset() değer, öğenin kenarından kırpılan alanı ekler ve üst, sağ, alt ve sol kenarlar için değerler iletilebilir. A border-radius kullanılarak kırpılan alanın köşelerini kıvırmak için de eklenebilir. round anahtar kelime.

Örneğimde, her ikisi de bir sınıfa sahip iki kutum var. .box. İlk kutuda kırpma yoktur, ikincisi kullanılarak kırpılır inset() değerler.

circle() #

Gördüğünüz gibi, circle() değer, dairesel bir kırpılmış alan oluşturur. İlk değer bir uzunluk veya yüzdedir ve dairenin yarıçapıdır. İkinci bir isteğe bağlı 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ğerlerle, şeklin öğe üzerindeki kenar boşluğu kutusu tarafından kırpılacağının farkında olun. Bir görüntü üzerinde bir daire oluşturursanız ve bu şekil görüntünün doğal boyutunun dışına taşarsa, düz bir kenar elde edersiniz.

ellipse() #

Bir elips aslında ezilmiş bir dairedir ve bu nedenle çok benzer şekilde davranır. circle() ancak x için bir yarıçap ve y için bir yarıçap artı elipsin merkezi değerini kabul eder.

polygon() #

bu polygon() değeri, her noktanın koordinatlarını ayarlayarak, ihtiyaç duyduğunuz kadar nokta tanımlayarak oldukça karmaşık şekiller oluşturmanıza yardımcı olabilir.

Çokgenler oluşturmanıza ve nelerin mümkün olduğunu görmenize yardımcı olması için kontrol edin kırpıntıA clip-path oluştur, ardından kodu kopyalayıp kendi projenize yapıştırın.

Kutu değerlerinden şekiller #

Ayrıca CSS’de tanımlanmıştır Şekiller, kutu değerleri. Bunlar, CSS Kutusu Modeli ile ilgilidir — içerik kutusu, dolgu kutusu, kenarlık kutusu ve anahtar kelime değerlerine sahip kenar boşluğu kutusu content-box, border-box, padding-boxVe margin-box.

Bu değerler, şeklin kullandığı referans kutusunu tanımlamak için tek başına veya temel bir şeklin yanında kullanılabilir. Örneğin, aşağıdaki, şekli içeriğin kenarına kırpacaktır.

.box {
clip-path: content-box;
}

Bu örnekte daire, content-box yerine referans kutusu olarak margin-box (varsayılan olandır).

.box {
clip-path: circle(45%) content-box;
}

Şu anda tarayıcılar, kutu değerlerinin kullanımını desteklememektedir. clip-path mülk. Onlar için desteklenir shape-outside Yine de.

SVG öğesi kullanma #

Kırpılan alanınız üzerinde temel şekillerle mümkün olandan daha fazla kontrol için bir SVG kullanın clipPath eleman. Ardından, kullanarak bu kimliğe başvurun. url() değeri olarak clip-path.

Kırpılan alanı canlandırma #

CSS geçişleri ve animasyonlar uygulanabilir. clip-path bazı ilginç efektler yaratmak için. Sıradaki bu örnekte, farklı yarıçap değerine sahip iki daire arasında geçiş yaparak fareyle üzerine gelindiğinde bir daireyi canlandırıyorum.

Animasyonun kırpma ile kullanılabileceği pek çok yaratıcı yol vardır. Clip-path ile canlandırma CSS Tricks’te bazı fikirleri gözden geçirir.

fotoğrafı çeken Matthew Henry Burst’ta.