CSS Shadow

Menambahkan bayangan (shadow) pada elemen

Shadow merupakan efek yang dapat ditambahkan pada suatu elemen HTML.
Jenis efek shadow terdiri dari 2 macam :
1. text-shadow : untuk mengatur efek bayangan pada elemen teks.
2. box-shadow : untuk menentukan efek bayangan pada box elemen.

Dari 2 jenis efek shadow diatas, dalam penggunaannya bisa diterapkan arah dari efek tersebut yaitu arah sisi bawah, sisi atas, sisi kiri dan sisi kanan.

Contoh penggunaan efek bayangan

Perhatikan penulisan nilai pada masing-masing efek.

Text shadow

{text-shadow: 2px 2px blue} TEXT SHADOW_{(BAWAH KANAN)}

{text-shadow: -2px 2px blue} TEXT SHADOW_{(BAWAH KIRI)}

{text-shadow: 2px -2px blue} TEXT SHADOW_{(ATAS KANAN)}

{text-shadow: -2px -2px blue} TEXT SHADOW_{(ATAS KIRI)}

Text shadow kombinasi

Contoh 1:

Text shadow

<style>
h1 {
text-shadow: 2px 2px 4px #000000;
}
</style>

Contoh 2:

Text shadow

<style>
h1 {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>

Contoh 3:

Text shadow

<style>
h1 {
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>

Box shadow

<div>BOX SHADOW</div>
<style>
div {
  padding: 50px 20px;
  margin: 20px;
  width: 200px;
  box-shadow: 4px 4px black;
}
</style>

BOX SHADOW

<div>BOX SHADOW</div>
<style>
div {
  padding: 50px 20px;
  margin: 20px;
  width: 200px;
  box-shadow: 8px 8px 4px black;
}
</style>

BOX SHADOW

<div>BOX SHADOW</div>
<style>
div {
  padding: 50px 20px;
  margin: 20px;
  width: 200px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>

BOX SHADOW