css clip-path özelliği, position:absolute değerine sahip html elemanının gelişmiş kırpma özelliklerini belirlemek için kullanılır. css clip özelliğine göre daha gelişmiş bir özelliktir.
Aldığı değerler:
auto : Otomatik değer. Varsayılan değerdir. Kırpma olmaz.
initial : Varsayılan değerdir.
shape : Kırpma yapmak için kullanılır. Alacağı inset(), circle(daire), ellipse(elips) ve polygan(poligon) özelliği ile farklı kırpmalar yapılabiliriz ve farklı şekilller oluşturulabiliriz.
css clip-path inset() kullanımı
inset() kullanım şekli :
clip-path:inset(top right bottom left);
clip-path : inset() özelliği clip :rect() özelliğine benzerliği olsa da bottom ve right değerlerinde farklılık vardır. clip-path:inset() özelliğinde top değeri üstten başlanğıç değeri, right değeri sağdan başlanğıç değeri, bottom değeri alttan başlangıç değeri ve left de soldan başlangıç değerini belirlemek için kullanılır. Aşağıdaki örnekte görüldüğü gibi yaparız.
Örnek : auto ve inset örneği…
<!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-path: auto; }
.two img { clip-path: inset(0 60px 40px 0); }
.three img { clip-path: inset(30px 60px 40px 60px); }
.four img { clip-path: inset(30px 0 0 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-path circle() kullanımı
circle() kullanım şekli :
clip-path:circle(yarıçap at yatay-pozisyon dikey-pozisyon);
clip-path: circle(50% at 100% 50%);
clip-path: circle(30px at 50px 30px);
İlk parametremiz ile yarı çapın uzunluğunu, ikinci parametre ile merkezin yataydaki pozisyonunu ve üçüncü parametre ile de merkezin dikeydeki pozisyonunu belirlemek için kullanırız.
Örnek : circle() örneği…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
margin-bottom: 5px;
position: relative;
}
div img{
width: 100%;
height: auto;
position: absolute;
}
.one img { clip-path: auto; }
.two img { clip-path: circle(50% at 50% 50%); }
.three img { clip-path: circle(50% at 50% 100%); }
.four img { clip-path: circle(50% at 100% 50%); }
.five img { clip-path: circle(30px at 50px 50px); }
</style>
</head>
<body>
<div class="one">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="two">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="three">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="four">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="five">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
</body>
</html>Html çıktısı:
clip-path ellipse() kullanımı
ellipse() kullanım şekli :
clip-path:ellipse(yatay-yarıçap dikey-yarıçap at yatay-pozisyon dikey-pozisyon);
clip-path: circle(50% 100% at 100% 50%);
clip-path: circle(30px 60px at 50px 50px);
İlk parametremiz yatay yarı çapın uzunluğunu, ikinci parametremiz dikey yarıçapın uzunluğu, üçünçü parametre merkezin yataydaki pozisyonunu ve dördüncü parametre ise merkezin dikeydeki pozisyonunu belirlemek için kullanırız. Aşağıdaki örnekte görüldüğü gibi yaparız.
Örnek : ellipse() örneği…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
margin-bottom: 5px;
position: relative;
}
div img{
width: 100%;
height: auto;
position: absolute;
}
.one img { clip-path: auto; }
.two img { clip-path: ellipse(50% 25% at 50% 50%); }
.three img { clip-path: ellipse(25% 50% at 50% 50%); }
.four img { clip-path: ellipse(50px 35px at 50% 50%); }
.five img { clip-path: ellipse(40px 50px at 50px 50px); }
</style>
</head>
<body>
<div class="one">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="two">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="three">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="four">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="five">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
</body>
</html>Html çıktısı:
clip-path polygon() kullanımı
polygon() kullanım şekli :
clip-path:polygon(path1(yatay-pozisyon dikey-pozisyon),path2(yatay-pozisyon dikey-pozisyon), …);
clip-path:polygon(50% 0, 0 100%, 100% 100% );
polygon() kullanımında her path için hem yatay hem de dikey değerleri veririz. En az üç path belirleriz. Üç path ten daha az olursa şekil oluşmayacağı için kırpma yapmaz. path sayısında sınır yoktur istediğiniz kadar belirleyip istediğiniz şekli oluşturabilirsiniz.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
margin-bottom: 5px;
position: relative;
}
div img{
width: 100%;
height: auto;
position: absolute;
}
.one img { clip-path: auto; }
.two img { clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.three img { clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%); }
.four img { clip-path: polygon(0 0, 50% 0, 100% 100%, 50% 100%); }
.five img { clip-path: polygon(33px 0, 66px 0, 100px 33px, 100px 66px,
66px 100px, 33px 100px, 0 66px, 0 33px); }
</style>
</head>
<body>
<div class="one">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="two">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="three">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="four">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
<div class="five">
<img src="./images/css-clip-path.jpg" alt="css filter" srcset="">
</div>
</body>
</html>
Başka bir yazımızda görüşmek üzere…
