25.11.14

Cara Memberi Efek Bayangan Pada Gambar Postingan

Dalam sebuah artikel mungkin saja gambar hanya menjadi sebuah pelengkap kesempurnaan dari sebuah artikel, namun tidak menutup kemungkinan bahwa keberadaan gambar juga bagi sebagian dianggap penting guna untuk mendukung keakuratan data yang dimuat dalam sebuah artikel tersebut. Terlepas dari itu semua saya tidak akan mempersoalkan mengenai hal tersebut diatas, karena bagaimana pun tujuan dari artikel yang saya publish ini hanya untuk memberikan trik atau sebuah tutorial mengenai mempercantik tampilan sebuah gambar dan tentang bagaimana caranya membuat sebuah efek bayangan pada tampilan gambar.

Sebelumnya saya pernah juga memposting tentang cara membuat gambar yang bisa berubah tampilan ketika terkena kursor atau tersorot kursor. Dan untuk lebih jelasnya silahkan buka link berikut jika anda ingin membacanya juga:. Cara membuat gambar berubah tampilan ketika terkena kursor.

Tidak jauh berbeda dengan trik diatas, maka sebenarnya trik kali ini pun hanya memanfaatkan 2 buah gambar yang harus anda sisipkan dalam sebuah kode. Yang membedakannya mungkin karena pada trik kali ini kodenya menggunakan CCS. Hingga efek bayangan gambar yang terlihat akan begitu nampak seperti pantulan dalam sebuah cermin. Sebagai preview perhatikan gambar berikut ini:



Nha, untuk membuat tampilan gambar seperti diatas tersebut, caranya anda hanya cukup mengcopy kode berikut ini. Jika anda akan mempublikasikannya dalam sebuah postingan maka anda diharuskan merubah tab mode penulisan artikel dari 'Compose' menjadi 'HTML'
<div style="position: relative;">
<img src="http://2.bp.blogspot.com/-Y5Psf8T4afo/VCAuSdzUBRI/AAAAAAAABSM/3TrHjuFwOHE/s1600/forsale%2Binazuma%2B250cc.png" /></div>
<div style="-khtml-opacity: 0.2; -moz-opacity: 0.20; filter: alpha(opacity=20); margin-top: -10px; opacity: 0.2; position: relative;">
<img src="http://2.bp.blogspot.com/-KJeN_brX5Wg/VHNc8PVf4iI/AAAAAAAABb8/f9CpHTa5Jcc/s1600/forsale%2Binazuma%2B250cc.png" /></div>


Bagaimana? Sejauh ini anda hanya perlu mengganti masing-mamsing url gambar dalam kode diatas, yang sengaja saya warnai dengan warna merah. Silahkan ganti ke 2 url gambar tersebut dan kemudian publikasikan gambar anda.  Semogga bermanfaat  :D

→ About the author

Moch Adnan adalah Admin Blog yang mempunyai ketertarikan dengan Dunia Blogging,kamu bisa Menemukan saya dan memfollow saya di Google + Twitter Facebook


Terima Kasih Telah Membaca Artikel Cara Memberi Efek Bayangan Pada Gambar Postingan . Jika Anda tertarik dengan artikel seperti ini, silahkan untuk berlangganan artikel Gratis dengan cara mengetikkan alamat e-mail anda pada kotak berlangganan berikut:
Subscribe via Email

Silahkan tinggalkan komentarnya
Mohon untuk tidak memasukkan link hidup dalam berkomentar