CSS3 Driven Slides Viewer Without any JavaScript

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

This 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 don’t feel like reading, just check the demo and download CSS3 Slides Viewer right away.

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>

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;
}

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;
}

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.

Check the demo and 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.

Related Posts

Advertisements

16 comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s