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

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/shadows

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(This page uses CSS style sheets)

Demo

Drop shadows

CSS2 tidak memiliki properti untuk menambahkan bayangan pada sebuah kotak. Anda dapat mencoba untuk menambahkan sebuah batasan di sebelah kanan dan bawah tapi hal tersebut akan terlihat  tidak benar. Tetapi, bila anda memiliki dua elemen, dimana salah satunya ada di dalam elemen yang satunya lagi (nested elements) anda dapat menggunakan yang di luar sebagai bayangan dari yang didalam. Misalnya, bila anda memiliki teks seperti berikut ini (HTML):

<div class=back>
<div class=section>
<h2>Die Rose duftet - doch ob sie empfindet</h2>
<address>Heinrich Heine (1797-1856)</address>

<p>Die Rose duftet - doch ob sie empfindet<br>
...
</div>
</div>

anda dapat menggunakan DIV bagian luar sebagai bayangan dari yang didalam. Hasilnya akan tampak seperti pada halaman ini.Pertama berikan BODY sebuah latar belakang (hijau terang dalam contoh ini), DIV yang diluat tersebut dengan warna latar belakang yang lebih gelap (green-gray) dan bagian dalam DIV latar belakang yang lain (misalnya, kuning keputih-putihan):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Berikutnya, dengan menggunakan margin dan padding, anda menggeser DIV bagian dalam sedikit ke kiri dan ketas dari DIV yang di luar:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Anda juga perlu memindahkan DIV yang di luar sedikit ke kanan. Dan bila anda memilki beberapa seleksi, anda mungkin ingin beberapa jarak juga diantaranya:

div.back {margin: 3em 0 3em 5em}

Seperti itulah dasarnya.. Anda bisa menambahkan batasn disekeliling DIV yang di dalam bila anda inginkan. Anda juga mungkin menginginkan beberapa padding didalamnya, contoh:

div.section {border: thin solid #999; padding: 1.5em}

Tentu saja, anda dapat memvariasikan besar dari bayangannya sesuai dengan selera anda.

Bayangan Teks

CSS memiliki sebuah properti untuk menambahkan bayangan pada teks. Properti tersebut memiliki empat argumen: warna bayangan, offset horizontal (positif berarti ke kanan), offset vertikal (positif berarti ke bawah) dan blur (efek untuk membuat bayangan tidak jelas / kabur) (0 berarti sebuah bayangan yang tajam). Sebagai contoh:

h3 { text-shadow: red 0.2em 0.3em 0.2em }

Apakah teks ini memilki bayangan?

CSS Valid CSS!Valid HTML 4.0!

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