css clip nedir? Nasıl Kullanılır?

css clip özelliği, position absolute değerine sahip html elemanına uygulanacak kırpma işleminin özelliklerini belirlemek için kullanılır.

Aldığı değerler:
auto : Otomatik değer. Herhangi bir kırpma yapmayız.
shape : Kırpma işlemi için. Kırpma işlemini rect fonksiyonu ile yaparız.
initial : Varsayılan değere döner.

Kullanımı şekli :
clip : rect(top right bottom left);
clip : rect(20px 100px 100px 20px);

css clip özelliği ile Html elementinin boyutları kırpılırken top değeri üstten başlangıç, bottom da üstten nereye kadar alınacağı değer, right değeri soldan başlayıp sağda nereye kadar alınacağı değer ve left ise soldan nereden başlayacağı değer şeklindedir. Örneğin top değeri 20px ise üstten ilk 20px den sonrası gösteririz. bottom değeri 100px verildiğinde üstten 100px e kadar olan kısmı alırız. left değeri 20px olduğunda soldan 20px den sonrası alınır. right değeri 100px oldugunda soldan 100px kadar olan kısım alınır ve devamında kalan kısımlar alınmaz..

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            width: 180px;
            height: 120px;
            margin-bottom: 20px; 
            position: relative;       
        }
        div img{
            width: 100%;
            height: auto;      
            position: absolute;
        }
        .one img   { clip: auto; }
        .two img   { clip: rect(0 120px 80px 0); }
        .three img { clip: rect(30px 120px 90px 60px); }
        .four img  { clip: rect(20px 180px 120px 60px); }  
    </style>
</head>
<body>
    <div class="one">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="two">
       <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="three">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>
    <div class="four">
        <img src="./images/css-filter.jpg" alt="css filter" srcset="">
    </div>    
</body>
</html>

Html çıktısı:

css clip kullanımı

Başka bir yazımızda görüşmek üzere…

Leave a Reply