Cara Membuat Gambar Menjadi Blur Menggunakan Css3

Hallo teman-teman balik lagi di panduan Source Code Aplikasi, kali ini saya ingin membahas mengenai Cara Membuat Gambar Menjadi Blur Menggunakan Css3, ternyata bukan hanya di photoshop saja yah kita dapat merancang effect blur di gambar, di css3 pun kini telah menyediakan fitur bagi ngeblur sebuah gambar, sehingga kita dapat menyesuaikan dari yang mau kita ngeblurnya, caranya amat gampang, penasaran?

kita seketika praktekan saja yah, coba teman-teman ikuti atau dapat seketika salinkan scriptnya dibawah sini

<div class=gambar>
<div class=asli>
<img src=https://kursuswebdesign.org/wp-content/uploads/2015/11/Alasan-Kenapa-Kamu-Mesti-Belajar-IT-di-Dumet-School.jpg alt=teman balik lagi di panduan Source Code Aplikasi Cara Membangun Gambar Menjadi Blur Menggunakan Css3>
<p> ini gambar asli </p>
</div>
<div class=blur>
<img src=https://kursuswebdesign.org/wp-content/uploads/2015/11/Alasan-Kenapa-Kamu-Mesti-Belajar-IT-di-Dumet-School.jpg alt=teman balik lagi di panduan Source Code Aplikasi Cara Membangun Gambar Menjadi Blur Menggunakan Css3>
<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); }

Kalau telah disave dan jalankan dibrowsernya, karenanya bila berhasil karenanya hasilnya akan seperti ini :

lumayan gampang bukan?demikianlah panduan mengenai Cara Membuat Gambar Menjadi Blur Menggunakan Css3, hingga bertemu diartikel berikutnya dan hingga jumpa .

DEMO

#KeepLearn

#IsmetMA

Sumber https://kursuswebsite.org