Fungsi CSS Overflow

Kali ini blogger pemula akan akan membahas tentang fungsi CSS overflow dimana pada kebutuhan tertentu sangat diperlukan dalam dunia blogging. Apa sih fungsi utama dari CSS overflow ? yuk kita pelajari bersama..

Secara sederhana fungsi dari CSS overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Dimana fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Pada objek tertentu, baik posting maupun widget, terkadang ada bagian yang melewati tempat yang sudah kita tentukan, biasanya kebagian pinggir atau ke bawah. Nah supaya objek tersebut muncul sesuai dengan yang kita kehendaki, maka digunakanlah syntax overerflow sebagai solusinya. Mudah-mudahan sobat mengerti apa yang saya maksud pada penjelasan sederhana ini.

Pada penggunaan fungsi overflow biasanya ada 4 alternatif yang bisa kita gunakan :

1. overflow:auto
2. overflow:scroll
3. overflow:hidden
4. overflow:display

Untuk penerapanya cukup sederhana, sebagai contoh kita akan membuat objek pada postingan atau widget. Contoh kode yang akan saya gunakan misalnya :

<div style="background-color:#FBFBFB; border:1px solid #D2D2D2; padding:10px; width:400px; height:100px; overflow:auto;"> letakkan teks atau gambar di sini</div>

Dimana keteranganya adalah sebagai berikut :

• background-color : warna latar belakang
• border : warna garis pinggir
• padding : jarak dari pinggir garis ke objek
• width : lebar
• height : tinggi
• overflow : silahkan pilih auto, scroll, hidden atau display sesuai kebutuhan.

Untuk lebih memahami fungsi dari CSS overflow sobat bisa memperhatikan beberapa hasil overflow yang sengaja saya buat untuk memudahkan sobat dalam penggunaan fungsi overflow.

Berikut contoh-contohnya :

1. Overflow:auto

Ini adalah hasil dari penggunaan fungsi overflow dengan tag auto dimana lebar telah ditentukan dengan width 400px dan tinggi 100px. berapun jumlah karakter atau luas gambar yang disisipkan tidak akan meleber rmelebihi ukuran yang sudah ditetapkan. Overflow pada pengaturan ini bekerja secara otomatis silahkan sobat dicoba jika tidak percaya.. Teks ini hanyalah sebuah contoh dan sobat bisa menggantimya sesuai kebutuhan

2. Overflow:scroll

Ini adalah hasil dari penggunaan fungsi overflow dengan tag scroll dimana lebar telah ditentukan dengan width 400px dan tinggi 100px. berapun jumlah karakter atau luas gambar yang disisipkan tidak akan meleber rmelebihi ukuran yang sudah ditetapkan. Overflow pada pengaturan ini bekerja secara scroll sehingga jika sobat menyisipkan gambar dengan lebar melibihi 400px gambar akan tetap terlihat 400px dimana sobat bisa menggeser kekiri atau kekanan untuk melihat gambar seutuhnya, silahkan sobat dicoba jika tidak percaya.. Teks ini hanyalah sebuah contoh dan sobat bisa menggantimya sesuai kebutuhan

3. Overflow:hidden 

Ini adalah hasil dari penggunaan fungsi overflow dengan tag hidden dimana lebar telah ditentukan dengan width 400px dan tinggi 100px. berapun jumlah karakter atau luas gambar yang disisipkan tidak akan meleber rmelebihi ukuran yang sudah ditetapkan. Overflow pada pengaturan ini bekerja sesuai pengaturan lebar dan tinggi sehingga teks akan terpotong jika melebihi ukuran yang sudah ditentukan.. Teks ini hanyalah sebuah contoh dan sobat bisa menggantimya sesuai kebutuhan

4. Overflow:display

Ini adalah hasil dari penggunaan fungsi overflow dengan tag display dimana lebar telah ditentukan dengan width 400px dan tinggi 100px. Overflow pada pengaturan ini bekerja sesuai dispaly yang sudah ditentukan sehingga teks yang panjang atau gambar yang melebihi ukuran akan menyeberang kearea lain.. silahkan sobat dicoba jika tidak percaya.. Teks ini hanyalah sebuah contoh dan sobat bisa menggantimya sesuai kebutuhan

Dengan melihat contoh-contoh dari hasil penggunaan fungsi overflow diatas tentunya sobat sudah mengerti bagaimana penggunaan yang baik dalam memanfaatkan fungsi CSS overflow dalam postingan atau widget, menurut sahabat blogger pemula mana sih yang paling baik dari 4 penggunaan fungsi CSS overflow diatas? silahkan sampaikan pada kolom komentar..