Blogger CSS3

Pada kesempatan kali ini Saya ingin membahas tentang Perbedaan display:none dan visibility:hidden. Terkadang ada beberapa hal objek yang ingin kita sembunyikan atau ada tapi tidak terlihat oleh pengguna pada suatu tampilan website.

Kita juga sering memerlukan suatu elemen show/hide untuk interaksi-interaksi tertentu karena tidak memungkinkan untuk menampilkan semua informasi secara bersamaan dalam suatu tampilan. Oleh karena itu kita memerlukan properti dalam CSS yang dapat digunakan untuk menyembunyikan suatu objek dari tampilan.

Ada dua properti CSS yang dapat diterapkan, yaitu display:none; atau visibility: hidden; Untuk menyembunyikan objek dengan CSS, ada beberapa alternatif kode yang digunakan, diantaranya display:none dan visibility:hidden. Bahkan ada juga alternatif lainnya, yaitu membuat objek transparan dengan menambahkan kode opacity:0.

Display none dan visibility hidden

Display mempunyai 2 property yaitu :

  1. none (tidak terlihat)
  2. block (terlihat)

Begitupun visibility mempunyai 2 property yaitu :

  1. hidden (tidak terlihat)
  2. visible (terlihat)

Inti perintah display:none dan visibility:hidden sebenarnya sama saja yaitu menghilangkan objek dari halaman HTML. Perbedaannya sebenarnya tidak teralu mencolok, hanya pada masalah space saja.

Dengan menggunakan display:none maka space akan hilang, sedangkan dengan visibility:hidden space tetap ada. nah disitulah perbedaannya antara display:none dan visibility:hidden.

Dan jika Anda ingin menghilangkan space yang masih terlihat, Anda bisa tambahkan height:0; jadi visibility:hidden;height:0; maka space tidak terlihat seperti mengunakan display:none

Diposkan oleh: Warim Pada:

Berlangganan Lewat Email

Kirim alamat email Anda untuk mendapatkan notifikasi artikel terbaru dari blog Website Mini secara GRATIS langsung di kotak masuk Anda.