Efek Mengkilap Pada Ikon Gambar

Efek Mengkilap Pada Ikon Gambar - Efek mengkilap pada sebuah ikon gambar ketika mouse diarahkan pada ikon gambar tersebut (:hover) dengan menggunakan CSS, banyak efek ikon gambar yang bisa kita buat, baik dengan efek berputar, show up ataupun efek yang lainnya.

Namun pada kesempatan ini kita akan membuat Efek Mengkilap pada Ikon Gambar hanya dengan menggunakan CSS, seperti apa efek tersebut? Kita bisa melihatnya melalui tombol demo dibawah.

Membuat Efek Mengkilap Pada Ikon Gambar

CSS

a.mengkilap { 
  display: block; 
  background: url("http://dezige-in.googlecode.com/svn/trunk/notrans.png") 0 0 no-repeat; 
  height: 100px; 
  width: 100px; 
  overflow: hidden; 
}

a.mengkilap span { 
  display: block; 
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNKXRjFrhNvXYOw_n0P4zit9TNttG3pyQIr4it8U8RXrZwCPBUC4OjUVtDlq6EjzkRUm3pFL84lutjgD0-rJjbJ_2KNGcDHaWiPk1xpXaPOdQKnkTZc-SqRH9ulEXwoRlpx1O1GrFuYhb/s1600/shine.png") -60px -80px no-repeat; 
  transition-property: all; 
  transition-duration: .5s;  
  height: 100px; 
  width: 100px; 
  border-radius: 80%;
}
  
a.mengkilap:hover span {
  background-position: 100px 100px; 
 }

Pada CSS diatas sudah saya masukan alamat gambar, supaya kita bisa melakukan modifikasi dan mempermudah kita dalam memahami bagaimana kita membuat Efek Mengkilap pada Ikon Gambar

Dan HTML yang kita pergunakan adalah seperti ini:

HTML

<a href="/" class="mengkilap"><span></span></a>

Kita bisa pergunakan efek mengkilap pada ikon gambar untuk gambar-gambar yang ada blog kalian.

• Demo

Semoga dengan adanya cara membuat efek mengkilap pada ikon gambar bisa menambah kosa dalam hal efek-efek untuk sebuah ikon gambar.

Semoga bermanfaat.

Background Gambar Noise Untuk Warna Lebih ber-Tekstur

Background Gambar Noise Untuk Warna Lebih ber-Tekstur - Pilihan background untuk template sebagai dasar desain tampilan blog atau web, bisa menggunakan warna (color) ataupun gambar (image), kedua cara tersebut mempunyai kelebihan dan kekurangan masing-masing, untuk yang menyukai warna sebagai backgroundnya tapi menginginkan background gambar ditampilkan bersamaan tanpa tumpang tindih (menutupi salah satu background), kalian bisa menggunakan background yang satu ini "Noise Background".

Background Gambar Noise Untuk Warna Lebih Ok - Gambar Noise sebagai background template merupakan jenis file gambar yang sifatnya transparan (transparent) dan memiliki tekstur (texture) lembut didalamnya, jika disatukan dengan background yang menggunakan warna hex ataupun rgb bisa menjadikan warna background tersebut menjadi lebih lembut (soft) dan enak untuk dipandang (menurut saya) karena noise background yang akan kita download ini memiliki tekstur yang bermacam dan sangat cocok untuk modifikasi background template atau background elemen blog.

Dibawah ini ada 6 contoh background noise yang bisa kalian download dan pergunakan untuk background template kaliana, dari mulai tekstur yang halus sampai tekstur kasar.

6 Background Tekstur Noise

Diatas menggunakan background warna yang lebih cerah dari background template ini supaya lebih mudah untuk membedakan segi kerapatan dan kerenggangan tekstur noise tersebut, bisa kalian melihatnya? jika tidak, kiranya sudah waktunya untuk menggunakan kaca mata heu...heu...heu...