Membuat Efek Berkilau Dengan CSS Di Blog

Membuat Efek Berkilau Dengan CSS Di Blog merupakan artikel terbaru yang saya buat setelah 2 minggu tidak melakukan update untuk blog ini. Tidak adanya update untuk blog ini dikarenakan ada kesibukan di offline yang tidak bisa dibiarkan dan harus fokus untuk dikerjakan, dan Alhamdulillah semuanya lancar dikerjakan dan akhirnya kembali ke blog ini dengan artikel membuat efek berkilau dengan CSS di blog :)

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 Anda menemukan efek seperti dibawah ini

Rugi kalau tidak dibaca..

DEMO Efek Berkilau

Dibwah ini adalah beberapa demo dari tampilan efek berkilau yang saya buat. Sorot pada masing-masing objek dan lihat hasilnya

Efek Berkilau Pada Teks

Jika Anda tertarik untuk membuat efek berkilau dengan CSS di blog tersebut didalam blog Anda khususnya untuk judul logo blog seperti yang terlihat pada DEMO diatas, caranya pun sangat mudah dengan menyalin kode CSS berikut ini kedalam kode template blog Anda

.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/AVvXsEj3m4lYUCXoIacn4fUfX5YglNf9bp-6Wc1ejGh7auWxHyhyphenhyphenPG2qEYdI9emOL74ynF3WKfc2HYxDtSTtBteAkULsCMBsb_vhfPd_dWbkQcfpFkh-oZYkhvpRkDNBA3b8BmE0LN1TDwsnt9Y/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 :)

Membuat Efek Berkilau Dengan CSS Di Blog 2014-11-09T13:59:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni