Menunggu...

Fungsi CSS Overflow

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..
Advertise Here
By adjieumbara.blogspot.com
300x250

Klik disini untuk berkomentar 37 komentar:

avatar

Wah ternyata untuk membuat scroll pada widget ataupun teks bisa menggunakan css overflow ya mas. Baru tahu saya. Jadi tambah ilmu nich tentang css, soalnya nggak paham babarblas soal css saya mas hehe :D

avatar

Ternyata banyak sekali ya macamnya CSS Overflow mas Adjie,,, Tetapi saya tetap gak ngerti karena saya belum waktunya mempelajari CSS, hehehe :d
Jadi menyimak aja sambil belajar,,, makasih nice sharingnya x-)

avatar

Saya kira saya dpt pertamax, ternyata sdh keduluan sama mbak Eka, akhirnya saya ikutan komen disini agar kecipratan pertamaxnya mbak Eka 2 liter, hhihi :d

avatar

Moso? :d Sebenarnya banyak banget pemahaman css yang bisa kita manfaatkan sist untuk segala keperluan hanya saja baru sedikit yang saya fahami.. :)

avatar

@Saudari Indri saya ikutan kedahuluan sama mba untuk menjawab komentar sist Wahyu Eka.. heheee

avatar

Benar sekali mba, belajarnya pelan-pelan saja nanti juga akan mengerti dengan sendirinya.. cheer

avatar

Jadi lebih tau saya gan :)

avatar

Sip... menambah wawasan sob :d

avatar

terimakasih atas tutornya mas.. memang menggunakan overflow tampilan blog akan lebih rapi dan dapat menghemat ruang pada blog kita ya mas....

avatar

Kode css nya bisa dipake juga buat naruh link yg terlalu panjang ke bawah ya..

Komentar ini telah dihapus oleh administrator blog.
avatar

terimakasih atas sharingnya. fungsi scrol sangat bermanfaat demi menghemat tempat sehingga template akan tampak lebih rapi.

avatar

Menyimak dengan tenang sobb.,
hehehe ^,^ :d

avatar

biasanya saya hidden aja ooverflow nya, saya tak begitu suka kalo ada widget ada skrolnya, terlihat kurang rapi :D

avatar

@Indri Lidiawati ~ Gak apa-apa mbak gak dapet pertamax kan masih dapet yang premium hehehe :D

avatar

Wah kalo masalah yang beginian saya belum paham mas, kayaknya harus rajin berkunjung disini nie biar bisa dapet pembelajaran baru tentanng css. Oke deh mas saya mo baca-baca dulu nie, thanks udah berbagi :)

avatar

posisi saya hanya pengguna alias saya hanya tau jadinya saja, kalau untuk porsesnya saya kurang mengikuti. jadi saya hanya bisa menyimak saja

avatar

Benar sekali sahabat Nady dengan menggunakan overflow tampilan blog kita akan terlihat lebih rapi dari sebelumnya.. :)

avatar

Bisa sob silahkan atur sesuai kebutuhan...

avatar

Benar sekali sob kita bisa memanfaatkan fungsi overflow untuk penampilan blog yang lebih rapi.. cheer

avatar

Silahkan, semoga penjelasan dengan bahasa yang sederhana ini mudah difahami..

avatar

Begitu ya sob.. tentunya kembali keselera masing2 benar gak?? cheer

avatar

Ok sahabat Marnes silahkan telusuri blog ini semoga apa yang sobat cari bisa sobat temukan di blog ini.. :d

avatar

Siip.. semoga artikel ini bermanfaat...

avatar

Maaf komentar Anda saya hapus karena komentar yang Anda tulis hanya menampilkan link yang tidak relevan dengan artikel ini, silahkan Anda berkomentar kembali dengan komentar yang lebih relevan sesuai artikel.. gunakan openID untuk memudahkan blogwalking.. Harap maklum Terimaksih.. :)

avatar

Ntar tumpah lho mas kalau mo' so' hehehe :D
Iya nich saya belum paham soal CSS. Kebanyakan script yang saya share di blog, itu adalah hasil copas dari script blog lain, soalnya belum bisa membuat script sendiri mas hehe :D

avatar

Iya banyak banget ilmu tentang perbloggeran di blog ini. Mulai dari CSS sampai dengan HTML5. Jadi harus siap-siap obat sakit kepala ya mas marness biar nggak pusing hehehe :D

avatar

kunjungan kembali nih mas.. wah masih belum update lagi ya mas.. kalau gitu saya followblognya saja deh.. hehehehe

avatar

Dapat cara dan ilmu baru nih....
Boleh di coba ya mas :)

avatar

Silahkan sahabat budi

avatar

Artikel menarik perlu di coba nih Mas Adjie, ijin nyimak
Buat terap kan di blog saya, bilamana di blog saya membutuhkanya
Terima kasih sudah berbagi pengetahuan blogging

avatar

Ok sahabat Karrysta semoga artikel2 dari blogger pemula ini bermanfaat buat sahabat semua.. Thanks

avatar

Sangat membantu kak, kebetulan saya juga lagi belajar tentang css dan saya pun sedikit bingung dan punya rasa ingin tau apa itu Overflow.. Makasih banget admin..

avatar

Thanks mas infonya sangat membantu. tapi saya masih bingung nich soalnya di tutorialnya teks yang dimasukkan berupa kalimat saja. Kalo untuk menampilkan script, misalnya script untuk postingan produk toko online kenapa yang muncul malah gambar produk sama deskripsinya ya? Bukan script untuk posting produknya. Mohon petunjuknya. Makasih

Berkomentarlah dengan bijak karena setiap perkataan yang kita ucapkan merupakan cermin pribadi seperti apa diri kita..

Terima kasih atas komentar Anda