Ngatur Penampakan Elemen: Jurus display, visibility, dan opacity di CSS!

Udah bisa ngasih warna, bayangan, dan ngatur kotak elemen? Keren! Sekarang, gimana kalau kita mau ngatur gimana cara sebuah elemen itu tampil di halaman, atau bahkan nyembunyiin elemen sama sekali, atau bikin dia jadi transparan?

Nah, CSS punya beberapa properti andalan buat ngelakuin ini: display, visibility, dan opacity. Ketiganya sering dipake, tapi punya cara kerja dan efek yang beda-beda. Yuk, kita pahami satu per satu!

Properti display: Ngubah "Sifat" Dasar Elemen

Properti display ini salah satu properti CSS yang paling fundamental dan powerful. Dia nentuin gimana cara sebuah elemen itu diperlakuin dalam alur dokumen (document flow) dan gimana dia berinteraksi sama elemen lain di sekitarnya. Dengan display, kamu bisa ngubah "sifat" dasar sebuah elemen, misalnya dari yang tadinya inline jadi block, atau sebaliknya.

Beberapa nilai display yang paling umum dan penting buat diketahui:

1. block:

   • Elemen bakal tampil sebagai blok.
   • Ciri-ciri utama:
     • Selalu mulai di baris baru.
     • Secara default, lebarnya bakal ngambil 100% lebar parent container-nya (kecuali kamu set width spesifik).
     • Kamu bisa ngatur width, height, margin (atas/bawah/kiri/kanan), dan padding-nya.
   • Contoh elemen HTML yang default-nya display: block;: <div>, <p>, <h1> s.d. <h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>, dll.

   span.jadi-blok {
       display: block; /* Span yang tadinya inline, sekarang jadi kayak div */
       background-color: lightblue;
       width: 200px;
       padding: 10px;
       margin-bottom: 10px;
   }

2. inline:

   • Elemen bakal tampil sejajar (inline) dengan konten di sekitarnya, kayak kata di dalem kalimat.
   • Ciri-ciri utama:
     • Gak mulai di baris baru.
     • Lebar dan tingginya cuma selebar dan setinggi konten di dalemnya.
     • Kamu GAK BISA ngatur width dan height-nya secara langsung.
     • Kamu GAK BISA ngatur margin-top dan margin-bottom-nya (kalaupun diset, gak bakal ngefek ke layout vertikal elemen lain). margin-left dan margin-right masih bisa.
     • padding kiri dan kanan bisa, tapi padding atas dan bawah mungkin bakal "numpuk" ke elemen lain tanpa ngedorong mereka.
   • Contoh elemen HTML yang default-nya display: inline;: <span>, <a>, <img> (agak spesial, sering disebut replaced inline element), <strong>, <em>, <button>, <input>, <label>, dll.

   div.jadi-inline {
       display: inline; /* Div yang tadinya block, sekarang jadi kayak span */
       background-color: lightcoral;
       padding: 5px; /* Padding tetep ngefek */
       /* width: 100px;  Ini gak bakal ngefek */
       /* margin-top: 20px; Ini juga gak bakal ngefek ke layout vertikal */
   }

3. inline-block:

   • Ini kayak gabungan sifat inline dan block.
   • Ciri-ciri utama:
     • Elemennya tampil sejajar (inline) sama elemen lain (gak mulai baris baru).
     • TAPI, kamu BISA ngatur width, height, margin (semua sisi), dan padding-nya, kayak elemen block.
   • Sering dipake buat bikin item-item kecil yang mau dijejerin tapi ukurannya mau dikontrol (misal, tombol navigasi, kartu kecil).

   .tombol-custom {
       display: inline-block;
       background-color: mediumseagreen;
       color: white;
       padding: 10px 15px;
       margin: 5px;
       border-radius: 4px;
       width: 120px; /* Bisa diatur! */
       text-align: center;
   }

4. none:

   • Elemen bakal disembunyiin total dari halaman.
   • Gak cuma gak keliatan, tapi juga gak bakal ngambil ruang di layout sama sekali. Seolah-olah elemen itu gak pernah ada di HTML.
   • Sering dipake sama JavaScript buat nampilin/nyembunyiin elemen secara dinamis.

   .sembunyikan-aku {
       display: none;
   }

5. flex dan grid:

   • Ini adalah nilai display yang super powerful buat ngatur layout modern.
   • display: flex; bakal ngubah elemen jadi flex container, dan anak-anaknya jadi flex items. Cocok buat layout satu dimensi (baris atau kolom).
   • display: grid; bakal ngubah elemen jadi grid container, dan anak-anaknya jadi grid items. Cocok buat layout dua dimensi (baris dan kolom).
   • Kita bakal bahas flex dan grid lebih detail di materi khusus layouting nanti. Untuk sekarang, cukup tau kalau mereka ini nilai display juga.

Masih ada beberapa nilai display lain (table, list-item, dll.), tapi yang di atas ini yang paling sering kamu temui dan pake.

Properti visibility: Nyembunyiin Elemen Tapi Tetep Ada "Bekasnya"

Properti visibility juga dipake buat ngontrol apakah elemen keliatan atau enggak. Tapi, beda sama display: none;.

• Nilai Umum:
  • visible (Default): Elemennya keliatan.
  • hidden: Elemennya gak keliatan, TAPI dia tetep ngambil ruang di layout halaman. Jadi, bakal ada "ruang kosong" seukuran elemen itu di tempat dia seharusnya ada.

Contoh visibility: hidden;:

.hantu {
    visibility: hidden;
    width: 100px;
    height: 50px;
    background-color: lightgray; /* Gak keliatan, tapi ruangnya tetep ada */
}

Kapan Pake visibility: hidden; vs display: none;?

• Pake display: none; kalau kamu mau elemen itu bener-bener ilang dari layout.
• Pake visibility: hidden; kalau kamu mau elemen itu gak keliatan tapi tetep "nge-booking" tempatnya di layout, jadi elemen lain gak geser-geser. Ini kadang berguna buat animasi atau transisi tertentu.

Properti opacity: Bikin Elemen Jadi Transparan

Properti opacity ngatur tingkat transparansi (atau ke-opakan) sebuah elemen beserta semua konten di dalemnya.

• Nilai: Angka dari 0.0 sampe 1.0.
  • 0.0: Transparan total (gak keliatan sama sekali, tapi masih bisa diinteraksi kalau gak di-set pointer-events: none;).
  • 0.5: Setengah transparan (50% opak).
  • 1.0 (Default): Opak total (gak transparan).

Contoh opacity:

.gambar-watermark {
    opacity: 0.3; /* Gambar jadi 30% opak, 70% transparan */
}
 
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: black;
    opacity: 0.7; /* Overlay hitam transparan 70% */
    z-index: 1000; /* Biar nutupin konten lain */
}
 
.tombol-disabled-visual {
    opacity: 0.5;
    cursor: not-allowed; /* Tambahan biar lebih jelas disabled */
}

Perbedaan opacity: 0; dengan visibility: hidden; dan display: none;:

• opacity: 0;: Elemen gak keliatan, tapi masih ngambil ruang di layout DAN masih bisa diinteraksi (misal, diklik kalau itu link atau tombol, kecuali kamu atur pointer-events).
• visibility: hidden;: Elemen gak keliatan, masih ngambil ruang di layout, tapi gak bisa diinteraksi.
• display: none;: Elemen gak keliatan, gak ngambil ruang di layout, dan gak bisa diinteraksi.

Pilih properti yang paling sesuai sama efek yang mau kamu capai!

Menguasai display, visibility, dan opacity ini penting banget buat ngontrol gimana elemen-elemenmu tampil dan berinteraksi di halaman. Properti display khususnya, adalah kunci buat mulai ngertiin cara kerja layout di CSS.

Jangan ragu buat nyoba-nyoba berbagai nilai properti ini di elemen HTML-mu pake Live Server dan liat langsung efeknya. Itu cara belajar yang paling seru!