CSS Text Shadow – Membuat Efek Bayangan pada Teks

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada teks:
span {
text-shadow:10px 10px 7px #222;
}

Aturannya sama persis dengan CSS Box Shadow: 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. CSS Text Shadow Inset itu tidak ada, namun keterbatasan tersebut bukan berarti bahwa kamu tidak bisa membuat efek-efek yang lebih dahsyat. Dengan sedikit kreativitas, sebenarnya kamu juga bisa membuat efek bayangan teks inset (baca tutorialnya di sini).
Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

Top-Down Inline
<style type='text/css'>
#teks1 {text-shadow:10px 10px 7px #222;}
</style>

......

<div id='teks1'>TEKS</div>

<div style='text-shadow:10px 10px 7px #222;'>
TEKS
</div>

Dan ini adalah contoh hasil tampilannya:

HASIL TAMPILAN
OFFSET POSITIF

HASIL TAMPILAN
OFFSET NEGATIF

Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s