Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: text shadows dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/text-shadow

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(This page uses CSS style sheets)

Bayangan teks

Bayangan teks yang samar-samar

Teks putih yang dapat dibaca

Beberapa bayangan

Garis luar

Nyala neon

Bayangan Teks

CSS 3 memiliki sebuah properti yang dinamakan 'bayangan-teks' untuk memberikan bayangan pada tiap huruf pada teks. Yang paling sederhana, hal tersebut terlihat sebagai berikut:

h3 {text-shadow: 0.1em 0.1em #333}

Yang menambahkan sebuah bayangan abu-abu tua (#333) sedikit ke kanan (0.1em) dan kebawah (0.1em) relatif terhadap teks yang normal. Hasilnya akan terlihat seperti ini:

The noak and the barcicle

(Hingga Agustus 2005, masih belum semua browser benar-benar mendukung 'text-shadow'. Hal di atas seharusnya bisa dilihat paling tidak dengan Safari atau Konqueror.)

Bayangan teks yang tidak jelas

Bentuk paling sederhana dari properti 'text-shadow' mempunyai dua bagian: sebuah warna (seperti #333) diatas dan offsetnya (0.1em 0.1em untuk contoh diatas). Hal ini menyebabkan bayangan yang tajam pada offset yang di indikasikan. Tetapi offset dapat juga dibuat tidak jelas, menghasilkan sebuah bayangan yang kurang lebih kabur.

Jumlah ke tidak jelasannya sebuat sebagai sebuah offset yang lain. Berikut adalah dua baris, satu yang sedikit kabur (0.05em) dan satu lagi yang lebih banyak (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“What do you say?” said the UK

In order to see more clearly

Teks putih yang dapat dibaca

Bayangan dapat membuat teks lebih mudah dibaca bila kontras antara latar depan dan latar belakang kecil. Berikut adalah sebuah contoh dari teks putih dengan latar belakang warna biru pucat. yang pertama dengan bayangan kemudian dengan bayangan:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Tanpa bayangan:

What is in it for me?

Dengan bayangan:

With a shovel and some oranges

Banyak bayangan

Anda juga dapat memiliki lebih dari satu bayangan. Pada umumnya hal tersebut terlihat agak aneh:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}

I wish wish wish…

Tetapi dengan penempatan bayangan gelap dan terang yang baik, efek tersebut dapat berguna:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

I, Augustus (you know who)

That's extra, of course

Hal ini sedikit berbahaya,seperti yang anda daapt lihat browser anda tidak mendukung 'text-shadow'. Bahkan, warna dari latar belakang dan teks pada contoh ini hampir sama (#CCCCCC dan #D1D1D1), jadi tanpa bayangan, menjadi nyaris tak ada kontras.

Menggambar Huruf dengan garis pinggiran

Contoh dua banyangan pada versi sebelumnya dapat dibawa lebih jauh. Dengan empat bayangan, huruf dapat diberi sebuah garis pinggiran:

h3 {text-shadow: -1px 0 black, 0 1px black,
1px 0 black, 0 -1px black}

Are you feeling red?

A cat, an apple, etcetera

Hal tersebut tidaklah sempurna, dan pada saat ini (Agustus 2005), masih ada diskusi apakah CSS harus memilki sebuah properti terpisah (atau bahkan sebuah nilai untuk 'text-decoration') untuk membuat garis pinggiran yang lebih baik.

Nyala Neon

Bila anda menaruh sebuah bayangan yang tidak jelas dibelakan text, i.e., tanpa offset, hasilnya akan mengasilkan nyala disekitar hurufnya.. Bila nyala daro sebuah bayangan tidak cukup kuat, cukup ulangi bayangan yang sama beberapa kali:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
0 0 0.2em #87F}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 4 Aug 2005;
last updated $Date: 2007/10/27 00:47:16 $ GMT