KianHome - BOX SHADOW atau efek kotak berbayang adalah salah satu daya tarik dalam design blog atau web, biasanya banyak para designer yang menggunakan gambar untuk membuat efek shadow itu sendiri. Namun dengan pola kode CSS3 kita bisa memodifikasi semua itu dengan sangat baik.

Untuk itulah, postingan kali ini k'ian buat guna menanggapi pertanyaan dari sobat BryZONE "k, bleh tanya? gmna cara membuat border punya efek shadow kyak di blog ini??
blog saya : BryZONE"..berikut Toturialnya..

Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini:

box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;

Keterangan:

• 5px adalah ukuran x-offset
• 5px adalah ukuran y-offset
• 7px Tingkat blur shadow
• #222 adalah warna bayangan

Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini:

box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;

Keterangan:

• 0 adalah ukuran x-inset
• 5px adalah ukuran y-inset
• 7px Tingkat blur shadow
• #222 adalah warna bayangan

Contoh hasil CSS inner shadow bisa dilihat di bawah ini:

Penerapan:
Mungkin inilah proses yang paling sulit, dimana banyak blogger yang mengalami kendala dalam memasang kode tersebut. Padahal cara memasangnya sendiri cukup mudah dengan cara menambahkan salah satu kode diatas kedalam kode yang sudah ada diblog kamu. misal, jika kita ingin menambahkan pada kode "Wrapper", cukup copy kode yang tadi dan pastekan didalam kode wrapper yang sudah ada..contoh :

#wrapper{border:2px solid #a4a4a4;
box-shadow: 1px 1px 30px #000;
-moz-box-shadow: 1px 1px 30px #000;
-webkit-box-shadow:1px 1px 30px #000;
background:#fff;
height:100%;
margin:auto;
padding:5px;
width:1000px
}

TEXT SHADOW
Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:

text-shadow: 5px 5px 7px #222;
-moz-text-shadow: 5px 5px 7px #222;
-webkit-text-shadow: 5px 5px 7px #222;

dan untuk inner text shadow menjadi seperti ini:

text-shadow: inset 0 5px 7px #222;
-moz-text-shadow: inset 0 5px 7px #222;
-webkit-text-shadow: inset 0 5px 7px #222;

Cara penerapan sama dengan BOX SHADOW