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

16 thoughts on “Pure CSS3 Rounded Corners Slideshow

  1. admin

    When you implement it you can tone it down however much you want without having to slice and dice images, that’s the beauty of CSS3.

    1. admin

      Yeah those browsers don’t support the CSS3 transitions yet. Hopefully they will adopt some standard for this.

    1. Scott Gale

      Yeah, one big problem with the existing tutorial is that it is not dynamic in nature. Even though it is pure CSS it still requires a knowledge of the total number of slides to write the CSS. Manual advance would be possible using some sort of hover styling technique I imagine but the goal was to do as much as I could without using JS. I’ll experiment with that idea and post anything if I discover some new options.

  2. Brett Valls

    First of all this is a great tutorial so thank you, I’ve been searching for some code like this for a while.

    But I am having one major problem, and that is after my last image, my slideshow just cuts right back to the first without a dissolve effect. how can I change this?

    1. Scott Gale

      Brett, that usually means that you haven’t gotten the timing correct with the percentages. You have to change them according to how many slides you have. If you want to email me (blog@scottgale.com) the example you are struggling with I can take a look. At some point I would like to write a function that calculates the percentages based on the number of slides. Someone might of already worked that out.

  3. Vidyut Kale

    Hi Scott,

    I’ve written a WordPress theme with a similar slideshow, that basically uses a shortcode to make a css3 slideshow out of all the images attached (very similar to this). It has fallbacks for browsers that don’t support animation. It has a function for automatically outputting the css3 code as well as the duration of the whole animation based on the number of images attached.

    Some work is pending, but it will be released within a week or two (got a young son, so time is a problem). If it is urgent, I can make a post with the shortcode as a kind of tutorial or something. Let me know.

    Vidyut

    1. Scott Gale

      That sounds great. Let me know when you post it. I love the thought of the automatic output of the css3 code. You are doing that on the back-end I assume?

  4. Vidyut Kale

    Hi,

    I don’t have time to make a post, but I’ve added a version of the theme that has the code working.

    The theme itself isn’t where I want to bring it – this is more a halt by the wayside version – lots of features and troubleshooting left, but then I don’t know how long that will take so…

    I’m using php to output the css3 animation right alongside the html in the shortcode itself. You can see the shortcode.php

    You can find the theme at http://vidyut.net/themes/nisarga/

  5. Vidyut Kale

    You may want to comment there if there is something you want to know, as I will probably not be following this page with any regularity. I hadn’t still closed it when I had a powercut, so it reloaded with your comment, which is how I saw it :D

    Or add a plugin to email comment updates or something :D

Comments are closed.