UFUK   UÇAR

Merhaba,

Web ile uğraşıyorsanız siz de fark etmişsinizdir. Bazı internet sitelerinde resimler orijinal boyutlarında olmasına rağmen çok değişik şekillerde kullanıcılara gösteriliyor.

Merak ettim bu nasıl  olabilir diye ve karşıma css'de clip-path özelliği  çıktı.

Kullanımı gayet kolay. Tabi biraz da hayal gücü gerekli.

Kullanımları şu şekilde:

• clip-path: circle ()
• clip-path: ellipse ()
• clip-path: inset ()
• clip-path: polygon ()

Şimdi bunları teker teker inceleyelim. Elimizde şöyle bir görselimiz olsun.
 

clip-path: circle() :

Görsel üzerinde dairesel bir kırpma gerçekleştirir. Kodu aşağıdaki gibidir.
 

clip-path: circle (20%);

-webkit-clip-path: circle (20%);

Görüntü şu şekilde olacaktır.
 

Eğer kırpılmasını istediğimiz koordinatları vermez isek resmin tam ortasından kırpar.

koordinat vermek ister isek şu şekilde yapabiliriz.  at ifadesinden sonraki ilk değer X eksenini, ikinci değer Y eksenini belirtir.
 

 clip-path: circle ( 30%  at  32% 50% );

-webkit-clip-path: circle ( 30%  at  32% 50% );

Görüntü şu şekilde olacaktır.
 

clip-path: ellipse() :

Var olan görsel üzerinde eliptik bir kırpma yapar. İki parametre alır. Birincisi yatay yariçap,  ikincisi dikey yarıçap.

 clip-path:  ellipse ( 30%    15% );

-webkit-clip-path:  ellipse( 30%    15% );

Görüntü şu şekilde olacaktır.
 

İsterseniz başlangıç koordinatlarını da verebiliyorsunuz.. İlk parametre X koordinatı, ikinci parametre Y koordinatı.

 clip-path:  ellipse  ( 30%   25%  at 40% 70% );

-webkit-clip-path:   ellipse  ( 30%   25%  at 40% 70% );

Görüntü şu şekilde olacaktır..
 

clip-path: inset ():

Bu fonksiyon kırpılan alanda bir dikdörtgen çizmeye yarar. Dört adet parametresi vardır. Sırasıyla üst, sağ, alt,sol. ( top, right, bottom, left ). Saat yönünü takip eder.

 clip-path:  isset ( 150px   80px   80px   150px );

-webkit-clip-path:   isset (  150px   80px   80px   150px );

Görüntü aşağıdaki gibi olacaktır.
 

İster isek son bir parametre olarak border-radius verebiliriz.
 

 clip-path:  isset ( 150px   80px   80px   150px  round  30px  );

-webkit-clip-path:   isset (  150px   80px   80px   150px  round 30px   );

Görüntü aşağıdaki gibi olacaktır.
 

clip-path: polygon ():

Verilen görsel üzerinde 3 kenardan oluşan bir şekil çizmemizi sağlar. Farklı bir değişle 3 farklı ekseni vardır. Bunlar X1 Y1, X2 Y2, X3 Y3 .

 clip-path:   polygon ( 65%   1%,  10% 80%  , 80% 95%  )

-webkit-clip-path:   polygon  (  65%   1%,  10% 80%  , 80% 95%   );

Görüntü aşağıdaki gibi olacaktır.

Evet, şimdilik hepsi bu kadar..