Cara membuat Resize dengan menggunakan CSS3

Pernahkah sobat melihat sebuah halaman yang memiliki sebuah textarea atau text box yang bisa di resize atau di ubah-ubah ukurannya ? Contohnya seperti pada blogger. PAda blogger kolom editor untuk mengedit kode HTML menggunakan sebuah text box yang bisa kita ubah ukurannya dengan menarik salah satu sisinya. Maka dengan seketika text box itu akan berubah ukurannya sesuai dengan yang kita inginkan. Lalu bagaimanakah hal itu bisa di terjadi ? Bagaimana kita bisa membuatnya ?

Jika hal itu yang sedang sobat pertanyakan, maka ini adalah salah satu kabar gembira karena kita akan membahasnya sekarang. Sebenarnya untuk membuat itu cukup sederhana saja. Kita bisa membuatnya dengan menggunakan CSS yang diperkenalkan di CSS3. properti yang digunakan yaitu resize dan overflow. Itu saja yang kita gunakan untuk bisa membuat sebuah objek bisa di resize.

Untuk lebih jelasnya marilah kita praktikkan secara langsung. Silahkan tuliskan kode berikut : Ini hanyalah penggalan dari kode sesungguhnya. Di ambil bagian pentingnya saja.

<style>

.box{

      overflow : auto;

      resize : both;

      width : 150px;

      height : 50px;

      border : 1px solid #cccccc;

      margin : auto;

}

</style>




<div class="box">

  Salah satu contoh bagaimana membuat sebuah objek bisa di resize dengan seketika menggunakan CSS3. Verry Nice... :)

</div>

Coba lihat hasilnya :

Salah satu contoh bagaimana membuat sebuah objek bisa di resize dengan seketika menggunakan CSS3. Verry Nice... :)

Sedikit CAtatan :
Mozilla tidak men-support teknik ini. Coba buka dan lihat hasilnya menggunakan Opera...


Sebagai tambahan, sobat juga bisa mengatur maksimal lebarnya dengan menggunakan max-width : nilai/value; untuk maksimal tingginya bisa menggunakan max-height : nilai / value;

Cukup sekian dan selamat mencoba...