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.
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:
Penjelasan Nilai Bayangan
Bagaimana, mudah bukan membuat bayangan?
Properti bayangan memiliki empat nilai yang harus diberikan:
box-shadow: x y z warna;- nilai
xuntuk menentukan arah horizontal - nilai
yuntuk menentukan arah vertikal - nilai
zuntuk menentukan keburaman (blur) bayangan - 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:
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:
Ahir kata…
Nah itulah cara membuat efek bayangan dengan CSS. Selamat mencoba dan selamat berkreasi.
No comments:
Post a Comment