Energy Saving Mode CSS3 dg Kode CSS & Efek Lebih Simpel

Energy Saving mode yang dibuat menggunakan css3 ini mempunyai kode sekaligus efek lebih sederhana dibandingkan yang telah kita launcing pada bulan Oktober 2010. Cara membuatnya masih sama persis dengan posting terdahulu, hanya anda perlu mengganti seluruh kode CSS dengan yang baru. Satu lagi yang berbeda adalah pada penggunaan background image. Energy Saving Mode CSS3 kali sama sekali tidak menggunakan background image karena telah kita ganti dengan css3 background gradient.

D E M O

Energy saving mode pada demo menggunakan background gradient berwarna hijau, sedangkan yang akan kita buat berwarna hitam. penggunaan warna background hitam polos dimaksudkan memberi efek transformasi dan transisi warna saat energy saving mode terbuka (tersentuh cursor).

Demo : Energy Saving Mode CSS3 dg Kode dan Efek Lebih Sederhana

Kode CSS:

*, body .bgsGR_esm{
      margin:0;
      padding:0;
}
body .bgsGR_esm{
      position:fixed;
      width:98%;
      top:0;
      left:0; /* original code by: gubhugreyot.blogspot.com */
      height:97%;
      opacity:.99;
      filter:alpha(opacity=99);
      -ms-filter:alpha(opacity=99);
      background:#000;
      border:10px solid #666;
      border-bottom:30px solid #666;
      z-index:99999999;
      transition:all 6s ease-in-out 60s;
      -o-transition:all 6s ease-in-out 60s;
      -moz-transition:all 6s ease-in-out 60s;
      -webkit-transition:all 6s ease-in-out 60s;
      -ms-transition:all 6s ease-in-out 60s;
}
body:hover .bgsGR_esm{
      border-color:#F00;
      background:#930;
      width:50%;
      height:3%;
      left:25%;
      top:40%; /* original code by: gubhugreyot.blogdetik.com */
      transition:3.5s ease-out;
      -o-transition:3.5s ease-out;
      -moz-transition:3.5s ease-out;
      -webkit-transition:3.5s ease-out;
      -ms-transition:3.5s ease-out;
}
body:hover .bgsGR_esm,body:hover .bgsGR_esm p.esm1,body:hover .bgsGR_esm p span.esm2,body:hover .bgsGR_esm p span.esm3,body:hover .bgsGR_esm .by_gubhugreyot{
      transition:3s;
      -o-transition:3s;
      -moz-transition:3s;
      -webkit-transition:3s;
      -ms-transition:3s;
      z-index:-10;
      opacity:.0;
      filter:alpha(opacity=0);
      -ms-filter:alpha(opacity=0);
}
body .bgsGR_esm p.esm1{
      margin:0; /* original code by: gubhugreyot */
      padding:0;
      width:92%;
      height:100%;
      background:transparent;
      font-size:100px;
      font-family:Serif,Times New Roman;
      color:#333;
      text-shadow:1px 1px 2px #ccc;
      position:relative;
      margin-top:200px;
      line-height:20px;
      font-weight:bold;
      text-align:center;
      display:block;
      margin-left:auto;
      margin-right:auto;
}
.bgsGR_esm p span.esm2{
      font-size:18px;
      opacity:.5;
      filter:alpha(opacity=50);
      -ms-filter:alpha(opacity=50);
      display:block;
      text-align:center;
      margin:-10px auto;
      font-weight:normal;
      padding:2px 8px;
      background:#000;
      border:1px solid #333;
      color:#00f;
      text-shadow:none;
      font-family:Arial,Helvetica,sans-serif;
}
.bgsGR_esm p span.esm3{
      color:#ccc;
      font-family:Tahoma,Arial,Helvetica;
      display:block;
      margin:10px auto;
      background:#111;
      background:-moz-linear-gradient(top,#111 0,#666 100%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
      background:-webkit-linear-gradient(top,#111 0,#666 100%);
      background:-o-linear-gradient(top,#111 0,#666 100%);
      background:-ms-linear-gradient(top,#111 0,#666 100%);
      background:linear-gradient(top,#111 0,#666 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
      opacity:.6;
      filter:alpha(opacity=60);
      -ms-filter:alpha(opacity=60);
      width:250px;
      text-shadow:1px 1px 1px #000;
      border:1px solid #333;
      border-radius:4px;
      padding:2px 10px;
      font-size:12px;
      font-weight:normal;
      line-height:16px;
}
.bgsGR_esm .by_gubhugreyot{
      margin-left:30px;
      text-align:left;
      color:#015828;
      font-size:12px;
      font-weight:normal;
      position:absolute;
      top:550px;
      width:100%;
      height:20px;
      left:0;
}
.bgsGR_esm .by_gubhugreyot span.esm4{
      color:#aaa;
      font-style:italic;
}

xHTML

<div class='bgsGR_esm'><p class='esm1'>gubhug reyot<br/><span class='esm2'>Energy Saving Mode Using CSS3</span><br/><br/><span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p><div class='by_gubhugreyot'>Copyright * Feb 2012 * <span class='esm4'>gubhugreyot.blogspot.com</span> - All rights reserved</div></div>

Catatan/Keterangan

1. Simpan kode CSS di atas kode ]]></b:skin>
2. Simpan xHTML di bawah kode <body> , atau
   <body expr:class='"loading" + data:blog.mobileClass'>
3. Untuk mengatur durasi waktu Energy Saving Mode lakukan perubahan nilai (60s) pada syntax body .bgsGR_esm(kode paling atas!):
   

   all 6s ease-in-out 60s;

   nilai 60s; menciptakan durasi 60 detik energy saving secara rutin bekerja menutup layar dengan background hitam. Untuk merubah durasi menjadi 5 menit maka nilai menjadi 5x60 = 300s. Untuk durasi yang berbeda silahkan hitung sendiri.
4. Ganti Teks gubhug reyot yang ber-warna merah dengan nama blog anda atau teks lain.
5. Panduan yang lebih detail untuk memasang dan menyimpan kode Energy Saving Mode dapat dibuka melalui link di bawah ini:
   Cara Pasang Kode Energy Saving Mode CSS3

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Rabo PON, February, 29, 2012

» Happy Blogging - gubhugreyot «