Membuat Efek Bayangan pada Teks dengan CSS

Membuat Efek Bayangan pada Teks dengan CSS

Untuk membuat efek bayangan (shadow) pada teks, kita bisa menggunakan CSS.

Berikut adalah CSS yang bisa kita gunakan untuk membuat efek bayangan pada teks

h1 {
  text-shadow: 2px 2px;
}



h1 adalah contoh elemen HTML yang ingin kita atur stylenya dengan bayangan.

Untuk membuat efek bayangan pada teks kita menggunakan properti text-shadow

Di contoh CSS di atas, kita membuat bayangan pada elemen h1 dengan horizontal shadow 2px dan vertical shadow 2px

Memberi Warna pada Bayangan


h1 {
  text-shadow: 2px 2px red;
}



Di atas kita melihat ada value red (merah). Red ini adalah warna bayangan

Menambahkan Efek Blur pada Bayangan


h1 {
  text-shadow: 2px 2px 5px red;
}



Di atas kita melihat ada value 5px. Ini adalah ukuran efek blur.

Membuat Teks Warna Putih dengan Bayangan Warna Hitam


h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}



Di atas ada properti color dengan value white. Ini adalah properti dan value untuk membuat elemen teks menjadi berwarna putih.

Di atas kita melihat ada value #000000, ini adalah value untuk membuat bayangan menjadi berwarna hitam.

Membuat Teks Berwarna Hitam dengan Bayangan Cahaya Neon Merah


h1 {
  text-shadow: 0 0 3px #FF0000;
}



Membuat Multiple Shadow


h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}



CSS di atas akan membuat bayangan berwarna merah dan cahaya neon biru.

Seperti yang Anda lihat di CSS di atas, antara value bayangan merah dan value bayangan cahaya neon biru dipisah dengan tanda koma

Keterangan :

  • 0 0 3px #FF0000 adalah value untuk membuat bayangan berwarna merah
  • 0 0 5px #0000FF adalah value untuk membuat bayangan berwarna cahaya neon biru.


Membuat Teks Berwarna Putih dengan Bayangan Hitam, Biru dan Biru Gelap


h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}



Membuat Border pada Teks (Tanpa Bayangan)


h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}



Catatan :

Di beberapa contoh di atas saya menggunakan elemen teks h1. Anda bisa mengganti h1 denga elemen teks yang lain, misalnya h2, h3, p atau elemen teks lainnya sesuai kebutuhan.

Penutup


Demikianlah telah saya uraikan bagaimana  cara menambahkan efek bayangan pada teks menggunakan CSS. Semoga bermanfaat.

Posting Komentar untuk "Membuat Efek Bayangan pada Teks dengan CSS"