CSSNERD

CSS at its best

Tag Archive for HTML

Aside

Documentation

flash is dead

Alright, so we all know by now, Flash is dead… Really who uses it anymore. Whats hot and on the stove cooking right now is jQuery, AJAX, CSS3, and HTML5. So I have been looking into keeping up with all the new recipes in web development and trying to create small little applications that would help m become a great cook in website development.

javascript

Last night I was working on a lockscreen for my jailbroken iPhone and I thought it would be really cool to have a rotating slideshow as the background. I made it in javascript in only a few minutes.

CSS3

I turned around and said, iPhones are really just a glorified web browser, why cant I do this is CSS3? No reason not to try to. So I sat down and started to think about how I am going to do this… Well I am going to have to set up a fade rule so that I can easily call it for each image I want to add, I also wanted the image to appear as if it was zooming in as it was fading, so I made this…

Let’s go …slideshow

Before that lets take a look at the HTML

<div id="CSS3Slideshow">
    <img class="img1" src="1.jpg" alt="" />
    <img class="img2" src="2.jpg" alt="" />
    <img class="img3" src="3.jpg" alt="" />
    <img class="img4" src="4.jpg" alt="" />
</div>
@-webkit-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(180px,60px) scale(2.00); }
	15% { opacity:1; -webkit-transform:translate(80px,160px) scale(1.80); }
	30% { opacity:0.5; -webkit-transform:translate(40px,80px) scale(1.40); }
	40% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.00); }
	100% { opacity:0; }
}
@-moz-keyframes fade {
	0% { opacity:0;-moz-transform:translate(180px,60px) scale(2.00);  }
	15% { opacity:1;-moz-transform:translate(80px,160px) scale(1.80); }
	30% { opacity:0.5;-moz-transform:translate(40px,80px) scale(1.40); }
	40% { opacity:0;-moz-transform:translate(0px,0px) scale(1.00); }
	100% { opacity:0; }
}

So now we have a rule that we can call we want to fade out the images. Now we have to make sure that the images are placed correctly and are not standing side by side…

First we want the slideshow container along with all the images inside the container to be placed on top of each other. So we need to give them the position absolute. After doing that we need to place the container where we want it, since I am using this for my iPhone I want to place the container in the top left most part of the screen and then set the size of it to the size of the screen resolution which is 320px by 480px. Add overflow hidden so that if anything is sliding out from the container it isn’t seen.

#CSS3Slideshow, #CSS3Slideshow img { position:absolute }
#CSS3Slideshow {
overflow:hidden;
top:0px;
left:0px;
width:320px;
height:480px;
}

Alright now we have to tell the images in the container what they are supposed to do. The following will tell all the images in the container to call the rule fade for 24second on an infinite loop, so it never stops playing the slideshow.

#CSS3Slideshow img { opacity:0; -webkit-animation:fade 24s linear infinite; -moz-animation:fade 24s linear infinite; }

Almost done, just one last little snag, how are the images going to fade away if they all do it all at once, so now we have to tell them to delay their animation for so many seconds. I have four images and I told the slideshow it will take 24 seconds for one loop. So I need each image to delay their animation 6 seconds after the last. To do this look at the following CSS

#CSS3Slideshow .img2 { -webkit-animation-delay:6s; -moz-animation-delay:6s;}
#CSS3Slideshow .img3 { -webkit-animation-delay:12s; -moz-animation-delay:12s;}
#CSS3Slideshow .img4 { -webkit-animation-delay:18s; -moz-animation-delay:18s;}

Now serve up your page and enjoy the delicious CSS3…

CSS at a glance

@-webkit-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(180px,60px) scale(2.00); }
	15% { opacity:1; -webkit-transform:translate(80px,160px) scale(1.80); }
	30% { opacity:0.5; -webkit-transform:translate(40px,80px) scale(1.40); }
	40% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.00); }
	100% { opacity:0; }
}
@-moz-keyframes fade {
	0% { opacity:0;-moz-transform:translate(180px,60px) scale(2.00);  }
	15% { opacity:1;-moz-transform:translate(80px,160px) scale(1.80); }
	30% { opacity:0.5;-moz-transform:translate(40px,80px) scale(1.40); }
	40% { opacity:0;-moz-transform:translate(0px,0px) scale(1.00); }
	100% { opacity:0; }
}
#CSS3Slideshow, #CSS3Slideshow img { position:absolute }
#CSS3Slideshow {
overflow:hidden;
top:0px;
left:0px;
width:320px;
height:480px;
}
#CSS3Slideshow img { opacity:0; -webkit-animation:fade 24s linear infinite; -moz-animation:fade 24s linear infinite; }
#CSS3Slideshow .img2 { -webkit-animation-delay:6s; -moz-animation-delay:6s;}
#CSS3Slideshow .img3 { -webkit-animation-delay:12s; -moz-animation-delay:12s;}
#CSS3Slideshow .img4 { -webkit-animation-delay:18s; -moz-animation-delay:18s;}
<div id="CSS3Slideshow">
    <img class="img1" src="1.jpg" alt="" />
    <img class="img2" src="2.jpg" alt="" />
    <img class="img3" src="3.jpg" alt="" />
    <img class="img4" src="4.jpg" alt="" />
</div>

Incoming search terms:


css slideshow code,  pure css slideshow,  css3 slideshow,  pure css3 slideshow,  slideshow css code,  css3 slideshow fade,  html5 css3 slideshow,  css slideshow fade,  pure css image slideshow,  css code for image slideshow,  pure html css slideshow,  css3 slideshow animation,  css slideshow code free,  css fade slideshow,  slideshow css3 html5,  pure css3 image slideshow,  css3 opacity slide show,  css image slideshow code,  css3 image slideshow,  yhs-fullyhosted_003,  slideshow css codes,  slideshow using html5 css3,  webkit slideshow,  webkit transition slideshow,  yhs-fh_lsonswrow,  yhs-default,  safari fade in slider,  pure css simple slideshow,  css slideshow on iphone,  css3 only slide show,