Pertama ini membuat tutorial tentang CSS3. Pada postingan kali ini akan membahas tentang efek shadow atau bayangan yang ada pada image atau gambar. Kita akan bermain sedikit dengan CSS dan untuk melakukannya tidak sulit alias gampang. Oke, mari kita sama-sama mempelajari image-shadow ini.Elemen dari shadow itu sendiri adalah sebagai berikut:
box-shadow: <horizontal> <vertical> <blur> <color>Maksudnya adalah:
- Horizontal : Mengatur shadow atau bayangan secara horizontal atau mendatar. Dan untuk nilai positif seperti ( 5px ), maka bayangan akan bergeser ke sebelah kanan selebar 5 pixel. Sebaliknya untuk nilai negatif seperti ( -10px ), maka bayangan akan bergeser ke sebelah kiri selebar 10 pixel.
- Vertical : Mengatur shadow atau bayangan secara vertikal. Dan untuk nilai positif seperti ( 5px ), maka bayangan akan bergeser ke bawah selebar 5 pixel. Sebaliknya untuk nilai negatif seperti ( -10px ), maka bayangan akan bergeser ke atas selebar 10 pixel.
- Blur : Mengatur efek blur atau kabur pada shadow. Saat diatur ( 0px ) maka tidak akan tampak efek kabur ini. Misal diatur dengan angka ( 10px ), maka efek kabur ini akan tampak sepanjang 10 pixel.
- Color : Mengatur warna shadow.
Saya akan memberikan contoh gambar yang menggunakan beberapa pengaturan pada shadow. perhatikan contoh-contoh berikut:
Untuk membuat efek seperti contoh pertama di atas. Letakkan kode berikut di atas kode ]]></b:skin>
.shadow1{
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
}Dan untuk penggunaannya kita cukup menambahkan elemen class di dalam syntax. Menjadi seperti ini:
<img class="shadow1" src="image-url-here" alt="alternative-text-image-here"/>Berikut contoh gambar yang menggunakan shadow namun menggunakan efek blur.
Untuk membuat efek seperti contoh pertama di atas. Letakkan kode berikut 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;
}Dan untuk penggunaannya kita cukup menambahkan elemen class di dalam syntax. Menjadi seperti ini:
<img class="shadow2" src="image-url-here" alt="alternative-text-image-here"/>Sip, itu adalah tutorial dasar. Silakan anda kembangkan sesuai kreativitas. Mungkin anda bisa menggunakannya pada blog anda, atau untuk menghias template. Up to you, and Have Fun![ardi33]
Tags :
cara membuat shadow pada image, menyisipkan bayangan pada gambar menggunakan css3, membuat efek halaman shadow css 3, CSS3, css shadow border, membuat efek kotak di photho shop, css 3 tutorial, css 3 box shadow, box shadow css 3, tutorial css3, tutorial css 3, Script text bayangan, efek shadow, memberikan evek bayangan belakang Foto dari Photoshop, Memberi Efek Bayangan, kode radius wordpress di ie, kenapa text berbayang, foto efek bayangan, efek shadow photoshop, efek shadow pake css, memberi efek pada blog, memberi efek pada blogger, tutorial membuat foto bayang dengan photoshop, membuat efek shadow pada photoshop, memberi efek warna dengan css, membuat efek bayangan halaman html, membuat css border efek bayangan, memberikan efek shadow pada kotak dengan css, memberikan efek shadow pada gambar, shadow in web page
Ada yang saya dapatkan nih karena begadang, hehe. Info untuk program yang paling gampang yang kita ikuti dan yang lagi marak belakangan ini, ReadBud. Program rating artikel ini ternyata sudah membayar member-nya. Saya berhasil mendapatkan 
Bagi anda yang suka bermain Twitter, ada salah satu media dimana Anda bisa lebih mudah dalam mengikuti jejak seseorang pada Twitter (Follow) atau sebaliknya (Unfollow). Mengapa demikian? Ya, dengan Buzzom, kita bisa langsung 
Hostgator, provider hosting terkemuka dan terpercaya yang senantiasa memuaskan pelanggan dengan layanan hostingnya yang mantab, kini mengeluarkan code buat pembelian pada bulan pertama. Memang tidak gratis namun dengan code ini saja kita sudah 
