Home » , » Code HTML Untuk Membuat Efek Shadow (Bayangan)

Code HTML Untuk Membuat Efek Shadow (Bayangan)

Written By amirussalam on Kamis, 25 April 2013 | 02.16

Code HTML untuk membuat efek shadow ini bisa anda lakukan di beberapa tempat blog, seperti di kotak header, teks header, widget, navbar, footer dan lain-lain.

Contohnya seperti gambar di bawah ini :
gambar di bawah ini hanya contoh efek shadow di kotak header, teks header,navbar dan kotak menu.
contoh gambar efek shadow

Kegunaannya :

  •  hmmmm apa ya??!!, terlihat keren kayanya hehe

Cara membuatnya :

  1. Anda mau bikin efek shadownya di mana?? (itu terserah anda) 

  2. kalau di header cari kode ini di tempat "edit HTML" blog anda : 
    #header-wrapper { 
    }

    Kalau di teks header/judul blog  cari kode ini di tempat "edit HTML" blog anda :
    #header .title {
    }

    Kalau di halaman blog, cari kode ini di tempat "edit HTML" blog anda :
    #outer-wrapper {
    }

    dan lain-lain (terlalu panjang kalau di sebutin satu persatu)  Keterangan : sengaja saya kosongin kode yang berada di antara kode { dan kode } karena beda tema template terkadang beda isi kodenya.

  3. Nah sekarang copas kode di bawah ini :

    border: 10px solid rgba(255, 255, 255, 0.01);
    border-top-color: rgba(255, 255, 255, 0.01);
    border-bottom-color: rgba(255, 255, 255, 0.01);


    lalu simpan di antara kode  {  dan kode   

    Kalau efek shadow untuk teks, tambahkan kode di bawah ini :

    text-shadow: 0 10px 12px #1D2301;
    border: 10px solid rgba(255, 255, 255, 0.01);
    border-top-color: rgba(255, 255, 255, 0.01);
    border-bottom-color: rgba(255, 255, 255, 0.01);

    lalu simpan di antara kode  {  dan kode   


Contoh penerapan kodenya seperti di bawah ini :

#header .title
{
width: 400px;
margin:0 auto;
float: left;
color: #8c6c0c;
font: 40px/20px  Amiengfont;
text-align: left;
text-shadow: 0 10px 12px #000000;
border: 10px solid rgba(255, 255, 255, 0.01);
border-top-color: rgba(255, 255, 255, 0.01);
border-bottom-color: rgba(255, 255, 255, 0.01);
}

Selesai sudah, bila ada yang kurang di pahami jangan sungkan-sungkan untuk bertanya kepada saya.
Share this article :
Comments
2 Comments

2 komentar:

 

Support : Copyright © 2013. DUNIA CORAT-CORET - All Rights Reserved
powered by Blogger