Tag Archives: rounded corners

Pure CSS3 Rounded Corners Slideshow

Share Button


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.

View Larger Example

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>
Share Button