Hallo Teman-teman, Bertemu kembali dengan saya diwebsite ini. Dihari yang cerah dan indah ini semoga teman-teman masih diberikan nikmat dan kesehatan agar dapat kembali mencari atau menambah ilmu seputar dunia website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Effect Blur dengan CSS. Didalam software design seperti contohnya adobe photoshop terdapat sebuah tool yang dinamakan blur tool dan tools tersebut berfungsi untuk membuat effect blur pada object berupa text ataupun gambar.

Dan jangan risau, didalam pemrograman design website ini, terdapat property CSS yang dimana fungsi dan tujuan sama seperti blur tool pada photoshop. Bagaimana penasaran kan ? oke kalau begitu kita langsung saja mulai mempraktekannya dalam Cara Membuat Effect Blur dengan CSS.

Pertama-tama teman-teman buka text-editor yang teman-teman gunakan, lalu kemudian ketik script HTML seperti dibawah ini :

Jika sudah seperti diatas, kemudian teman-teman simpan dengan nama blur.html lalu langkah selanjutnya teman-teman ketik script CSS dibawah ini :

Script CSS diatas kita menggunakan CSS internal jadi hanya tinggal menambahkan tag style dibawah tag title atau diantara tag head. Dan penjelasan dari script diatas adalah untuk membuat effect blur disini kita menggunakan property filter dengan nilai blur(2px) jadi effect blur setebal 2px jika ingin lebih blur silahkan tambahkan nilai 2pxnya menjadi 10px atau terserah teman-teman. oke  Jika sudah silahkan teman-teman jalankan/run dibrowser yang teman-teman gunakan maka hasilnya akan seperti pada gambar dibawah ini :

cara-membuat-effect-blur-dengan-css

Jika hasilnya sudah seperti pada gambar diatas maka teman-teman dinyatakan telah berhasil dalam Cara Membuat Effect Blur dengan CSS. Cukup mudah dan menarik ya teman-teman, ternyata di CSS pun bisa mengatur atau mempunyai tool blur.

Oke kalau begitu cukup sekian pembahasan dari saya tentang Cara Membuat Effect Blur dengan CSS semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih