Screensaver Pure With CSS3

Bisa sobat buka kembali arsip berikut Screensaver for Web or Blog, yes itu yang menampilkan screensaver apabila kita terlalu lama meninggalkan diam blog kita tercinta ;) Biasa Beben Koben si bloglang anu ganteng kalem tea melanglangbuana berblog walking, lalu mentok ke sobat blognya yg gaya punya bercerita mengenai bagaimana membuat screensaver full memakai CSS3! Setelah melihat kode CSS3 atribut yang digunakan ternyata menggunakan transition and transform. Beben cuman membenarkan kode transparan (opacity) kebetulan sobat kita mungkin salah menuliskan kodenya :D Serta dirapingkan sama Beben kode CSS3 yg tidak perlunya ;))

Karena kode CSS yang dipakai lumayan banyak, maka dipress sedemikian rupa sob, biar ringanan dikit ;))
Seperti biasa cara tercepat saja, Add a Gadget ► HTML/Javascript lalu masukin deh ini bumbu rahasianya :P

<style type="text/css">
body .saving{top:0;left:0;width:100%;height:100%;position:fixed;background:#000;z-index:999999;opacity:0.89;-moz-opacity:0.89;-khtml-opacity:0.89;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);-o-transition:1s ease-out;-moz-transition:1s ease-out;-webkit-transition:1s ease-out}
body .saving p{font-size:23px;font-family:Arial,Georgia,Serif,Times New Roman;color:#000;text-shadow:1px 1px 2px #fff;line-height:30px;font-weight:900;text-align:center;margin:250px 0 0;padding:0}
.saving .by_{color:#fff;font-size:10px;position:fixed;right:3px;bottom:0}
body:hover .saving{opacity:0.0;-moz-opacity:0;-khtml-opacity:0;-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);filter:alpha(opacity=0);-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-o-transition:font 1.1s .1s width 1.3s .4s margin-left .8s 1.2s 0 1.2s linear 1.5s background-color .6s ease-in .6s margin-top 1.2s ease-in .5s border 3s ease-in;-moz-transition:font 1.1s .1s width 1.3s .4s margin-left .8s 1.2s 0 1.2s linear 1.5s background .6s ease-in .6s margin-top 1.2s ease-in .5s border 3s ease-in;-webkit-transition:font 1.1s .1s width 1.7s 0 margin-left .8s 1.2s 0 1.2s linear 1.5s background .6s ease-in .6s margin-top 1s ease-in .5s border 3s ease-in, 0 3s ease-in}
</style>

<div class="saving">
<p class="saving">Prodigy of Head<br/><br/>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami! <span class="by_">http://beben-koben.blogspot.com/</span></p>
</div>

Rubahlah tulisan berwarna itu sesuka sobat. Demikian saja trik screensaver pure with CSS3 buat blogger :)
Ini yang lebih sederhana bro!!!

body:hover .screenFilter:before {
top: -100%;
}
.screenFilter:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: '';
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: top 0.5s ease-in;
-moz-transition: top 0.5s ease-in;
-o-transition: top 0.5s ease-in;
transition: top 0.5s ease-in;
}

Planning syntax<div class="screenFilter">
----- CONTENT HERE -----
</div>
Happy screen saver \m/