Shadows Effect di CSS: Cara Membuat dan Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 5, 2020

Section Artikel

1 Efek Bayangan CSS
2 Bayangan Teks di CSS
3 Multiple Shadows(Bayangan)

Efek Bayangan CSS

Degngan menggunakan CSS, kita bisa menambahkan bayangan ke dalam teks dan elemen. Efek Bayangan(Shadow Effect) mempunya 2 jenis properti, seperti berikut ini :

text-shadow
box-shadow

Bayangan Teks di CSS

Properti CSS text-shadow berfungsi untuk menerapkan bayangan(shadow) ke dalam teks.

Dalam penggunaannya yang paling sederhana, kita tentukan bayangan horizontal (2px) dan bayangan vertikal (2px):

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Teks Bayangan!!</h1>

</body>
</html>

Selanjutnya, tambahkan warna pada bayangan:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Teks Bayangan!!</h1>

</body>
</html>

Kemudian, tambahkan efek blur pada bayangan:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Teks Bayangan!!</h1>

</body>
</html>

Contoh berikut memperlihatkan teks putih dengan bayangan hitam:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Teks Bayangan!!</h1>

</body>
</html>

Contoh berikut memperlihatkan bayangan cahaya neon merah:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>Teks Bayangan!!</h1>

</body>
</html>

Multiple Shadows(Bayangan)

Untuk menambahkan lebih dari satu bayangan ke teks, kita bisa menambahkan daftar bayangan yang dipisahkan koma(,).

Contoh berikut memperlihatkan bayangan cahaya neon merah dan biru:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Teks Bayangan!!</h1>

</body>
</html>

Contoh berikut memperlihatkan teks putih dengan bayangan hitam, biru, dan biru tua:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>Teks Bayangan!!</h1>

</body>
</html>

Kita bisa menggunakan properti text-shadow untuk membuat border polos di sekitar beberapa teks (tanpa bayangan):

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>

<h1>Teks dengan border</h1>

</body>
</html>

CSS