Cara Membuat Efek Shadow Pada Kotak

Cara membuat Efek Shadow Pada Kotak – Efek Shadow Pada Kotak yaitu efek yang menyerupai bayang bayang sebuah kotak tulisan atau gambar, sehingga menghasilkan tampilan yang cukup menarik dan enak untuk dilihat, Nah disini saya akan mencoba Membuat Efek Shadow Pada Kotak dengan menggunakan kode css3, walaupun begitu sobat jangan takut kalau kode css3 ini akan memberatkan loading sebuat blog, karena kode yang akan saya berikan sangat ringan dan tidak akan memberatkan loading blog sobat.

Nah kalau sobat ingin mencoba membuat Efek Shadow Pada Kotak, silahkan sahabat copy kode dibawah ini dan masukan kedalam halaman posting.

<div>
<style type="text/css">
.sundaboy-dot-com{
width:300px;
height:40px;
padding:5px;
margin:0 auto;
color:#FFFFF;
background:FFCC00;
border: 1px solid black;
box-shadow: 6px 6px 8px #818181;
-webkit-box-shadow: 6px 6px 7px #818181;
-moz-box-shadow: 6px 6px 7px #818181;
}

</style>
<div class="sundaboy-dot-com">
<span style="color: white;">CONTOH TULISAN</span></div>
</div>

Tampilannya akan tampak seperti dibawah ini :

.sundaboy-dot-com{ width:300px; height:40px; padding:5px; margin:0 auto; color:#FFFFF; background:#FFCC00; border: 1px solid black; box-shadow: 6px 6px 8px #818181; -webkit-box-shadow: 6px 6px 7px #818181; -moz-box-shadow: 6px 6px 7px #818181; }
CONTOH TULISAN

NB :
width:300px;         = Lebar Kotak
height:40px;          = Tinggi Kotak
color:#444;           = Warna Tulisan
background:#fff;   = Background Kotak

Untuk kode warna sobat bisa lihat Disini

Nah itu Cara Membuat Efek Shadow Pada Kotak, mudah bukan?!. Selamat berkreasi semoga bermanfaat untuk saran dan kritiknya silahkan poskan pada kotak komentar yang telah disediakan dibawah ini..Trims…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s