Membuat efek berkilau ini murni hanya dengan menggunakan kode CSS tanpa perlu menggunakan Script sehingga lebih memudahkan dalam pemasangannya di blog. Efek berkilau ini menggunakan efek transisi dari sebuah kode CSS yang dikombinasikan dengan penggunaan mouse-over atau efek hover yang ditimbulkan pada element jika pointer mouse diarahkan pada element tersebut
Baca juga Kumpulan efek mouse over atau Klik disini sehingga sobat menemukan efek seperti dibawah ini
Dibwah ini adalah beberapa demo dari tampilan efek berkilau yang saya buat. Sorot pada masing-masing objek dan lihat hasilnya
Efek Berkilau Pada Teks |
.mask-shine {
position:relative;
display:block;
width:150px;
height:64px;
text-align:center;
margin:0 auto;
background:none;
}
.mask-shine:after {
content: "";
position:absolute;
top:0px;
left:0px;
width:0%;
height:100%;
background:rgba(255,255,255,0.4);
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;}
.mask-shine:hover:after {
width:120%;
background-color:rgba(255,255,255,0);
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}
Untuk markup HTML dibuat seperti berikut ini:<div class="mask-shine">
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY2CBctitzaxzBlnyPr7WViKbuGMe0O1CHPktcm2OiEfqzfOkrtKZYUuRIVPmL45pBnSDqz6s4bHTI5GD-o6JDpfHxw57dU53LzT3OA_nrZO6mOThiKZkFVQL1eG4VYRafYqvIgBGBWyE/s1600/logoku.png"/>
</a>
</div>
* Ganti url gambar
Sedangkna untuk membuat efek berkilau pada teks, untuk kode CSSnya sama saja. Hanya perlu menyesuaikan beberapa value seperti lebar, tinggi, warna background, url gambar, dan letak posisi. Silahkan berkreasi :)
Cukup mudah kok untuk membuat efek berkilau dengan CSS di blog seperti yang telah saya jelaskan diatas, hanya perlu mengedit beberapa kode saja untuk merubah tampilannya. Okey, terimakasih :)
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@