Css derslerimize deavm ediyoruz bu derste sayfada bulunan resim metin gibi objeleri nasıl kırpabileceğimizi anlatacağım.Bunun için kullanacağımız komut
clip .Clip diktörtgen şeklinde kırpma yapıyor.
İndir : http://ustaderslik.com/dosya/clip.zip
clip:rect(y1,y2,x2,x1);
y1 : Yukarıdan aşağı kırmanın başlayacağı nokta
y2 : y1 den sonra ne kadarlık kısmın alınacağı.
x1 : Sağdan sola kırmanın başlayacağı nokta.
x2 : Ne kadarlık kısmın alınacağı.
Parametreleri tek tek denediğinizde daha iyi anlarsınız.
Unutmamamız gereken nokta ise clip kullanacağımız objelerde position:absolute; vermemiz şart.Şimdi bir örnek yapalım.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
#r1{width:250px;height:250px;position:absolute;left:10px;top:25px;clip:rect(0px,250px,250px,0px);}
#r2{width:250px;height:250px;position:absolute;left:260px;top:25px;clip:rect(0px,250px,250px,100px);}
#r3{width:250px;height:250px;position:absolute;left:520px;top:25px;clip:rect(150px,250px,250px,0px);}
#r4{width:250px;height:250px;position:absolute;left:780px;top:25px;clip:rect(100px,200px,200px,100px);}
</style>
</head>
<body>
<img id="r1" src="resim.jpg" />
<img id="r2" src="resim.jpg" />
<img id="r3" src="resim.jpg" />
<img id="r4" src="resim.jpg" />
</body>
</html>
Görüntüsü :
Yukarıda 4 resim koyduk.İlkinde hiç kırpma yapmadık.İkincisinde yatay kırpma yaptık.Üçüncüsünde dikey kırpma sonuncuda ise hem dikey hemde yatay kırpma yaptık.
UstaDerslik
