Kategoriler
Kodlama

CSS’de clip-path kullanımı

clip-path SVG öğelerinin, resimlerin veya herhangi bir HTML öğesinin görünür kısımlarının kırpılmasına izin veren çok ilginç bir özelliktir.

  • Volkan Yılmaz
  • Yazı tarihi
CSS clip-path
CSS clip-path

Bir süre önce üzerinde çalıştığım bir web sitesi projesinde bazı özel şekillere ihtiyacım oldu, elbette eski nesil bir metotla değil de bunu yeni nesil bir metotla yapmayı istedim, böylece CSS clip-path ile tanıştım.

İstediğimiz şekillere clip-path ile ulaşmak mümkün, temel şekilleri aşağıda vereceğim.

Temel şekiller

Bunlar temel şekillerdir ve aslında hayal gücünüze göre çok farklı şekiller de yapılabilmekte.

Çokgen

Mevcut tüm şekiller arasında en esnek olanıdır çünkü istediğiniz miktarda nokta belirlemenize izin verir. Sağlanan noktalar, grafik sayfamızdaki değerleri çizdiğimiz gibi, X ve Y koordinat çiftleridir.

img{
 
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 
}

Daireler

Şu sözdizimiyle tanımlanır: circle (posX posY’de yarıçap)

img{
clip-path: circle(50% at 50% 50%);
}

Elips

Şu sözdizimi kullanılarak tanımlanır: elips (radiusX radiusY, posX pozY’de)

img{
 clip-path: ellipse(50% 65% at 70% 50%);
}

Inset

Bir iç dikdörtgeni veya kareyi tanımlayabilir ve dışarıdaki her şey kesilerek çıkarılır. Doğrudan tarayıcıda bir görüntüyü veya öğeyi etkili bir şekilde kırpmasını sağlar. Dikdörtgenin kenarlarını bir border-radius değeri vererek ve round anahtar kelimesini kod bloğunuza ekleyerek de yuvarlatabilirsiniz.

img{
 clip-path: inset(45% 0% 33% 10% round 10px);
}

Örnek canlı kod

Without clipping

clip-path örneği

With clipping

clip-path örneğiclip-path örneğiclip-path örneğiclip-path örneğiclip-path örneği

https://codepen.io/wolkanca/pen/MWeMJyP

Hatta clip-path ile bir CSS animasyon bile yapılabiliyor, çok hoş:

Canlandırın!Klip yolunu canlandırma

CSS’i aşağıdaki gibi:

.trigger-btn:hover + img{
  animation: magic 4s infinite;
}

@keyframes magic{
  0%{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 }
  20%{
    -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
 }
  40%{
    -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
 }
  60%{
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
 }
  80%{
    -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
 }
  100%{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
 }
}

Daha fazla şekil ve örnekler için: https://bennettfeely.com/clippy/ ve https://www.geeksforgeeks.org/css-clip-path-property/ sayfalarına bakabilirsiniz.