Contohnya seperti gambar di bawah ini :
gambar di bawah ini hanya contoh efek shadow di kotak header, teks header,navbar dan kotak menu.
- hmmmm apa ya??!!, terlihat keren kayanya hehe
Cara membuatnya :
- Anda mau bikin efek shadownya di mana?? (itu terserah anda)
- 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 }
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.
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;
{
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.
BINGUNG KANG
BalasHapusbingung knapa? kamu mau bikin efek shadownya dimana? siapa tau saya bisa membantu
Hapus