Energy Saving Mode 2

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.

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).


KODE CSS

*, body .bgsGR_esm{

      margin:0;

      padding:0;

}

body .bgsGR_esm{

      position:fixed;

      width:98%;

      top:0;

      left:0; /* original code by: khoirul-mufid.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: khoirul-mufid.blogspot.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: khoirul-mufid.blogspot.com */

      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_ khoirul-mufid.blogspot.com {

      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_ khoirul-mufid.blogspot.com span.esm4{

      color:#aaa;

      font-style:italic;

}

xHTML

<div class='bgsGR_esm'><p class='esm1'>KHOIRUL MUFID<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_khoirul mufid'>Copyright * Feb 2012 * <span class='esm4'>khoirul-mufid.blogspot.com</span> - All rights reserved</div></div>

• Simpan kode CSS di atas kode ]]></b:skin>

• Simpan xHTML di bawah kode <body> , atau
  <body expr:class='"loading" + data:blog.mobileClass'>

• 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.

• Ganti Teks khoirul mufid yang ber-warna merah dengan nama blog anda atau teks lain.