author Ahmad Muhardian

Tutorial CSS: Cara Membuat Effek Bayangan dengan CSS

Properti untuk membuat bayangan (shadow), mulai dikenalkan pada CSS3. Properti tersebut adalah box-shadow dan text-shadow.

Bayangan untuk elemen dan teks dengan css

Keduanya sama-sama berfungsi untuk membuat bayangan. Properti box-shadow digunakan untuk membuat bayangan untuk kotak atau elemen kontainer. Sementara itu, properti text-shadow digunakan untuk membuat bayangan pada teks.

Membuat Bayangan untuk Teks

Langsung saja ke contoh, silakan buat style seperti ini.

h2 {
    text-shadow: 3px 2px 1px grey;
    font-size: 40px;
}

kemudian HTML-nya:

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bayangan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h2>Bayanganmu!</h2>
</body>
</html>

Hasilnya:

Bayanganmu!

Mantap!

Teksnya memiliki bayangan.

Membuat Bayangan untuk Box

Selanjutnya kita coba membuat bayangan untuk kotak atau kontainer.

style.css

.kotak {
    box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    padding: 10px;
    border: 1px dashed grey;
}

bayangan.html

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Bayangan</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>

    <div class="kotak">Tiap malam, aku selalu melihat bayangan hitam</div>

</body>
</html>

hasilnya:

Tiap malam, aku selalu melihat bayangan hitam

Penjelasan Nilai Bayangan

Bagaimana, mudah bukan membuat bayangan?

Properti bayangan memiliki empat nilai yang harus diberikan:

box-shadow: x y z warna;
  1. nilai x untuk menentukan arah horizontal
  2. nilai y untuk menentukan arah vertikal
  3. nilai z untuk menentukan keburaman (blur) bayangan
  4. nilai warna, bisa menggunakan rgb(), rgba(), kode warna, nama warna, dsb.

(baca juga: 6 nilai warna yang valid dalam css)

Jika nilai x dan y diberikan nilai negatif, maka bayangannya akan mengarah ke atas. Sementara itu, nilai z tidak boleh negatif.

Contohnya:

.kotak {
    box-shadow: -3px -3px 2px rgba(0,0,0,0.4);
    padding: 10px;
    border: 1px dashed grey;
}

Maka hasilnya:

Tiap malam, aku selalu melihat bayangan hitam

Bayangan Masuk ke Dalam

Jika ingin membuat bayangan masuk ke dalam kotak, maka kita perlu menambahkan kata kunci inset.

contoh:

.kotak {
    box-shadow: inset 3px 3px 4px rgba(0,0,0,0.4);
    padding: 10px;
    border: 1px solid grey;
}

Hasilnya:

Tiap malam, aku selalu melihat bayangan hitam

Ahir kata…

Nah itulah cara membuat efek bayangan dengan CSS. Selamat mencoba dan selamat berkreasi.