CARA MEMBUAT EFEK BAYANGAN / BOX SHADOW DI BLOG
CARA MEMBUAT EFEK BAYANGAN / BOX SHADOW DI BLOG – Cara membuat box shadow sebenarnya ada bermacam macam cara. Salah satunya pada kesempatan kali ini saya akan membahas tutorial cara membuat efek bayangan hanya menggunakan css pseudo element. Loh kok gak pake kode css box-shadow? Karena kalo menggunakan pseudo element hasil dari bayangannya bisa diatur letak dan bentuknya semau kita, tapi tentunya ada kelebihan dan kekurangannya masing masing.
 |
| effect box shadow |
Kalo ada yang tanya “Eh lu dapet kode ini dari mana sih?” Jawabnya: “Hmm gue dapet ini dari hasil mengintip source kode blog orang” Sambil ketawa setan. Pas lagi browsing tau-tau nemu tampilan blog yang lumayan kece. Trus muncul dah gejolak dalam hati dan otak gue untuk mencari tau “Eh ini style kode css yang pegimana yee?” Hahaha. Oke lah gue jujur gue dapetin css code ini dari CSS-tricks.com bagian pojok kiri atas. Hehe dengan begini gue udah mencantumkan sumbernya toh? lalu gue terbebas deh dari masalah plagiatisme. Hmm tapi kalo dari segi kriminalitas gak tau, cos gue main comot aja nyari kode cssnya tanpa tanya si empunya blognya. *ketawa setan* Udah yee lanjutin ke tutorialnye aje udah pada banyak yang nunggu tuh si pembaca.
Kode yang digunakan pada tutorial kali ini adalah css pseudo element :after dan :before. Kode tersebut bisa berfungsi untuk menambahan sesuatu seperti class div tertentu pada div utama yang nantinya akan kita tambahkan effect box shadow ini. Untuk menjaga agar hasil tapilan dari box shadow ini tetap keren, diperlukan positioning div yang pas. Maka dari itu, pada penggunaan pseudo element ini dipergunakanlah kode position, top, left, right, dan bottom agar penempatan div tambahan ini terkesan sempurna.
TUTORIAL CARA MEMBUAT EFEK BAYANGAN / BOX SHADOW
Berikut ini langkah-langkah cara membuat box shadow yang menurut gue unik dan sangat menarik.
1. Cari kode css yang akan kamu beri effect box shadow ini dengan masuk ke dashboard > template > edit html > proceed. Trus cari pake ctrl+f misalkan div style #content-wrapper ato #main-wrapper
2. Jika sudah ketemu masukin kode position:relative; di dalam {}
3. Tambahkan kode effect box shadownya
#content-wrapper:before, #content-wrapper:after{
content:"";
position:absolute;
top:6px;left:6px;
width:700px;
height:900px;
background:#8f5314;
z-index:-1;}
#content-wrapper:before{top:12px;left:12px;background:#62390e}
4. Atur width dan height, diisi sesuai dengan panjang dan lebar div utama
5. Jangan lupa diatur warnanya
6. Klik save template, kalo tampilan kurang fix atur sendiri ya ampe menurut lo pas dan udah sreg.
Berikut ini contoh demo dari kode css diatas
Demikian tutorial CARA MEMBUAT EFEK BAYANGAN / BOX SHADOW DI BLOG semoga bisa menambah cantik tampilan blog kamu. Jangan lupa sering-sering mampir sini ya
