Hallo teman-teman balik lagi di tutorial Dumet School, kali ini saya ingin membahas tentang Cara Membuat Gambar Menjadi Blur Menggunakan Css3, ternyata bukan hanya di photoshop saja yah kita bisa membuat effect blur pada gambar, di css3 pun kini sudah menyediakan fitur untuk ngeblur sebuah gambar, sehingga kita bisa menyesuaikan sebagaimana mau kita ngeblurnya, caranya sangat gampang, penasaran?
kita langsung praktekan saja yah, coba teman-teman ikuti atau bisa langsung salinkan scriptnya dibawah sini
<div class="gambar"> <div class="asli"> <img src="https://www.kursuswebsite.org/wp-content/uploads/2015/11/Alasan-Mengapa-Anda-Harus-Belajar-IT-di-Dumet-School.jpg" alt=""> <p> ini gambar asli </p> </div> <div class="blur"> <img src="https://www.kursuswebsite.org/wp-content/uploads/2015/11/Alasan-Mengapa-Anda-Harus-Belajar-IT-di-Dumet-School.jpg" alt=""> <p class="biru"> dan ini gambar yang di blurkan </p> </div> </div>
.gambar { overflow: hidden; width: 500px; margin: auto; }
.asli { float: left; width: 200px; }
p { text-align: center; width: 150px; color:#fff; font-weight: bold; background: red; padding:10px; }
.biru { color: #fff; background: blue; }
.blur { float: right; width: 200px; }
.blur img { filter:blur(8px); }
Jika sudah disave dan jalankan dibrowsernya, maka jika berhasil maka hasilnya akan seperti ini :
cukup mudah bukan?sekian tutorial tentang Cara Membuat Gambar Menjadi Blur Menggunakan Css3, sampai bertemu diartikel selanjutnya dan sampai jumpa .
#KeepLearn
#IsmetMA