CSS3 : text shadow

371

Property text-shadow ini konon katanya salah satu fitur dari CSS3. Tadinya saya belum mau kenalan sama CSS3, toh CSS2 pun belum paham semuanya. Tapi peran media memang cukup signifikan dalam mempengaruhi pendirian seseorang. CSS3 banyak dibicarakan dimana – mana. Awalnya menutup telinga tapi lama kelamaan jadi pengen nyoba juga. Seperti apakah CSS3 itu? Akhirnya saya menyerah dan mencoba si “text-shadow” ini.

Setelah dicoba ternyata memang mengasyikan, kita bisa menambahkan efek bayangan pada text. Efek bayangan di dunia design grafis memang sering saya gunakan, tapi dalam dunia web design baru kali ini saya coba. Ternyata CSS3 memang asyik (tuh kelihatan sudah berubah pendiriannya hihi). Sambil terus mempelajari CSS2 gak apa apa kan sedikit demi sedikit belajar juga tentang CSS3 (pembenaran lagi^^).

Struktur untuk text-shadow ini adalah sumbu x, sumbu y, nilai blur, warna. Warna bisa juga disimpan diawal jadi : warna, sumbu x, sumbu y, nilai blur. Untuk bayangan dengan arah kekiri atau keatas, cukup menambahkan nilai negatif pada nilai x atau y. Supaya lebih jelas bisa dilihat di gambar, saya ngambil contoh text shadow ini dipakai pada heading 1 (h1).

css3 text shadow definition

Biar lebih jelas mengenai penggunaannya, tulis aja HTML sederhana seperti ini di notepad atau dreamweaver, ceritanya saya ingin membuat bayangan putih pada tulisan warna merah.

save dengan nama bebas, lalu lihat hasilnya di browser terbaru. Maka akan muncul penampakan seperti ini,

css3 text shadow

Benarkan bayangan putihnya keluar. Biar lebih paham dan sebagai bentuk pembelajaran, tinggal diganti saja nilai text-shadownya. Selamat mencoba!

CSS3 memang keren, dunia web design akan lebih menarik. Tak sabar rasanya pengen nyoba rasa CSS3 yang lain.

  • keren..ayo terus kembangkan dan tetep istiqomah betul sekali 😀