Slideshow & Porthole Demo

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<p style='font-size:30px;text-align:center;margin-bottom:25px;color:#2660A0'>Mozilla Slideshow Demo</p>
<div id="serelek"></div>
<p style='font-size:30px;text-align:center;margin-bottom:25px;color:#2660A0;margin-top:25px'>Mozilla Porthole Demo</p>
<div id="serelek1"><p>Hover here!!!</p></div>    
<p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2011/12/creativity-using-css-keyframe.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://beben-koben.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;
background-image: url('http://4.bp.blogspot.com/-jDSgywPpg2Y/TvXbOBHI34I/AAAAAAAAEr0/ceFV2FgHs3A/snow2.png'), url('http://2.bp.blogspot.com/-LNeIjIgcyS0/TvXbN-XfADI/AAAAAAAAErs/YqP-Abtzli4/snow1.png'), url('http://1.bp.blogspot.com/-dFF3reDgIIo/TvXbOGohPBI/AAAAAAAAEsE/aHY7A9-TZC0/snow3.png');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:25px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
#serelek {
width: 400px;
height: 300px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: url(http://3.bp.blogspot.com/-VSRhRgcWpPk/TvUBhVwiF1I/AAAAAAAAErU/_DmoiXHph6o/s1600/slideshow.png);
margin: 0 auto;
-moz-animation: muter 10s infinite alternate ease;
}
@-moz-keyframes muter {
0% {background-position:0px 0px}
14% {background-position:0px 0px}
28% {background-position:-400px 0px}
42% {background-position:-400px 0px}
56% {background-position:-400px...