Görünüm :
CSS
.icerik{
background-color:#fff;
box-shadow: rgb(136, 136, 136) 5px 5px 5px;
border-radius: 3px;
resize: both;
overflow: auto; /* Kaldırmayın Bu Tanım Olmak Zorundadır. */
border: 1px solid #adadad;
padding:10px;
width: 500px;
height: 150px;}
Herhangi bir metin editörü ile index.html dosyası oluşturun ve “” tagları arasına yukarıdaki css kodunu ekleyin ve “”den sonra aşşağıdaki html kodunu ekleyin daha sonra index.html dosyanızın önizlemesine göz atın.
Resize özelliği kullanıcıların kullandıkları elementlerin boyutlarını belirlediğiniz sınırlar içerisinde değiştirme imkanı verir.Genel kullanım alanı yorum,mesaj kutularının yetmediği zamanlarda genişletmek amaçlıdır.Kendi Güncel Blog’umda yorum yazma bölümünde yorum kutucuğunda kullandığım bir özelliktir.Sağa ve sola doğru genişletmelerde görünüm bozukluğu yarattığı için sadece aşşağı doğru ve en fazla “350px” genişletme sınırı koydum.Şimdi sizlere bunu css kullanarak nasıl yapabileceğinizi anlatacağım.
Bu yaptığımız örnekte herhangi bir sınır belirlemeden kutumuzu sağa,sola,yukarı,aşşağı kordinatları doğrultusunda hareket ettirebildik.Şimdi ise bizim belirlediğimiz min. ve max. kordinatlar doğrultusunda hareket ettirelim.
Görünüm :
CSS
.icerik{
background-color:#fff;
box-shadow: rgb(136, 136, 136) 5px 5px 5px;
border-radius: 3px;
resize: both;
overflow: auto; /* Kaldırmayın Bu Tanım Olmak Zorundadır. */
border: 1px solid #adadad;
padding:10px;
width: 500px;
height: 150px;
max-height:350px;
max-width:750px;}
Bu uygulamamızda belirlediğimiz min. ve max. kordinatlar ile kullanıcının genişletme sınırlarını belirledik.Max. 750px genişleyeceksin ve max. 350px yükseleceksin dedik ve emirlerimize uydu :)
Genel olarak mantığın anlaşılabileceğine inanıyorum.Buradan Demo‘ya bakabilir daha iyi fikir sahibi olabilirsiniz.Takıldığınız veya yapamadınız birşey olursa yardımcı olurum.
Kaynak