css resize özelliği, Html elemanlarının yeniden boyutlandırma yapıp yapmayacağımızı belirlemek için kullanırız. Bu özellliği kullanabilmek için bazı elementlerde taşma(overflow) özelliğine otomatik değeri vermeliyiz. input, textarea elementlerinde taşma özelliğine değer vermemize gerek yoktur.
Aldığı değerler :
none : Değer yok.
both : Hem yatay hemde dikey.
horizontal : Yatay boyutlandırma.
vertical : Dikey boyutlandırma.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 200px;
margin-bottom: 20px;
border: 1px solid black;
overflow: auto;
}
.one { resize: none; }
.two { resize: both;}
.three { resize: horizontal; }
.four { resize: vertical; }
.area-one{ resize: none;}
.area-two{ resize: vertical;}
</style>
</head>
<body>
<div class="one">
Content One
</div>
<div class="two">
Content Two
</div>
<div class="three">
Content Three
</div>
<div class="four">
Content Four
</div>
<textarea class="area-one" name="" id="" cols="30" rows="5"></textarea>
<br>
<textarea class="area-two" name="" id="" cols="30" rows="5"></textarea>
</body>
</html>Html çıktısı:
Yukarıdaki örnekte görüldüğü gibi div elementi normalde boyutu değiştirilemezken resize özelliği ile boyutunu değiştirdik. Bu özelliği diğer elementler için de kullanabiliriz. textarea elemanı ise normalde boyutu hem yatay hem de dikey de değiştirilebilirken none ile değiştirilemez yaparız. vertical ve horizontal ile sadece yatay veya dikey ile boyutlandırılması sınırlandırabiliriz.
Başka bir yazımızda görüşmek dileğiyle…
