CSS - Visibilitas: Membuat Element Terlihat dan Hilang

Halo teman-teman pengembang web yang bersemangat! Hari ini, kita akan meluncur ke dalam dunia yang menarik dari visibilitas CSS. Sebagai guru komputer yang ramah di lingkungan Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Pada akhir tutorial ini, Anda akan dapat membuat element menghilang dan muncul seperti seorang ahli CSS sejati!

Apa Itu Visibilitas CSS?

Sebelum kita mulai mengayunkan tongkat CSS kita, mari pahami apa arti visibilitas. Dalam kata-kata paling sederhana, visibilitas CSS mengontrol apakah suatu element terlihat atau disembunyikan di halaman web. Itu seperti bermain hide and seek dengan element HTML Anda!

Nilai yang Mungkin

Bergambar nilai yang berbeda yang kita dapat gunakan dengan properti visibilitas:

Nilai	Deskripsi
visible	Element terlihat (ini adalah default)
hidden	Element disembunyikan, tapi masih mengambil ruang
collapse	Digunakan utama untuk element tabel, kita akan melihat ini!
inherit	Menyusul visibilitas dari element induk

Terapkan ke

Properti visibilitas dapat diterapkan ke semua element HTML. Ya, Anda mendengar benar - semua dari mereka! Dari div ke paragraf, gambar ke tabel, Anda katakan saja, visibilitas akan bekerja kesannya.

Sintaks DOM

Sekarang, mari lihat bagaimana kita dapat menggunakan visibilitas dalam CSS kita:

element {
visibility: value;
}

Simple, kan? Ganti 'element' dengan element HTML yang Anda ingin targetkan, dan 'value' dengan salah satu nilai visibilitas yang kita diskusikan sebelumnya.

CSS visibility - visible Value

Mari kita mulai dengan nilai default, 'visible'. Ini contohnya:

<div class="visible-box">Bisa Anda melihat saya?</div>

<style>
.visible-box {
width: 200px;
height: 100px;
background-color: lightblue;
visibility: visible;
}
</style>

Dalam contoh ini, kita membuat sebuah kotak biru muda dengan teks "Bisa Anda melihat saya?". Visibilitas diatur ke 'visible', yang berarti... Anda benar, kotak ini terlihat! Ini adalah perilaku default, jadi bahkan jika kita tidak menentukan visibilitas, hasilnya akan sama.

CSS visibility - hidden Value

Sekarang, mari kita membuat hal-hal menghilang! Ini bagaimana kita gunakan nilai 'hidden':

<div class="hidden-box">Sekarang Anda melihat saya...</div>
<div class="visible-box">Sekarang Anda tidak!</div>

<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: lightpink;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
</style>

Dalam contoh ini, kita memiliki dua kotak. Yang pertama diatur ke 'hidden', jadi dia tidak akan terlihat di halaman. Namun - dan ini penting - dia masih mengambil ruang! Kotak kedua akan muncul langsung setelah ruang tak terlihat pertama.

Ini berbeda dari display: none, yang menghapus element dari tata letak sepenuhnya. Berpikirkan 'hidden' seperti mantel tak terlihat - element itu masih ada, Anda hanya tidak bisa melihatnya!

CSS visibility - collapse Value

Nilai 'collapse' agak khusus. Ini utama digunakan untuk element tabel. Mari lihatnya dalam aksi:

<table>
<tr>
<td>Saya terlihat!</td>
<td class="collapsed">Saya collapse!</td>
<td>Saya terlihat juga!</td>
</tr>
</table>

<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.collapsed {
visibility: collapse;
}
</style>

Dalam contoh ini, sel tengah baris tabel kita diatur ke 'collapse'. Ini berarti dia akan disembunyikan, dan ruang yang akan diambilnya akan ditempati oleh sel sekitarnya. Seperti sel itu tidak pernah ada!

CSS visibility - Collapse Pada Element Non-Tabel

Sekarang Anda mungkin bertanya-tanya, "Apa yang terjadi jika saya menggunakan 'collapse' pada element non-tabel?" Pertanyaan yang bagus! Perilaku ini dapat berubah antara browser, tapi biasanya, itu akan bertindak sama seperti 'hidden'. Mari coba:

<div class="normal">Saya div biasa</div>
<div class="collapsed">Saya div collapse</div>
<div class="normal">Saya div biasa lainnya</div>

<style>
.normal {
background-color: lightyellow;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: lightcoral;
margin: 5px;
padding: 5px;
visibility: collapse;
}
</style>

Dalam sebagian besar browser, div 'collapsed' akan bertindak seperti visibility: hidden. Dia tidak akan terlihat, tapi dia masih mengambil ruang.

CSS visibility - Efeek Transisi

Ini adalah bagian yang sangat menyenangkan! Kita dapat menggunakan transisi CSS untuk membuat efek visibilitas yang mulus. Lihat ini:

<div class="magic-box">Hover saya!</div>

<style>
.magic-box {
width: 200px;
height: 100px;
background-color: lavender;
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
visibility: hidden;
opacity: 0;
}
</style>

Dalam contoh ini, ketika Anda hover di atas kotak, dia akan mulus memudar dan menjadi tak terlihat. Ketika Anda menggerakkan mouse Anda pergi, dia akan kembali memudar. Kita telah menggabungkan visibilitas dengan kejernihan untuk menciptakan efek ini. Keren, kan?

Dan itu dia, teman-teman! Anda telah belajar tentang visibilitas CSS. Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan keterampilan visibilitas Anda secara bijaksana, dan halaman web Anda akan berterima kasih kepada Anda!

Sebelum kita selesaikan, ini adalah一个小笑话 untuk Anda: Mengapa elemen CSS pergi ke terapi? Dia memiliki terlalu banyak masalah tersembunyi! ?

Selamat coding, dan semoga elemen Anda selalu terlihat seperti yang Anda inginkan!

Credits: Image by storyset