Bagaimana Cara Membuat Efek Glowing atau Berpendar Menggunakan CSS, glowing effect using CSS.
Seorang teman, Welson Oktario, bertanya kepada saya bagaimana cara membuat efek 'glow' pada header Yujikop.com. Yaitu sebuah efek glow atau efek berpendar ketika sebuah div atau elemen di :hover, dengan kata lain ketika Anda menyorot atau meletakkan pointer mouse pada sebuah elemen maka elemen itu nampak berpendar. Membuat efek ini mudah, cukup menggunakan CSS namun hasilnya terlihat bagus.
Efek ini menggunakan code CSS berupa box shadow atau memberikan bayangan pada sebuah div atau elemen dimana shadow tersebut berbentuk kotak. Contoh,#efekglow{ -moz-box-shadow: 0 0 10px #36A6A3, 0 0 30px #36A6A3, 0 0 50px #36A6A3, 0 1px 3px #000!important; -webkit-box-shadow: 0 0 10px #36A6A3, 0 0 30px #36A6A3, 0 0 50px #36A6A3, 0 1px 3px #000!important; box-shadow: 0 0 10px #36A6A3, 0 0 30px #36A6A3, 0 0 50px #36A6A3, 0 1px 3px #000!important; }
Anda cukup mengganti warnanya dan properti lainnya menyesuaikan dengan warna website agar terlihat artistik saat diterapkan pada website Anda.
Selamat belajar.
COMMENTS