CSS Efek Glowing atau Berpendar

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

Popular posts from this blog

Perbedaan JavaScript dan jQuery Beserta Contoh

Cara Menggunakan :before dan :after

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template