Home
Writed by
On
4:26 AM , 
Monday, March 22, 2010
Hari ini k'ian sama sekali tidak berniat memposting sebuah artikel di blog kesayangan k'ian ini, namun sebuah artikel dari Dynamic Drive menggugah hati k'ian untuk menulis dan membagikannya kepada sobat sekalian. Sesuai dengan tema yang k'ian buat yakni Modifikasi tampilan Image dengan efek shadow / bayangan, fokus utama kita sudah pasti mengenai Image atau gambar.
Kalau pada postingan yang lalu k'ian buat "Efek zoom pada gambar dengan jQuery magnify", dimana pada postingan tersebut k'ian menggunakan script JQuery untuk membuat efek zoom pada gambar pada saat diklik. Pada postingan kali ini k'ian akan menggunakan format CSS code untuk membuat efek bayang pada gambar atau memberi kesan bayangan pada gambar yang kita pasang-sehingga tampilannya menjadi sedikit lebih menarik.
Sebagai contohnya bisa kamu lihat dibawah ini :
Pada gambar pertama ini k'ian akan memasang sebuah gambar dengan tampilan yang original
Pada gambar yang kedua k'ian telah menambahkan efek bayangannya, lihat dibawah ini :
Jika kamu sudah cukup paham dengan yang k'ian maksud, kita langsung menuju scriptnya :
Kalau pada postingan yang lalu k'ian buat "Efek zoom pada gambar dengan jQuery magnify", dimana pada postingan tersebut k'ian menggunakan script JQuery untuk membuat efek zoom pada gambar pada saat diklik. Pada postingan kali ini k'ian akan menggunakan format CSS code untuk membuat efek bayang pada gambar atau memberi kesan bayangan pada gambar yang kita pasang-sehingga tampilannya menjadi sedikit lebih menarik.
Sebagai contohnya bisa kamu lihat dibawah ini :
Pada gambar pertama ini k'ian akan memasang sebuah gambar dengan tampilan yang original
Jika kamu sudah cukup paham dengan yang k'ian maksud, kita langsung menuju scriptnya :
Copy kode diatas, kemudian masuk kedalam account blog kamu -->> klik menu layout -->> Edit HTML -->> jangan lupa klik "expand widget template" -->> paste kode tadi diatas kode ]]></b:skin>-->> kemudian simpan..shadow{box-shadow: 8px 8px 10px #424242;-webkit-box-shadow: 8px 8px 10px #424242;-moz-box-shadow: 6px 6px 10px #424242;filter: progid:DXImageTransform.Microsoft.dropShadow(color=#424242, offX=8, offY=8, positive=true);}
Langkah selanjutnya adalah penerapan pada Image atau gambar, ambil sebuah url gambar, contoh :
<img src="http://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg">Kemudian tambahkan kode class="shadow" didalamnya, maka hasilnya akan seperti ini :
<img src="http://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg" class="shadow">Selanjutnya simpan, dan lihat hasilnya
Nb : Pada contoh gambar diatas efek bayang berada di sebelah kanan dan bawah, sedangkan untuk merubah efek bayangnya disamping kiri dan atas. kamu cukup merubah kode CSS dan menambahkan tanda "min" (-) pada angkanya, contohnya sebagai berikut :
hasilnya seperti ini :.shadow{box-shadow: -8px -8px 10px #424242;-webkit-box-shadow: -8px -8px 10px #424242;-moz-box-shadow: -6px -6px 10px #424242;filter: progid:DXImageTransform.Microsoft.dropShadow(color=#424242, offX=-8, offY=-8, positive=true);}
Related Post :
Aplikasi%20blog
- cara download video dari Youtube, Metacafe, Dailymotion
- Cara menempatkan Text didalam gambar
- Widget Recent Post dengan Gambar
- Format Comment blog Baru dengan Facebook comment
- Award persahabatan dari K'ian buat Sobat tercinta
- Cara Pasang icon "Like this" Facebook di Blog Kamu
- New Menu Navigasi Ubah tampilan Blog jadi lebih elegant
- External Link, Compres CSS code jadi lebih baik pada Blog
- Efek zoom pada gambar dengan JQuery Magnify
- Cara Pasang Random post disidebar Blog
- Cara memasang kode HTML,CSS,Javascript didalam postingan
- Cara membuat efek scrol pada kotak komentar sahabat
- Cara Mendapatkan External link dari Google Sites
- Cara pasang Pagenavigation number
- Join with Zorpia site, take your Dollar
Tips
- 30 Menit Latihan "Freestyle" Bakar 600 Kalori
- Menganggur, salah satu faktor penyebab pria mandul
- 6 Penyakit Kronis Kini Intai Kaum Muda
- Ingin Seks Sehat, Hindari dari Stres!
- Seks Ternyata Bisa Bikin Cantik
- Nutrisi Yang Mampu Menjaga Kesehatan Vagina
- Inilah Proses yang pada Tubuh Terjadi Saat Tidur Siang
- Cegah Rambut Beruban dengan Konsumsi Beras Merah
- Minum Air Putih Berlebihan, Ternyata Bisa Berbahaya
- 8 Tragedi Kecelakaan Pada Vagina
- Tips Mengatasi Ketombe Yang Membandel di Kepala
- Inilah Olahraga Yang Bisa Bikin Seksi
- Tips Agar Mr P Lebih Perkasa
- Mau turun kolestrol, minum susu kedelai
- Ingin anak laki-laki, coba dengan "Doggy Style"
- Tips agar rambut tak menjadi kusam
techno
- April,AMD Rilis Kartu Grafis Dual Core
- Facebook Kembangkan Aplikasi Melacak Teman
- Koneksi Internet Indonesia Paling Lambat Di Asia
- Google Drive Siap Rilis Pekan Depan di Windows, Mac, Android, serta IOS
- Opera 12 Beta Siap Dirilis
- Kenapa harus BB yang dipilih??
- Kecepatan Internet Indonesia Bisa Kalahkan AS
- Asus Zenbook, Produk Baru dari Asus Yang Menawan
- "Remote Desktop" Fitur Baru dari Chrome, Telah di Rilis
- Tips Sukses Berjualan di Media Online
- Kiat Mengajarkan Si Kecil akan Komputer Aman
- Panasonic Ciptakan Robot Pencuci Rambut
- Adobe Flash Player 11, Sekarang Sudah Bisa diUnduh
- Booting Windows 8 Ternyata Jauh Lebih Cepat dari Monitor
- Bos Mozilla Pertahankan Siklus Baru Peluncuran Firefox
- Komunitas Blogger Indonesia Dalam Faceblog
pertamax gan!! Ane duluan..
Mantep ni tips kek.a. Coba dulu ...Replay
@ Sonic : Yoi sob...silahkan dicoba deh...!! ...Replay
gambarnya jd lebih asik dg tips ini .. ...Replay
tp kok kyk g ad bda y? ...Replay
@ aan : emang bener sob,pasti lbh menarik...!!!
@ Sonic : coba periksa lagi deh kodenya ada yg kurang apa nggak...??? ...Replay
wih keren mas kian :) musti di coba tuh ...kan blog ku banyak gambar nya :) kayanya lebih menarik...hehe ...Replay
kalo css shadow itu untuk css3 sob...kalo browsingan yg skrg blon bs ngefek sempurna...hehehehe
kalo mau shadownya pake gambar...hehehe ...Replay
boleh juga ni, tapi saya jarang ada gambar juga :) ...Replay
boleh juga nih dicobain.!!!! infonya mantabbb... ...Replay
mas, bleh bgi tutor ga cra masang header image??? ...Replay
keren ei.
follow blog saya. ok
http://www.holidaymamboo.com ...Replay
@angga's : Oke sob... ...Replay