Kursus IT Dasar CSS 026_Tampilan, Visibilitas, Efek

1
Menyembunyikan elemen, membuatnya tidak terlihat di halaman dan tidak menempati ruang serta tidak memengaruhi tata letak. Elemen tidak akan ditampilkan di halaman.

1
    .example{
2
        display: none;
3
    }

1
    <div class="example">Teks uji</div>ABC123

1
Menampilkan elemen sebagai elemen blok. Ditampilkan di halaman sebagai blok, dengan lebar default 100% dari kontainer induk.
2
Elemen blok adalah elemen yang menempati seluruh lebar, dengan jeda baris sebelum dan sesudahnya.

1
  .base{
2
      background-color: deepskyblue;
3
  }
4
  .example{
5
    display: block;
6
  }

1
    <a class="base example" href="">Uji hyperlink</a>
2
    <br>
3
    <a class="base" href="">Uji hyperlink</a>

1
Menampilkan elemen sebagai elemen inline. Elemen ditampilkan dalam baris yang sama, tidak menempati satu baris penuh, lebarnya ditentukan oleh konten.
2
Elemen inline hanya memerlukan lebar yang diperlukan dan tidak memaksa jeda baris.

1
  .base{
2
        background-color: aquamarine;
3
  }
4
  .example{
5
    display: inline;
6
  }

1
    <p class="base example">Uji paragraf</p>
2
    <p class="base">Uji paragraf</p>

1
Menampilkan elemen sebagai elemen blok inline. Elemen ditampilkan dalam baris yang sama, tetapi properti elemen blok seperti lebar, tinggi, dll. dapat diatur.

1
  .example1{
2
      display: inline-block;
3
      width: 100px;
4
      height: 100px;
5
      background-color: cornflowerblue;
6
  }
7
  .example2{
8
      background-color: cornflowerblue;
9
  }

1
    <p class="example1">Uji paragraf</p>
2
    <p class="example1">Uji paragraf</p>
3
    <p class="example2">Uji paragraf</p>

1
Mengatur elemen agar terlihat.

1
  .example{
2
      visibility: visible;
3
  }

1
  <div class="example">Teks uji</div>ABC123

1
Mengatur elemen agar tidak terlihat, tetapi elemen yang tersembunyi masih menempati ruang yang sama seperti sebelumnya. Artinya, meskipun elemen disembunyikan, ia masih memengaruhi tata letak.

1
  .example{
2
      visibility: hidden;
3
  }

1
  <div class="example">Teks uji</div>ABC123

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.example{
7
    opacity: 0.5;
8
    /* 50% transparansi */
9
}

1
    <div class="base"></div>
2
    <br>
3
    <div class="base example"></div>

1
    .example{
2
        text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8);
3
        /* 2px offset horizontal, 5px offset vertikal, 5px radius blur, warna rgba(243, 40, 40, 0.8) */
4
        font-size: 100px;
5
    }

1
    <div class="example">Teks uji</div>

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* Gradien dari atas ke bawah, merah ke biru */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* Gradien lingkaran, merah ke biru */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
.base {
2
    height: 100px;
3
    width: 100px;
4
    background-color: lightblue;
5
}
6
.example1 {
7
    transform: translate(50px, 20px);
8
    /* Pindahkan 50px horizontal, 20px vertikal */
9
}
10
.example2 {
11
  transform: scale(0.5);
12
  /* Skalakan elemen menjadi 0,5 kali */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* Putar 45 derajat searah jarum jam */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* Miringkan 50 derajat horizontal, 20 derajat vertikal */
21
}
22
.example5 {
23
    transform: translate(50px, 60px) rotate(45deg) scale(1.5);
24
}

1
    <div class="base example1"></div>
2
    <div class="base example2"></div>
3
    <div class="base example3"></div>
4
    <div class="base example4"></div>
5
    <div class="base example5"></div>