CSS Text Shadow dan Box Shadow Effect (dengan Contoh)

Dengan CSS3 anda boleh membuat dua jenis bayangan: text-shadow(menambahkan bayangan pada teks) dan box-shadow(menambah bayangan pada elemen lain).

Bayangan Teks CSS3

Properti text-shadowini boleh mengambil hingga empat nilai:

  • bayangan mendatar
  • bayangan menegak
  • kesan kabur
  • warna
Contoh:

Bayangan teks biasa

h1 { text-shadow: 2px 2px 5px crimson; }
Contoh bayangan teks biasa

Kesan teks bercahaya

h1 { text-shadow: 0 0 4px #00FF9C; }
Contoh teks bercahaya

Bayangan Pelbagai

Untuk mencapainya, anda hanya menambahkan koma antara dua (atau lebih) set nilai:

h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
Contoh bayangan berganda dengan teks putih

Bayangan Kotak CSS3

Properti box-shadowini boleh mengambil hingga enam nilai:

  • (pilihan) insetkata kunci (mengubah bayangan menjadi satu di dalam bingkai)
  • bayangan mendatar
  • bayangan menegak
  • kesan kabur
  • penyebaran
  • warna
Contoh:
.first-div { box-shadow: 1px 1px 5px 3px grey; } .second-div { box-shadow: 0 0 5px 1px lightgrey; } .third-div { box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); }
Contoh bayangan kotak

Maklumat lanjut:

  • Dokumen web MDN
  • Periksa sokongan penyemak imbas
  • Penjana bayangan kotak CSS (jangan ragu untuk bereksperimen dengan kotak bayangan)