Hallo kawan-kawan, kali ini saya akan berbagi pengetahuan tentang Contoh Code Cara Mengatur Visibility Di CSS
 
Sebelum membahas judul di atas , ini ada Sedikit kutipan atau Motivasi Buat kawan kawan semua..
"Pendidikan adalah senjata paling mematikan di dunia, karena itu, Anda mampu mengubah dunia"..
...
Ok Langsung saja kita bahas tentang : Cara 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.
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 : Fungsinya untuk menampilkan elemen yang dapat dilihat oleh pengguna.
Hidden : Fungsinya untuk menyembunyikan suatu elemen dari pengguna.
Collapse : Fugsinya untuk membuat kolom table menjadi dinamis dan effect baris.
 
1.visibility : hidden
Adalah cara untuk membuat sebuah elemen tersembunyi pada halaman html. Dengan cara ini elemen tetap berada pada suatu ruang pada halaman namun tidak ditampilkan.
 
2. display : none
Artinya kita membuat sebuah elemen tidak ditampilkan dan tidak memakan ruang pada halaman. Dengan cara ini kita membuat sebuah object seolah tidak ada pada halaman.
 
3. display : inline
Adalah cara untuk membuat sebuah elemen ditampilkan pada bagian tertentu dalam satu baris. Inline artinya sebuah elemen hanya mengambil sebagian kecil dari lebar area yang tersedia. Sebagai contoh sebuah ul atau ol jika dikenakan CSS display inline maka akan ditampilkan dalam satu baris saja.
 
4. display : block
Adalah cara untuk membuat sebuah elemen ditampilkan dalam satu blok baris penuh dengan mengambil keseluruhan lebar yang tersedia.
 
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>
 
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>
 
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.
 
selamat mencoba 
" Demikianlah Artikel yang kami buat semoga bermanfaat bagi orang yang membacanya dan menambah wawasan bagi orang yang membaca artikel ini. Dan penulis mohon maaf apabila ada kesalahan dalam penulisan kata dan kalimat yang tidak jelas, mengerti, dan lugas mohon jangan dimasukan ke dalam hati.
Dan kami juga sangat mengharapkan yang membaca artikel ini akan bertambah motivasinya dan mengapai cita-cita yang di inginkan, karena saya membuat artikel ini mempunyai arti penting yang sangat mendalam.
Sekian penutup dari kami semoga berkenan di hati dan kami ucapkan terima kasih "
#SalamTechno
 
Sumber: suckittrees.com