CSS3 Slides Viewer...

Is an experiment, demonstrating that you can create cool slide viewer functionality without a single line of JavaScript, but only by the means of CSS3 and HTML5.

Watch this presentation to learn how it's done and what makes it so cool. If you find it useful, you could download it from this link.

In case you click around and lose the focus of the slides, so the keyboard navigation stops working, you can click + tab the buttons above to continue.

Developed by Martin Ivanov.

Click the right arrow key (→) to proceed to the next slide or the left (←) to go to the previous slide or use the buttons on the top.

This experiment is also available, wrapped as a HTML Web Component.

The HTML...

...Is a simple <form /> and a radio button list:

<div class="css3-slides-viewer">
<form name="css3-slides-viewer" method="post" action="./">
<fieldset>
    <legend>CSS3 Slides Viewer</legend>
    <ul>
        <li><input type="radio" name="css3-slides-viewer-slides" autofocus="autofocus" id="slides-00" checked="checked" />
            <label for="slides-00"><!-- / --></label>
            <section>
                <!-- slide content should go here -->
            </section>
        </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-01" />
            <label for="slides-01"><!-- / --></label>
            <section>
                <!-- slide content should go here -->
            </section>
        </li>
    </ul>
</fieldset>
</form>
</div>

Each list item represents a single slide, and is supplied with radio button and label. The content of the slide is a hidden <section /> element. The default slide's radio button is supplied with checked="checked" attribute and in order to enable the keyboard navigation, we set focus to it via the HTML5 autofocus="autofocus" attribute.

Click the right arrow key (→) to proceed to the next slide or the left (←) to go to the previous slide or use the buttons on the top.

The CSS...

... Is just about 200 lines (including the vednor-specific styles), and you can check it in the styles/css3-slides-viewer.css file. Below is just the coolest stuff.

The Slides Counter...

... Has been implemented via CSS counters:

.css3-slides-viewer > form > fieldset > ul > li section::before
{
counter-increment: slide;
content: "Slide " counter(slide);
}

The Fade-in/out Animation...

... Is using delayed CSS3 transitions and visibility: visible/hidden.

.css3-slides-viewer > form > fieldset > ul > li > section
{
transition: all 500ms 10ms ease-in;
}

The delay is utilized in order to enable to opacity transition on previously hidden elements.

Click the right arrow key (→) to proceed to the next slide or the left (←) to go to the previous slide or use the buttons on the top.

... And More CSS...

Hide/Show Slides

/* by default slides are hidden */
.css3-slides-viewer > form > fieldset > ul > li > section
{
visibility: hidden;
}

/* the slide is visible only if it's radio button is selected */
.css3-slides-viewer > form > fieldset > ul > li > input:checked ~ section
{
visibility: visible;
}

Click the right arrow key (→) to proceed to the next slide or the left (←) to go to the previous slide or use the buttons on the top.

Supported Browsers

Mozilla Firefox, Google Chrome, Apple Safari, Opera, nternet Explorer 9+

Due to the lack of support for CSS transitions, Internet Explorer 9 does not play the fade-in/out animation, and enabling the keyboard navigation should be done by clicking the buttons on top, because that browser does not support the autofocus="autofocus" property of HTML5

Click the right arrow key (→) to proceed to the next slide or the left (←) to go to the previous slide or use the buttons on the top.

Thank You!

Download CSS3 Slides Viewer.

If you like this solution, you can also check my personal wesbite, Acid.JS Web.UI, my blog or follow me on Twitter.

Make sure you try my online CSS minifier and merger and image to base-64 encoder.

Developed by Martin Ivanov.