Tutorial Digital cara buat gambar kabur dengan HTML. Berikut ini contoh gambar asli yang sebenarnya :
Dan dibawah ini adalah contoh hasil gambar yang dikaburkan dengan kode html
Cara membuat gambar kabur dengan html :
1) Siapkan satu buah gambar.
2) Upload gambar ke hosting.
3) Untuk menampilkan gambar yang sebenarnya / gambar asli pada browser gunakan kode html dibawah ini :
<img src="http://1.bp.blogspot.com/_Lt45Hiu708Q/SwbjXXJzm7I/AAAAAAAAAMw/dIUsmRHxzgw/s1600/mawar2.jpg"/>Ganti kode yang berwarna merah dengan alamat url tempat anda menyimpan gambar.
4) Untuk menampilkan gambar yang kabur pada browser gunakan kode html dibawah ini :
<img src="http://1.bp.blogspot.com/_Lt45Hiu708Q/SwbjXXJzm7I/AAAAAAAAAMw/dIUsmRHxzgw/s1600/mawar2.jpg" style="opacity: 0.4;" />
Ganti kode yang berwarna merah dengan alamat url tempat anda menyimpan gambar. Untuk mengatur kadar kekaburan kualitas gambar digunakan perintah opacity dan nominal angkanya bisa anda rubah sendiri sesuai dengan yang anda inginkan.Ukuran kualitas normal / asli kalau dinominalkan angkanya 1. Semakin kecil nominal angka maka semakin makin kaburlah gambar yang dihasilkan. Silahkan dicoba sendiri ya.
Dengan metode Cara buat gambar kabur dengan html anda juga bisa menggunakan efek kabur terang atau terang kabur agar tampilan gambar anda terlihat menarik di browser pada saat pointer mouse diarahkan ke dalam gambar dan pada saat pointer mouse diarahkan keluar gambar .
Berikut Contohnya :
Gambar dengan efek kabur terang ( Arahkan pointer mouse ke gambar untuk melihat efek kabur terang yang dihasilkan) :
Gambar dengan efek terang kabur ( Arahkan pointer mouse ke gambar untuk melihat efek terang kabur yang dihasilkan) :
Untuk tutorialnya bisa anda lihat pada tutorial digital Cara buat efek gambar kabur terang dengan html bukan di Cara buat gambar kabur dengan html.
Statistik
Post a Comment
klik disini jika g bisa komen