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>Code language: HTML, XML (xml)

Tampilan dari kode diatas…

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: <span style="color: #ff0000;">hidden</span>;
    }
    .visibility2 {
        border: 1px solid #000;
        visibility: visible;
    }
</style>Code language: HTML, XML (xml)

Berikut ini tampilan visibility setelah disebunyikan…

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.