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…

Baca juga:  Mengatur Outline Dengan CSS

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.

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