Mengatur Visibility Di CSS

Penggunaan visibility di css berfungsi untuk menyembunyikan sebuah elemen atau menampilkan elemen, dalam tutorial ini kita akan membahas bagaimana cara mengatur visibility di css. Visibility atau jarak pengelihatan dapat digunakan untuk menyembunyikan sebuah elemen tanpa menghilangkan ekstensi elemen tersebut, sehingga ruang akan tetap ada pada elemen yang disembunyikan dengan menggunakan visibility.

Cara Mengatur Visibility Di CSS

Kita akan membuat sebuah contoh halaman dengan beberapa elemen dimana salah satu elemen tersebut menggunakan properti visibilty dan lainnya tidak menggunakan visibility, namun sebelumnya penulis tunjukan nilai-nilai yang bisa digunakan oleh properti visibility di css ini.

  • visible yaitu nilai ini digunakan untuk menampilkan elemen
  • hidden digunakan untuk menyembunyikan elemen

Silahkan siapkan keperluan-keperluan koding anda, dan buatlah sebuah halaman html dengan mengikuti struktur html tersebut seperti kode dibawah ini.

<style type="text/css">
    .visibility1 {
        border: 1px solid #000;
        visibility: visible;
    }
    .visibility2 {
        border: 1px solid #000;
        visibility: visible;
    }
</style>

<div class="visibility1">Ini adalah elemen visibility 1</div>
<div class="visibility2">Ini adalah elemen visibility 2</div>

Tampilan dari kode diatas…

mengatur visibilty di css

Terlihat bahwa ada dua elemen dengan menggunakan nilai visibilty sama yaitu visible, maka elemen tersebut akan tampil di browser, mari kita ubah salah satu elemen yaitu elemen pertama diganti nilai visible dengan hidden.

<style type="text/css">
    .visibility1 {
        border: 1px solid #000;
        visibility: hidden;
    }
    .visibility2 {
        border: 1px solid #000;
        visibility: visible;
    }
</style>

Berikut ini tampilan visibility setelah disebunyikan…

mengatur visibility di css

 

Terlihat bahwa ruang elemen pada visibility pertama tidak berubah, itulah fungsi dari visibility, yaitu menyembunyikan sebuah elemen tanpa menghilangkan ekstensi elemen atau ruang elemen itu sendiri, sehingga elemen tersebut masih akan tetap ada meski telah disembunyikan.

4 Comments
  • arhieaf van grosh
    arhieaf van grosh

    Bedanya visibility CSS sama form HTML apa yah?? Hasilnya sama kok.

    • fungsi visibility pada css berguna untuk menyembunyikan dan menampilkan elemen pada html sedangkan form berguna untuk menangani input proses. keduanya berbeda namun dengan visibility css sebuah elemen form bisa disembunyikan atau ditampilkan.

  • Wuklin Moose
    Wuklin Moose

    kalau beda display none sama visibillity hidden apa ya

    • kesamaannya sama-sama untuk menyembunyikan atau tidak menampilkan elemen, bedanya display none termasuk space juga disembunyikan, sedangkan visibility hidden akan tetap mempertahankan space atau lebar element tetap ada.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.