Pure CSS3 Rounded Corners Slideshow
February 19th, 2010 - by Scott Gale - 16 Comments, Add »
Be sure to view this example in SAFARI or CHROME.
CSS3 and HTML5 are presenting some exciting opportunities for the future. So I set out to test some of the features that are emerging. The ability to do rounded corners and shadows has been around for awhile. With CSS3 it’s such a pleasure to be able to quickly add these. Webkit specifically is now supporting animation capability. There are now options for styling that include quite a few animations. Hopefully this will get picked up in FireFox and standardized (it’s in the proposed spec for the w3c). Although I think we still need some work in terms of a dynamic set of N items, this is a good start. To be able to do this without any JavaScript or Flash at all is a pretty great step in the right direction for the web, oh and yes, this works on your iPhone.
First I setup some basic markup:
<div class="slideshow-example-frame"> <img class="img1" src="2010-quattroporte-sport-gt-s-sedan_01-thumb.jpg" alt="2010 Quattroporte Sport GT-S" /> <img class="img2" src="2010-grandcabrio-convertible_01-thumb.jpg" alt="2010 GrandCabrio" /> <img class="img3" src="2010-grandturismo-s-automatic-coupe_01-thumb.jpg" alt="2010 GrandTurismo S" /> <img class="img4" src="2010-grandturismo-s-coupe_01-thumb.jpg" alt="GrandTurismo S Coupe" /> </div>
Then I setup some basic CSS3 to do the rounded corners and shadows:
<style type="text/css">
.slideshow-example-frame {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
width:420px;
height:131px;
margin:30px 30px 30px 22px;
background-image:url(2010-grandturismo-s-coupe_01-thumb.jpg);
}
.slideshow-example-frame img {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:15s;
}
.slideshow-example-frame img {
position:absolute;
top:0;
left:0;
margin:30px;
}
<style>
Next add the animation pieces:
<style type="text/css">
.slideshow-example-frame .img1 {
-webkit-animation-name: fadein1;
}
.slideshow-example-frame .img2 {
-webkit-animation-name: fadein2;
}
.slideshow-example-frame .img3 {
-webkit-animation-name: fadein3;
}
.slideshow-example-frame .img4 {
-webkit-animation-name: fadein4;
}
@-webkit-keyframes fadein1 {
0% {opacity:0;}
5% {opacity:1;}
25% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein2 {
0% {opacity:0;}
25% {opacity:0.0;}
30% {opacity:1;}
50% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein3 {
0% {opacity:0;}
50% {opacity:0;}
55% {opacity:1;}
75% {opacity:1;}
100% {opacity:1;}
}
@-webkit-keyframes fadein4 {
0% {opacity:0;}
75% {opacity:0;}
80% {opacity:1;}
100% {opacity:1;}
}
<style>