CSS - Kenampakan: Membuat Elemen Muncul dan Hilang

Hai teman-teman pengembang web yang sedang belajar! Hari ini, kita akan melihat dunia yang menarik dari kenampakan CSS. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Pada akhir tutorial ini, Anda akan dapat membuat elemen menghilang dan muncul seperti seorang ahli CSS sejati!

Apa Itu Kenampakan CSS?

Sebelum kita mulai mengayunkan tongkat CSS kita, mari kita pahami apa itu kenampakan. Dalam kata-kata yang sederhana, kenampakan CSS mengendalikan apakah suatu elemen nampak atau disembunyikan di halaman web. Itu seperti bermain hide and seek dengan elemen HTML Anda!

Nilai yang Mungkin

Mari kita lihat nilai yang berbeda yang dapat kita gunakan dengan properti kenampakan:

Nilai	Deskripsi
visible	Elemen ini tampak (ini adalah nilai default)
hidden	Elemen ini disembunyikan, tapi masih mengambil ruang
collapse	Digunakan utama untuk elemen tabel, kita akan bahas ini!
inherit	Mewarisi kenampakan dari elemen induknya

Terapkan ke

Properti kenampakan dapat diterapkan ke semua elemen HTML. Ya, Anda mendengar benar - semua mereka! Dari div ke paragraf, gambar ke tabel, Anda namakannya, dan kenampakan akan bekerja magicnya.

Syntax DOM

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

elemen {
visibility: nilai;
}

Simple, kan? Ganti 'elemen' dengan elemen HTML yang Anda inginkan, dan 'nilai' dengan salah satu nilai kenampakan yang kita diskusikan sebelumnya.

Kenampakan CSS - Nilai visible

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

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

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

Dalam contoh ini, kita membuat kotak biru muda dengan teks "Bisa Anda lihat saya?". Kenampakan diatur ke 'visible', yang berarti... Anda menebak benar, kotak ini tampak! Ini adalah perilaku default, jadi bahkan jika kita tidak menentukan kenampakan, hasilnya akan sama.

Kenampakan CSS - Nilai hidden

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

<div class="hidden-box">Sekarang Anda lihat 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 tampak 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 elemen dari tata letak sepenuhnya. Pahami 'hidden' seperti mantel tak terlihat - elemen itu masih ada, Anda hanya tidak bisa melihatnya!

Kenampakan CSS - Nilai collapse

Nilai 'collapse' adalah sedikit khusus. Ini utama digunakan untuk elemen tabel. Mari kita lihatnya dalam aksi:

<table>
<tr>
<td>Saya tampak!</td>
<td class="collapsed">Saya collapse!</td>
<td>Saya tampak 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 dari baris tabel kita diatur ke 'collapse'. Ini berarti dia akan disembunyikan, dan ruang yang akan diambilnya akan ditempati oleh sel sekitarnya. Itu seperti sel itu tidak pernah ada!

Kenampakan CSS - Collapse pada Elemen Non-Tabel

Sekarang, Anda mungkin bertanya-tanya, "Apa yang terjadi jika saya gunakan 'collapse' pada elemen non-tabel?" Pertanyaan yang bagus! Perilaku ini dapat berbeda antar browser, tapi biasanya, ia akan bertindak sama seperti 'hidden'. Mari kita cobanya:

<div class="normal">Saya div biasa</div>
<div class="collapsed">Saya div collapse</div>
<div class="normal">Saya div 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 tampak, tapi masih mengambil ruang.

Kenampakan CSS - Efect Transisi

Ini adalah tempat hal-hal menjadi sangat menarik! Kita dapat menggunakan transisi CSS untuk membuat efek kenampakan 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 menghilang dan menjadi tak terlihat. Ketika Anda menggerakkan mouse Anda, dia akan kembali muncul. Kita telah menggabungkan kenampakan dengan kejelasan untuk menciptakan efek ini. Keren, kan?

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

Sebelum kita selesai, ini adalah sedikit lelucon untuk Anda: Mengapa elemen CSS pergi ke terapi? Dia memiliki terlalu banyak masalah tersembunyi! ?

Hari-hari coding yang menyenangkan, dan semoga elemen Anda selalu tampak seperti yang Anda inginkan!

Credits: Image by storyset