CSS3 Properti Resize

    Sedikit Banyak saya ingin membahas dasar-dasar css. tag-tag dan masing-masing kegunaannya...
yap..... semoga saya punya banyak waktu untuk berbagi ilmu dengan anda he he :).

kali ini saya akan membahas properti resize dalam css. Untuk contoh lihat Potongan kode di bawah:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

kode di atas akan tampil seperti berikut:

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

Anda Sudah lihat hasilnya kan.....
Dalam sebuah website, css berperan untuk menentukan tampilan. Seperti Contoh di atas elemen <div> dengan class id kotak di atur oleh kode css div.kotak. dimana:
lebarnya/width 100px
tingginya/height 100px
memiliki garis tepi/border 1px
dengan jenis garis padat/solid
dan berwarna merah/red

Karena ukuran kotak hanya (100px X 100px) sedangkan elemen di dalamnya membutuhkan tempat yang lebih luas, maka Elemen di dalamnya di tampilkan melewati kotak 100px X 100px tadi. untuk mengatasi masalah tersebut kita tambahkan Properti overflow. jadi kodenya seperti berikut:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
</style>
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

Tampilannya seperti berikut:

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

Properti overflow berfungsi untuk menangani elemen yang melebihi batas yang sudah di tentukan.
adapun hidden bisa kita sebut nilai properti overflow. hidden berarti sembunyikan. Karena itulah elemen yang melebihi batas 100px X 100px di sembunyikan. namun nilai properti overflow bukan hidden saja.
Berikut nilai-nilai Properti lain berikut Fungsi masing-masing:

1. visible (terlihat) : Elemen yang melebihi garis akan di tampilkan. jadi terlihat seperti conto pertama. 
2. hidden (sembunyikan) : Elemen yang melebihi batas akan di Sembunyikan. 
3. scroll (gulir) : Elemen yang melebihi batas akan di sembunyikan namun bisa di gulir untuk melihatnya. 
4. auto (otomatis) : Elemen yang melebihi batas akan di sembunyikan dan bisa di gulir namun jika tidak melebihi batas, efek scroll secara otomatis tidak di tampilkan.

Berikut Contoh Masing-masing:
 overflow: visible;

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

overflow: hidden;

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

overflow: scroll;
Jika elemen melebihi batas

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

jika elemen tidak melebihi batas

Elemen

overflow: auto;
jika elemen melebihi batas

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

jika elemen tidak melebihi batas

Elemen

Sekarang kita lanjut ke pembahasan properti resize.properti resize memungkinkan kita untuk merubah ukuran blok yang sudah di tentukan ke ukuran yang kita suka hanya dengan mengklik tepi untuk merubah ukuran dan menggesernya menjadi ukuran yang kita suka. untuk contoh lihat kode berikut:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: scroll;
resize: both;
}
</style>
<br />
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

Akan Terlihat seperti berikut:

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

Anda bisa merubah ukuran kotak 100px X 100px di atas dengan mengklik pada pojok kanan bawah kotak, tahan dan geser. itu karena kita menggunakan properti resize. adapun both adalah nilai properti. properti resize juga memiliki beberapa nilai properti. Inilah nilai-nilai properti resize berikut fungsi masing-masing:

1. both (keduanya) : Memungkinkan anda merubah ukuran kotak secara horisontal dan vertikal. 
2. horizontal (horisontal) : Memungkinkan anda merubah ukuran kotak secara horisontal saja. 
3. vertical (vertikal) : Memungkinkan anda merubah ukuran kotak secara vertikal saja.

untuk Contoh masing-masing silahkan anda buat sendiri......
saya sudah capek mengetik hehe :)
kalau ada pertanyaan bisa anda tinggalkan komentar di bawah....
dan kalau anda ingin copas silahkan. karena saya sendiri juga suka copas artikel orang...
tapi ini murni tulisan saya.

semoga bermanfaat
Sumber :

---

DAFTAR ISI