Pages

Kamis, 25 April 2013

Code HTML Untuk Membuat Efek Shadow (Bayangan)

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.

2 komentar: