Css Ders-29 Obje Kırpma - Clip
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Css Ders-29 Obje Kırpma - Clip

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2133)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/fg1fd54g4fsa1.png

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.




uzman13
uzman13 3 Yıl Önce Cevaplandı
güzel paylaşım



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol