Home » CSS » Shadows Effect di CSS: Cara Membuat dan Codenya

Shadows Effect di CSS: Cara Membuat dan Codenya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Section Artikel

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>

You may also like