Rabu, 14 Agustus 2013

Cara Memberikan Efek Shadow Atau Bayangan Gambar Pada Blog


Apakahh sobat ingin memperindah blog anda ? Misalnya ingin menambahkan efek shadow / bayangan pada gambar, Kalau ingin menambahkan efek shadow / bayangan saya punya caranya, Berikut langkah
-  langkah membuat shadow pada gambar :

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:

shadow effect maskolis

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.

shadow effect maskolis

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"/>
 Sekian dulu tutorial cara membuat efek bayangan gambar pada blog.
Semoga bermanfaat dan selamat mencoba.


Ditulis Oleh : Rizky 13

Selladrt Sobat sedang membaca artikel tentang Cara Memberikan Efek Shadow Atau Bayangan Gambar Pada Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini. Silakan di rubah dan sesuwekan sesuka selera sobat

:: Kunjungi Sumbernya ::

Tidak ada komentar:

Posting Komentar

Followers

Top Komentar

Total Tayangan Halaman

Playboy Pink