CSS clip (kırpma) Özelliği Nedir ve Nasıl Kullanılır?
CSS clip (kırpma) özelliği HTML içindeki etiketin istenilen yerden istenilen kadar kırpılmasını sağlar ve web sayfası üzerinde kırpılmamış alanı gösterir. Özellikle resimlerde kırpma yapmak maksadıyla sıkça kullanılır.
Yapısı: clip: rect(<üst>,<sag>,<alt>,<sol>)
Aldığı Değerler: rect(top, right, bottom, left) | auto | inherit
Başlangıç Değeri: auto
Uygulanabilen elemanlar: Mutlak konumlandırma uygulanmış elemanlar (CSS2’den itibaren Blok seviyesinden elemanlar ve yerleştirilen elemanlara)
Kalıtsallık: Yok
Başlangıç değerinin auto atanmış olması herhangi bir kırpmanın olmayacağını gösterir. Resim düzenleme araçlarında yaptığımız kırpma işini CSS yardımıyla yapmamızı sağlayan bu özelliği Javascript ile birlikte kullanarak çok güzel uygulamalar yapabiliriz. clip’e atanan değerler em cinsinden verilerek esnek sonuçlar elde edilebilir. Ayrıca negatif değerlerde alabilir. Negatif değer atandığında eleman kutusunun dışın doğru kırpma yapacaktır. Şimdi bunu bir örnek ile gösterelim.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> clip Özelliği </title>
<style>
img
{
position: absolute;
clip: rect(50px 130px 153px 40px);
}
</style>
</head>
<body>
<img src=”ornek1.jpg” alt="deneme1" /><br />
<div class="kirpma">
<img src=”ornek2.jpg” alt="deneme2" />
</div>
</body>
</html>
CSS clip (kırpma) özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
