KAWAH PAPANDAYAN

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 sahabat 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 sahabat.

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

<style type="text/css">.sundaboy-dot-com{
width:300px;
height:40px;
padding:5px;
margin:0 auto;
color:#444;
background:#fff;
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">CONTOH TULISAN</div>

Tampilannya akan tampak seperti dibawah ini :



CONTOH TULISAN


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

Untuk kode warna sahabat bisa lihat Disini

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

Ditulis Oleh : Yudus | Media Sharing Sundaboy

Sahabat sedang membaca tulisan Cara Membuat Efek Shadow Pada Kotak. Yang ditulis oleh sundaboy Grt. Apabila sahabat ingin menyebar luaskan artikel ini untuk kepentingan umum, dimohon untuk menyertakan Link sumber dibawah ini. Untuk Kritik dan sarannya sahabat bisa mengirimkan pada kotak komentar dibawah, atau melalui email sundaboy88@gmail.com. tengkyu

4 komentar:

  1. wah trik baru nh gan...masih jarang yang pakai..seep

    BalasHapus
  2. Terima kasih tutorialnya. Tutorialnya sangat membantu agar saya dapat menyelesaikan web.

    BalasHapus
  3. Terimakasih mas..., Alhamdulillah berhasil..., meski sedikit puyeng :D...

    BalasHapus

=================================
- Berkomentarlah Yang Sopan
- Tidak Diperkenankan Memasukan Link Aktif Pada Isi Komentar
- Berkomentarlah Sesuai Dengan Content
=================================