CSS - Tampilan dan Visibilitas

Hari ini kita akan berbicara tentang bagaimana tampilan dan Visibilitas di Halaman Web Anda. Ketika saatnya tiba untuk membuat tampilan halaman, maka sangat akan penting untuk anda mengatur letak posisi halaman yang bagus, karena itu Anda akan menjadi kunci untuk halaman yang sangat efektif. Termasuk setiap elemen HTML yang kita lihat pada dasarnya menjadi sebuah kotak. Maka disini anda akan mengenal dengan yang namanya CSS Display dan Visibility

Dsiii anda akan mengetahui bagaimana tampilan di layar dari elemen berfungsi mempengaruhi semua elemen lainnya di halaman Anda. Jadi sebelum kita mulai, saya hanya ingin mengingatkan Anda setiap elemen di halaman Anda adalah sebuah kotak. Anda harus pikirkan hasilnya Dan bayangkan bagaimana bentuk tampilannya, sehingga Anda dapat memutuskan apakah elemen kotak tersebut harus bersebelahan, di bawah satu sama lain, dan hal yang berbeda seperti itu.

Jadi ketika kita berbicara tentang tampilan, cukup banyak orang menggunakan atau menjadikannya default saja tanpa anda menyadarinya. Elemen html yang ada di dalamnya akan terletak di samping elemen lain, mereka mengambil cukup lebar dan tinggi dan tidak lebih, saat Anda meletakkannya di halaman.

Nah disini fungsi dari Properti display, yang berguna dalam menentukan apakah elemen HTML ditampilkan/tidak, sedangkan properti visibilitas menentukan apakah sebuah elemen harus terlihat atau tersembunyi.

Jadi keduanya berfungsi untuk menghilangkan elemen dari tampilan namun bedanya, pada visibility, meskipun sudah menghilangkan eleman dari tampilan tetap mengambil ruang sesuai ukuran elemen tersebut.

Perhatikan code ini:

<html>
   <head>
   </head>
   <body>
           <p> Disini akan kita uji hasil dari</p><p style="visibility:hidden;">visibility hidden</p><p>bagaimana resultnya</p>


 <p>Dan menguji hasil dari</p>
  <p style="display:none;">display none</p>
  <p>apakah mengambil ruang</p>
   </body>
</html>

Hasilnya adalah:

tampilan1

Dari result code diatas nampak bahwa property visibility memang elemennya tidak terlhat tapi membuat ruang kosong atau kotak, yang tentu saja bisa mengganggu tampilan web anda.

Elemen tersebut tidak akan menimpa satu sama lain, ya mereka baik-baik saja. Mereka akan akur. Namun pandangan kita akan terganggu dan berpikir apa ada sesuatu disana? Jenis tampilan lainnya adalah blok. Dan apa yang dilakukannya adalah memaksa jeda baris di antara elemen Anda. Disini saya berusaha menempatkan mereka di baris mereka sendiri.

Meskipun dia sangat kecil dan dia tidak mengambil banyak ruang, dia memiliki seluruh baris untuk dirinya sendiri. Apa yang terbaik dari elemen blok, sementara elemen tersebut mengambil semua ruang secara horizontal, lebar dan cukup tinggi, maka disini Anda harus masuk dan mengatur ketinggian serta lebar pada elemen-elemen itu.

Coba perhatikan code ini:

<style type="text/css">
    .visibility1 {
        border: 1px solid #000;
        visibility: visible;
    }
    .display {
        border: 1px solid #000;
        display: none;

    }
    .visibility2 {
        border: 1px solid #000;
        visibility: visible;
    }
</style>

<div class="visibility1">elemen visibility 1</div>
<div class="display">Ini adalah elemen display</div>
<div class="visibility2">elemen visibility 2</div>

Hasilnya: tampilan1

Yup penggunaan visibility akan mengambil ruang bagi dirinya sendiri, ketika anda meng-formatnya dengan border atau blok. Sedangkan display hilang sama sekali

Penggunaan div dan paragrafnya, itu adalah blok, jadi mereka akan mengambil lebih banyak ruang. Pada dasarnya, semua elemen akan mempunyai tinggi dan lebar dan warna latar belakang yang berbeda tergantung cara anda membuat aturan codenya. Seperti halnya penggunaan div akan sebesar code yang anda masukkan atau bisa secara default saja dan paragraf sama besarnya dengan mereka. Anda dapat melihat tinggi dan lebar elemen. Jika tidak memasukkannya secara default, div dan paragraf ini akan mengambil seluruh lebar layar, dan mereka akan sangat kecil karena mereka akan hanya perlu ruang yang cukup untuk memiliki teks itu. Jadi mari kita lanjutkan dan bermain dengan ini.

Cobalah untuk membuat aturan code yang berbeda, sehingga anda akan tahu kegunaan display dan visibility. Beberapa elemen ini bisa anda uji coba:

<div>
<h1> – <h6>
<p>
<form>
<header>
<footer>
<section>