CARA MENGETAHUI FUNGSI OVERFLOW HIDDEN

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 :

overflow:auto
overflow:scroll
overflow:hidden
overflow:display

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

Fungsi dari pada overflow adalh bisa multi fungsi ,seperti yang anda lihat pada pada contoh gambar ini ,saya mencoba menulis terus tanpa putus ,maka tulisan tidak akan sampai keluar dari batas garis kanan,kita butuh perhatikan tingginya saja dan coba perhatikan garis pinggir akan otomatis berubah saat kita ganti overflow : auto dirubah overflow : scroll maka yang tadinya cuma garis sekarang jadi scroll

<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:scroll

2-overflow:auto

3-overflow:display

4-overflow:hidden

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..

CARA MENGETAHUI FUNGSI OVERFLOW HIDDEN

4/ 5

Oleh hudacell

11:41 PM Komentar

ads

Sunday, March 26, 2017