Membuat Efek Shadow Pada Gambar di Blog

Pernahkah anda melihat sebuah gambar dalam blog teman anda yang ada bayangannya? atau yang terlihat menarik menurut anda. Nah, kali ini saya akan mencoba memberikan sedikit tips agar gambar dalam blog kita terlihat menarik dengan menambahkan efek shadow di dalamnya.

Efek shadow sendiri memiliki struktur sebagai berikut:

box-shadow: <horizontal> <vertical> <blur> <color>

Keterangan:

• horizontal: mengatur shadow secara horisontal/mendatar. Sebagai contoh: kita memberi nilai 6px, maka bayangan akan melebar sebesar 6 pixel ke sebelah kanan. Sebaliknya kalau memberi nilai minus (-6px) maka bayangan akan melebar sebesar 6 pixel ke sebelah kiri.
• vertical: mengatur shadow secara vertikal/atas bawah. Sebagai contoh: kita memberi nilai 8px, maka bayangan akan melebar sebesar 8 pixel ke bawah. Sebaliknya jika memberi nilai -8px maka bayangan akan melebar sebesar 8 pixel ke atas.
• blur: untuk mengatur efek kabur. Misalkan kita memberi nilai 10px, maka efek kabur tersebut akan melebar sebesar 10 pixel. Namun jika diberi nilai 0px, maka tidak akan ada pengaruh/perubahan.
• color: untuk mengatur warna pada shadow/bayangan itu sendiri.

Jika anda sudah memahami struktur dari CSS untuk membuat efek shadow pada gambar di blog, maka kita langsung praktekan.

Contoh 1
Saya akan membuat CSS untuk efek shadow ini dengan struktur dan nilai-nilai sebagai berikut, lalu nanti letakan kode di bawah ini tepat di atas kode ]]></b:skin>:

.shadow1{
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
}

Untuk mengaplikasikannya pada gambar kita hanya perlu menambahkan elemen class di dalam syntax. Seperti ini: 

<img class="shadow1" src="image-url-here" alt="alternative-text-image-here"/>

Maka hasil gambarnya akan seperti gambar dibawah:

Contoh 2
Saya akan membuat CSS untuk efek shadow ini dengan struktur dan nilai-nilai sebagai berikut, lalu nanti letakan kode di bawah ini tepat di atas kode ]]></b:skin>:

.shadow2{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
}

Untuk mengaplikasikannya pada gambar kita hanya perlu menambahkan elemen class di dalam syntax. Seperti ini: 

<img class="shadow2" src="image-url-here" alt="alternative-text-image-here"/>

Dan hasilnya akan seperti gambar di bawah ini:

Demikianlah tutorial membuat efek shadow pada gambar di atas yang mungkin bisa teman-teman kembangkan dan modifikasi sesuai selera masing-masing. Semoga bermanfaat untuk menghias template kita yang sekarang.

Selamat mencoba.
Special thanks to Maskolis.

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.