Beranda / CSS / Pemrograman / Web

Mengenal CSS Text Shadow (Tutorial CSS Part 36)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 36: Logo CSS

Mengenal CSS Text Shadow: Bikin Teks Kamu Lebih Hidup!

Kalau kamu pernah lihat teks yang kayak punya bayangan atau efek glow di website, itu biasanya pakai properti CSS text-shadow. Efek ini bikin tulisan jadi lebih menarik dan gak monoton. Yuk, kita bahas bareng-bareng cara pakainya!

1. Apa Itu Text Shadow?

text-shadow adalah properti CSS yang digunakan untuk menambahkan bayangan pada teks. Efeknya bisa bikin teks kelihatan 3D, terang benderang, atau justru spooky tergantung warna dan jaraknya.

Sintaks dasar:

text-shadow: horizontal-shadow vertical-shadow blur-radius color;

Contoh:

text-shadow: 2px 2px 5px gray;

Artinya: bayangan akan muncul 2 piksel ke kanan dan 2 piksel ke bawah dari teks, dengan blur 5 piksel, dan warnanya abu-abu.

Contoh HTML + CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Text Shadow</title>
  <style>
    h1 {
      text-shadow: 2px 2px 5px gray;
      font-family: Arial, sans-serif;
      font-size: 36px;
      color: black;
    }
  </style>
</head>
<body>
  <h1>Halo, Dunia!</h1>
</body>
</html>

Hasilnya:

Contoh CSS Text Shadow
Gambar 36.1 : Contoh CSS Text Shadow

2. Contoh Text Shadow Lainnya

Berikut beberapa contoh seru buat kamu coba:

A. Efek Bayangan Hitam Sederhana

text-shadow: 1px 1px 0 black;

Efek ini cocok buat teks yang butuh kontras di background terang.

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Text Shadow</title>
  <style>
    h1 {
      color: white;
      background-color: #333;
      padding: 20px;
      text-shadow: 1px 1px 0 black;
    }
  </style>
</head>
<body>

  <h1>Halo, Dunia!</h1>

</body>
</html>

Hasilnya:

Contoh CSS Text Shadow Sederhana
Gambar 36.2: Contoh CSS Text Shadow Sederhana

B. Efek Glow (Cahaya)

text-shadow: 0 0 5px cyan, 0 0 10px blue;

Teks akan terlihat bercahaya. Mantap buat efek neon!

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Text Shadow</title>
  <style>
    body {
      background-color: #111;
      color: white;
      font-family: Arial, sans-serif;
      text-align: center;
      padding-top: 100px;
    }

    .glow-text {
      font-size: 48px;
      text-shadow: 0 0 5px cyan, 0 0 10px blue;
    }
  </style>
</head>
<body>
  <h1 class="glow-text">Teks Glow dengan CSS</h1>
</body>
</html>

Hasilnya:

Contoh CSS Text Shadow Efek Glow
Gambar 36.3: Contoh CSS Text Shadow Efek Glow

C. Efek Teks 3D

text-shadow: 2px 2px 0 #999, 4px 4px 0 #666;

Efek bertumpuk ini bisa kasih kesan teks timbul seperti 3 dimensi.

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Text Shadow 3D</title>
  <style>
    .teks-3d {
      font-size: 36px;
      color: #333;
      text-shadow: 2px 2px 0 #999, 4px 4px 0 #666;
    }
  </style>
</head>
<body>
  <h1 class="teks-3d">Efek Teks 3D dengan CSS</h1>
</body>
</html>

Hasilnya:

Contoh CSS Text Shadow Text 3d
Gambar 36.4: Contoh CSS Text Shadow Text 3d

D. Efek Horror atau Misterius

text-shadow: 2px 2px 5px red;

Warna merah dengan blur bikin teks terlihat menyeramkan—cocok buat tema Halloween!

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Text Shadow</title>
  <style>
    h1 {
      color: black;
      text-shadow: 2px 2px 5px red;
    }
  </style>
</head>
<body>
  <h1>Halo, Dunia!</h1>
</body>
</html>

Hasilnya:

Contoh CSS Text Shadow Efek Misterius
Gambar 36.5: Contoh CSS Text Shadow Efek Misterius

3. The CSS Text Shadow Property (Tabel)

Properti Keterangan
text-shadow Properti utama untuk menambahkan bayangan ke teks
Nilai 1 Jarak horizontal bayangan (px, em, dll)
Nilai 2 Jarak vertikal bayangan (px, em, dll)
Nilai 3 (Opsional) Radius blur, makin besar makin kabur
Nilai 4 Warna bayangan (hex, rgb, rgba, nama warna)
Multiple Bisa menambahkan beberapa bayangan sekaligus, pisahkan dengan koma ,

Penutup

CSS text-shadow itu simpel tapi powerful. Hanya dengan satu baris kode, kamu bisa bikin tampilan teks jadi lebih menarik dan hidup. Jangan ragu buat eksplorasi warna dan arah bayangan supaya hasilnya sesuai gaya yang kamu mau.

Kalau kamu suka main desain atau bikin halaman web yang estetik, properti ini wajib kamu kuasai. Selamat mencoba!

Posting Komentar untuk "Mengenal CSS Text Shadow (Tutorial CSS Part 36)"