What We’re Building

Slideshow Live Demo: Click here

screenshot

Porthole Live Demo: Click here

screenshot

Why Pure CSS?

Before anyone gets too excited, I want to recognize that, at this point in time, this is a job for JavaScript. Though some rare and confused souls browse with JavaScript turned off, that will leave out a much lower percentage of your audience than today’s method.

That said, I think it’s important and even fun to experiment with upcoming technologies to see how we’ll be coding in the near future. As we saw in our recent article on creating Colorful Pulsing Backgrounds, Webkit Keyframe Animations really stretch what’s possible with CSS and are actually quite easy to work with.

Getting Started: Basic HTML

To begin, let’s create the page as if it contained only static elements. We’re not going to worry too much about creating a complex page design this time around, just a simple container with the slideshow and a headline.

With that in mind, the markup for this project is super simple:

1
2
3
4
5
6
7
8
9
<div id="container">
    <div id="headline">
     <h1>Webkit Slideshow</h1>
     <p>An image slider made with pure CSS.</p>
    </div>
    
    <div id="slideshow">
    </div>
</div>