Find What You Need

25 Jan 2010

Kotak atau Box Ada Bayangan /Efek Shadow Dengan CSS3

Untuk membuat kotak atau box ada efek bayangan bisa dilakukan dengan dua cara. Yang pertama adalah dengan bantuan aplikasi pengolah photo, file yang dihasilkannya tentu dalam format gambar. Yang kedua adalah dengan menambahkan kode CSS dalam template yang kita buat. Pada postingan terdahulu kita pernah membuat Text Ada efek shadow. Nah kali ini bagaimana menerapkan pada kotak atau box.

Sebagai catatan efek ini akan tampil jika browser yang kita gunakan adalah safari 1.1, firefox, chrome dan opera. Sedangkan jika browser yang digunakan masih Internet Explorer, maka efek tersebut tidak akan tampil alias seperti kotak biasa saja.

Yang akan kita lakukan kali ini adalah belajar membuat efek bayangan dengan cara kedua, contohnya seperti ini :







Atau efek shadownya bisa juga seperti ini :








Dengan kode CSS ini juga kita bukan cuma bisa membuat kotak ada bayangan tapi seperti sidebar , mainbar dan yang lainnya di template kita bisa ditambahkan efek bayangan. Untuk itu kode yang perlu ditambahkan adalah :

Untuk gambar pertama kodenya seperti ini :

box-shadow: 5px 5px 5px #000
-moz-box-shadow: 5px 5px 5px #000
-webkit-box-shadow: 5px 5px 5px #ddd

Untuk gambar kedua kodenya seperti ini :

box-shadow:inset 5px 5px 5px #000
-moz-box-shadow:inset 5px 5px 5px #000
-webkit-box-shadow:inset 5px 5px 5px #ddd

Kita bisa merubah efek bayangan dengan mengatur nilai pixelnya, silahkan sesuaikan dengan nilai yang anda kehendaki. Sedangkan untuk merubah warna bayangan kita tinggal mengubah nilai hex kode warnanya.





**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

1 komentar:

tomtomz Pada 29 Januari 2010 pukul 04.51 mengatakan...

BAGUUUUSS SEKALI PAK ...!

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template