Cara Membuat Efek Blur Pada Menu Menggunakan CSS3

22/01/2016    Faizal Rafik    1551     Website

Hallo teman-teman DUMET School, pada tutorial saya kali ini, saya akan mengajarkan bagaimana caranya membuat efek blur pada menu menggunakan CSS3 transitions. Seperti yang kita ketahui, di CSS kita juga bisa membuat animasi-animasi atau efek-efek yang sangat brilian dan hasilnya tidak kalah bagusnya ketika kita membuatnya menggunakan jQuery. Nah di bawah ini kita akan mencoba membuat efek Blur Pada Menu menggunakan Property CSS3 yaitu Transitions. Jadi nanti ketika kalian arahkan kursor pada salah satu menu maka menu yang lainnya akan menjadi Blur. Nah untuk membuat nya kalian bisa mengikuti langkah-langkah nya di bawah ini.

Pertama kalian bisa buat satu file dengan nama index.html, dan tuliskan struktur HTML di bawah ini didalam file index.html yang sudah kalian buat.

Kemudian untuk CSS nya kalian bisa tuliskan dari baris program berikut.

Maka hasilnya seperti di bawah ini.

See the Pen PZEvMV by Dumet_School (@dumet_school) on CodePen.

Download

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More