Membuat Teks Dengan Efek Bayangan (Shadow)

Untuk mempercantik tampilan website, salah satu caranya dapat dilakukan dengan memperindah tampilan teks-teksnya, contohnya adalah teks dengan bayangan (shadow). Kita bisa membuat teks dengan efek bayangan menggunakan berbagai image editor, tapi pada tip ini saya ingin menyajikan pembuatan teks dengan efek bayangan menggunakan kode CSS yang dikombinasikan dengan HTML. Kodenya sangat sederhana dan mudah pemrogramannya,hanya menggunakan sintaks "text-shadow" dan jangan kaget hasilnya ternyata cukup menarik, hanya perlu diingat tidak semua browser "support" atau dapat menampilkan hasil dengan cara ini. Sebagai contoh, Internet Explorer, hingga versi 7 dan 8 pun tetap tidak mendukung penggunaan sintaks text-shadow ini. Jadi jika anda membuka suatu web yang dilengkapi dengan tulisan-tulisan ber-text-shadow, efek bayangan atau "shadow"nya tidak akan keluar, yang dimunculkan hanya teks-nya saja .... hmmm, sayang ya ! Tapi tidak perlu kecewa, saat ini hampir seluruh browser lain seperti Firefox, Opera, Safari, Google Chrome dengan versi-versi terakhirnya, baik pada platform Mac,Window, atau Linux, ternyata sudah mendukung text-shadow ini .... Jadi, anda tidak perlu khawatir untuk mencoba menggunakannya ?

Nah, saya akan mulai jelaskan sekarang ! Langkah pertama, pahami dulu uraian sintaks text-shadow yang akan kita gunakan, yaitu :

 {text-shadow: (koordinat X) (koordinat Y) (radius blur) (warna);}
      

Koordinat X  = nilainya menspesifikasikan jarak horizontal bayangan
Koordinat Y  = nilainya menspesifikasikan jarak vertika bayangan
Radius Blur    = nilainya menspesifikasikan radius dari blur yang dihasilkan
Warna           = nilainya menspesifikasikan warna bayangan Contoh : {text-shadow: 1px 1px 2px #ffffff;}

Langkah berikutnya, untuk penampilan pada tip ini, saya definisikan dulu jenis font, ukuran, dan parameter tampilan lainnya dengan CSS, sebagai berikut :

<style type="text/css">
      
.shadow {
 -moz-background-clip: -moz-initial; 
 -moz-background-origin: -moz-initial; 
 -moz-background-inline-policy: -moz-initial; 
 height: 35px; 
 width: 400px; 
 padding-left: 10px; 
 line-height: 36px; 
 font-family:arial;
 margin-bottom: 5px; 
 margin-left: 15px; 
 }
</style>
      

Untuk web anda, silahkan meng-copy atau memodifikasinya sesuai kebutuhan. Selanjutnya anda tinggal "memainkan" sintaks text-shadow-nya dengan HTML.

Ok. Sekarang kita langsung saja mencoba dengan contoh-contohnya.
Sebagai catatan:
Pada setiap contoh, saya akan munculkan 2 tampilan hasil. Tampilan pertama merupakan hasil langsung dari eksekusi script, sedangkan tampilan kedua (di bawahnya) merupakan copy dari tampilan pertama yang saya buat dalam bentuk image agar dapat dilihat juga oleh anda yang menggunakan browser yang belum/tidak "support" terhadap tag text-shadow, misal browser IE.

SHADOW SEDERHANA

Ini merupakan contoh untuk model teks dengan bayangan sederhana. Saya gunakan tag  <div> ...... </div>  saja ya untuk merealisasikan contoh ini, dan yang perlu didefinisikan sekarang tinggal parameter "color", "background", dan "text-shadow"-nya saja. Misal, saya ingin membuat teks dengan warna hitam (#000), background putih (#fff) dan text-shadow : 2px 2px 4 px #000, maka kodenya adalah sebagai berikut :

<div class=shadow style="color: #000; background: #E0FFFF;  
text-shadow: 2px 2px 4px #000;"><font size="5">
Teks Dengan Bayangan Sederhana</font></div> 
      

Hasilnya adalah :

Teks Dengan Bayangan Sederhana

Dalam bentuk image :

Anda bisa mengatur bayangan lebih lanjut, misal jika sumber cahaya seakan berada di depan tulisan, maka "value" koordinat Y pada text-shadow dibuat negatif, seperti ini:

<div class=shadow style="color: #000; background: #E0FFFF;  
text-shadow: 2px -2px 4px #000;"><font size="5">
Teks Dengan Bayangan Sederhana</font></div> 
      

Maka hasilnya :

Teks Dengan Bayangan Sederhana

Dalam bentuk image :

Bisa terlihat khan bedanya !?

Jika ingin membuat bayangan teks yang tajam, maka nilai radius blur di-nol-kan (dihilangkan),ini perintahnya :

<div class=shadow style="color: #000; background: #E0FFFF;  
text-shadow: 2px 2px 0px #000;"><font size="5">
Teks Dengan Bayangan Sederhana</font></div>
      

Maka hasilnya :

Teks Dengan Bayangan Sederhana

Dalam bentuk image :

SHADOW UNTUK TEKS BERWARNA

Untuk membuat teks berwarna dengan bayangan, maka kita modifikasi saja color, background, dan text-shadow-nya. Contoh, untuk teks berwarna biru (#0000ff) dengan bayangan merah (#ff0000), maka kode perintahnya :

<div class=shadow style="color: #0000ff; background: #E0FFFF;  
text-shadow: 2px 2px 4px #ff0000;"><font size="5">
Teks Berwarna</font></div>
      

Maka hasilnya :

Teks Berwarna

Dalam bentuk image :


Lumayan, khan ! Silahkan dicoba-coba lebih lanjut untuk variasi lainnya.

TEKS DENGAN MODEL UKIRAN (PAHATAN)

Tag text-shadow juga dapat digunakan untuk membuat teks dengan kesan hasil ukiran atau pahatan (engraved), caranya adalah dengan membuat nilai kordinat X "nol" dan kemudian mememainkan kombinasi color, background, dan text-shadow-nya. Background yang dibuat gelap memberikan hasil yang cukup menarik karena dapat memberikan efek kontras dengan teks-nya.
Ok. Saya beri contoh dengan warna teks hitam, background abu, dan bayangan putih, dengan kode sebagai berikut :

<div class=shadow style="color: #000; background: #666;
text-shadow: 0px 1px 0px #fff; font-weight: bold;"><font size="5">
Teks Model Ukiran</font></div> 
      

Maka hasilnya :

Teks Model Ukiran

Dalam bentuk image :


Sekarang, coba kita balik, teks berwarna abu-abu dan background hitam :

<div class=shadow style="color: #666; background: #000;  
text-shadow: 0px 1px 0px #fff; font-weight: bold;"><font size="5">
Teks Model Ukiran</font></div>  
      

Maka hasilnya :

Teks Model Ukiran

Dalam bentuk image :

Mana yang lebih menarik menurut anda ? Atau anda ingin membuat tulisan yang teks-nya seakan-akan ada dipermukaan background-nya ?
Seperti ini :

<div class=shadow style="color: #fff; background: #666;  
text-shadow: 0px 2px 2px #000; font-weight: bold;"><font size="5">
Teks Model Ukiran</font></div>   
      

Hasilnya :

Teks Model Ukiran

Dalam bentuk image :

TEKS DENGAN EFEK BAYANGAN MEMBARA (GLOWING)

Untuk melihat efeknya ini, anda harus membuat radius blur yang cukup besar dan sebaiknya dengan background gelap.

<div class=shadow style="color: #fff; background: #000;  
text-shadow: 2px 1px 7px #000;font-weight: bold;"><font size="5">
Teks Dengan Efek Membara</font></div> 
      

Hasilnya :

Teks Dengan Efek Membara

Dalam bentuk image :

Dengan background terang sebenarnya juga bisa, tapi hasil efek glowing-nya kelihatan kurang ter-ekspose, seperti contoh berikut :

<div class=shadow style="color: #fff; background: #fff;  
text-shadow: 2px 1px 7px #000;font-weight: bold;"><font size="5">
Teks Dengan Efek Membara</font></div> 
      

Hasilnya :

Teks Dengan Efek Membara

Dalam bentuk image :

TEKS DENGAN BAYANGAN GANDA

Ingin melihat efek bayangan yang lebih dahsyat ? Silahkan pelajari contoh berikut, saya lakukan perintah text-shadow lebih dari satu kali (dalam contoh ini, 5 kali), dilakukan pengaturan koordinat X dan Y, radius blur dan warna bayangannya sebagai berikut:

<div class=shadow style="color: #000; background: #000;  
text-shadow: 0px 0px 6px #ccc; 0 -5px 4px #ffcc99, 2px -10px 6px #ffcc33, 
-2px -15px 11px #ff3333, 2px -18px 18px #ff3300; 
font-weight: bold; "><font size="5">
Teks Dengan Bayangan Ganda</font></div> 
      

Hasilnya :

Teks Dengan Bayangan Ganda

Dalam bentuk image :

Gimana hasil yang terakhir ? Keren khan !?
Ok. Silahkan anda coba-coba dengan kreatifitas anda lebih lanjut, saya yakin anda bisa membuat dengan variasi lebih banyak disesuaikan dengan kebutuhan di web anda.
Selamat mencoba !!