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/AVvXsEjpu629IOQ9KIcfl4B0iOZC_IYAx1OfMtt1t7-C05JQJSJXBwnhp0dklTPmSE5dfhEw5YmfYnaSDY1POx6KEDGvOrh7CcA0nDYq5KM-VtJe4wWZ4fLV4xjz4rhJEVBis-6NhOLGdA26_pw/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 :)

Cara Membuat Efek CSS Roll Hover

Sebelum membahas tentang Cara membuat efek roll hover, sebelumnya saya jelaskan mengenai Roll Hover itu sendiri. Sebenarnya penggunaan istilah roll hover ini agak kurang tepat karena istilah sebenarnya adalah Rollover namun jika dilihat dari cara kerjanya, maka saya lebih menyebutnya sebagai roll hover karena ada efek menggulung pada suatu objek saat disorot oleh mouse. Dan karena adanya efek sorot menggunakan mouse ini, pun ada istilah Mouseover

Jika dilihat dari fungsi dan cara kerjanya, baik roll hover, rollover atau mouseover merupakan salah satu cara atau teknik yang biasanya menggunakan JavaScript untuk mengubah suatu elemen atau objek ketika ada reaksi dari sorot yang menggunakan kursor mouse diatas elemen atau objek tadi. Bingung?

Sorot Disini

Sudah tidak bingung? Itulah efek roll over dengan css, sebuah efek dari rollover yang biasanya menggunakan javascript

Cara Membuat Efek CSS Roll Hover

Salin kode css berikut ini kedalam template blog Anda dengan cara berikut ini:

• Masuk ke akun blogger Anda
• Pilih dan klik menu Template >> Edit HTML >> Ctrl+F pada keyboard
• Cari kode ]]></b:skin> atau </style> dan salin kode berikut sebelum ]]></b:skin> atau </style>
  

  .buttone {
  font-family: Arial, sans-serif;
  font-size: 30px;
  background: #f9760b;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  height: 60px;
  letter-spacing: 2px;
  line-height: 60px;
  margin: 90px 0 0 0;
  min-width: 320px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: background-color 0.35s;
  -moz-transition: background-color 0.35s;
  transition: background-color 0.35s;
  overflow: hidden;
  text-decoration: none;
  }
  .buttone span {
  display: block;
  height: 100%;
  padding: 0;
  position: relative;
  top: 0%;
  -webkit-transition: top 0.35s;
  -moz-transition: top 0.35s;
  transition: top 0.35s;
   width: 100%;
  }
  .buttone span:after {
  content: attr(titles);
  display: block;
  }
  .buttone:hover {
  background-color: #eb5200;
  }
  .buttone:hover span {
  top: -100%;
  }
  

• Salin kode html untuk efek roll hover ini kedalam blog Anda. Atau sesuaikan penggunaannya menurut keinginan Anda
  <div class="buttone" >
  <span titles="Jangan Di Sorot">Sorot Disini</span>
  </div>

Bagaimana mudah bukan Cara Membuat Efek CSS Roll Hover?