Rabu, 25 Juli 2018

Cara Membuat Text Blur Dengan CSS 3

Cara Membuat Text Blur Dengan CSS 3


Oke kali ini saya akan membagikan tutorial bagaimana cara membuat text blur dengan css. Saya sebenarnya juga tidak tahu, fungsi text blur di sebuah website itu untuk apa, tetapi mungkin ada yang mencarinya dan juga kebetulan saya tahu caranya... jadi kenapa tidak buat tutorial?

Oke, masuk ke tutorial, pertama persiapkan dahulu text editor kalian lalu buat file html dan cssnya. Bila kalian sudah menyiapkannya silahkan copy paste code dibawah ini.

Html :



CSS :



Keterangan :
- Kalian bisa mengganti nama ".blur" menjadi apapun yang kalian inginkan asal namanya sama dengan nama class yang kalian panggil di file html.
- Jadi konsepnya adalah, kita menghilangkan tulisan aslinya, lalu kita tambahkan bayangan pada text yang ingin di blur, dan jadilah text blurnya.

Kalian bisa lihat demonya dibawah ini.

See the Pen Font Blur by Eko Setya (@ekosetya) on CodePen.


Gimana? mudah bukan? untuk tutorial membuat text blur saya cukupkan sampai disini. Kalau kalian masih bingung atau punya pertanyaan maupun request silahkan tulis di kolom komentar. Dan sampai jumpa di artikel selanjutnya.


EmoticonEmoticon