Cara Memberi Efek Shadow Pada Border

Cara ini tergolong cukup mudah karena kode yang dibutuhkan untuk Memberi Efek Shadow Pada Border ini tidaklah banyak.
Untuk contoh dapat anda lihat dibawah ini:

Tanpa Efek Shadow

Dengan Efek Shadow

Kode yang diperlukan ditambahkan untuk membuat itu adalah -moz-box-shadow: 0 0 10px #A9D0F5; -webkit-box-shadow: 0 0 10px #A9D0F5;

Kode yang berwarna merah adalah kode warna Efek Shadow tersebut, untuk mengetahui kode warna lengkap silahkan klik di sini.
Jika anda masih kebingungan untuk membuatnya, silahkan lihat contoh dibawah ini:

Misalnya jika anda ingin menambahkan efek shadow pada sidebar blog anda, dibawah ini adalah kode sidebar blog saya.

.middlecol .widget {
        width: 275px;
        background:#ffffff;
        border:1px solid $bordercolor;
        margin: 0 0 10px 5px;
        padding:10px;
        }

Kode middlecol disetiap template mungkin berbeda.

Kemudian sisipkan kode -moz-box-shadow: 0 0 10px #A9D0F5; -webkit-box-shadow: 0 0 10px #A9D0F5; didalamnya sehingga menjadi seperti yang dibawah ini:

.middlecol .widget {
width: 275px;
background:#ffffff;
border:1px solid $bordercolor;
margin: 0 0 10px 5px;
padding:10px;
-moz-box-shadow: 0 0 10px #A9D0F5;
-webkit-box-shadow: 0 0 10px #A9D0F5;}

Dan yang terakhir Simpan Template.

Anda dapat memodifikasinya sesuai kreativitas dan kemampuan masing-masing. Jika anda masih tidak mengerti, cobalah pelajari dan pahami. cukup sekian, semoga bermanfaat...

Source : http://zendry-online.blogspot.com/2010/07/cara-membuat-efek-shadow.html

Kata Ketik