HTML5, CSS3 & JS Experiments

By Martin Ivanov

Slides Viewer

Click here to open the demo in a separate window. This experiment is also available, wrapped as a HTML Web Component.

Usage and Code Insight

<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>
                        <h2>CSS3 Slides Viewer...</h2>
                        <p>Is an <a href="http://experiments.wemakesites.net/css3-slides-viewer/" target="_blank">experiment</a>, demonstrating that you 
                            can create cool slide viewer functionality 
                            without a single line of JavaScript, but only 
                            by the means of CSS3 and HTML5.</p>
                        <p>Watch this presentation to learn how 
                            it's done and what makes it so cool. If you find it useful, you could <a href="http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=219">download it from this link</a>.</p>
                        <p class="info">In case you click around and lose the focus of the slides, so the 
                            keyboard navigation stops working, you can <em>click + tab</em> the buttons above to continue.</p>
                        <p>Developed by <a href="http://wemakesites.net/" target="_blank">Martin Ivanov</a>.</p>
                        <p class="info">Click the right arrow key (<strong>→</strong>) to proceed to the 
                            next slide or the left (<strong>←</strong>) to go to the 
                            previous slide or use the buttons on the top.</p>
                        <p>This experiment is 
                            also <a href="/x-slides-html5-web-component.html" target="_blank">available</a>, wrapped as a 
                            <a href="/html5-web-components.html" target="_blank">HTML Web Component</a>.</p>
                    </section>
                </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-01" />
                    <label for="slides-01"><!-- / --></label>
                    <section>
                        <h2>The HTML...</h2>
                        <p>...Is a simple <code><form /></code> and a radio button list:</p>
                        <pre><code><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></code></pre>
                        <p>Each list item represents a single slide, and 
                            is supplied with radio button and label. The content 
                            of the slide is a hidden <code><section /></code> element. 
                            The default slide's radio button is supplied 
                            with <code>checked="checked"</code> attribute 
                            and in order to enable the keyboard navigation,
                            we set focus to it via the HTML5 <code>autofocus="autofocus"</code> attribute.</p>
                        <p class="info">Click the right arrow key (<strong>→</strong>) to proceed to the 
                            next slide or the left (<strong>←</strong>) to go to the previous slide or use the buttons on the top.</p>
                    </section>
                </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-02" />
                    <label for="slides-02"><!-- / --></label>
                    <section>
                        <h2>The CSS...</h2>
                        <p>... Is just about 200 lines (including the vednor-specific styles), and you can check it in the <a href="styles/css3-slides-viewer.css" target="_blank">styles/css3-slides-viewer.css</a> file. Below is just the coolest stuff.</p>
                        <h3>The Slides Counter...</h3>
                        <p>... Has been implemented via <a href="https://developer.mozilla.org/en-US/docs/CSS/Counters" target="_blank">CSS counters</a>:</p>
                        <pre><code>.css3-slides-viewer > form > fieldset > ul > li section::before
{
counter-increment: slide;
content: "Slide " counter(slide);
}</code></pre>
                        <h3>The Fade-in/out Animation...</h3>
                        <p>... Is using delayed <a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions" target="_blank">CSS3 transitions</a> and <code>visibility: visible/hidden</code>.</p>
                        <pre><code>.css3-slides-viewer > form > fieldset > ul > li > section
{
transition: all 500ms 10ms ease-in;
}</code></pre>
                        <p>The delay is utilized in order to enable to opacity transition on previously hidden elements.</p>
                        <p class="info">Click the right arrow key (<strong>→</strong>) to proceed to the 
                            next slide or the left (<strong>←</strong>) to go to the previous slide or use the buttons on the top.</p>
                    </section>
                </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-03" />
                    <label for="slides-03"><!-- / --></label>
                    <section>
                        <h2>... And More CSS...</h2>
                        <h3>Hide/Show Slides</h3>
                        <pre><code>/* 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;
}</code></pre>
                        <p class="info">Click the right arrow key (<strong>→</strong>) to proceed to the 
                            next slide or the left (<strong>←</strong>) to go to the previous slide or use the buttons on the top.</p>
                    </section>
                </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-04" />
                    <label for="slides-04"><!-- / --></label>
                    <section>
                        <h2>Supported Browsers</h2>
                        <p>Mozilla Firefox, Google Chrome, Apple Safari, Opera, nternet Explorer 9+</p>
                        <p>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 <code>autofocus="autofocus"</code> property of HTML5</p>
                        <p class="info">Click the right arrow key (<strong>→</strong>) to proceed to the 
                            next slide or the left (<strong>←</strong>) to go to the previous slide or use the buttons on the top.</p>
                    </section>
                </li><li><input type="radio" name="css3-slides-viewer-slides" id="slides-05" />
                    <label for="slides-05"><!-- / --></label>
                    <section>
                        <h2>Thank You!</h2>
                        <p><a href="http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=219">Download CSS3 Slides Viewer</a>.</p>
                        <p>If you like this solution, you can also check my 
                        <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
                        <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
                        <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a> 
                        or follow me on <a href="https://twitter.com/#!/wemakesitesnet" target="_blank">Twitter</a>.</p>
                        <p>Make sure you try my online <a href="http://buildercss.wemakesites.net/" target="_blank">CSS minifier and merger</a> and <a href="http://image2base64.wemakesites.net/" target="_blank">image to base-64 encoder</a>.</p>
                        <p>Developed by <a href="http://wemakesites.net/" target="_blank">Martin Ivanov</a>.</p>
                    </section>
                </li>
            </ul>
        </fieldset>
    </form>
</div>
        
/**
 * @info CSS3 Slides Viewer (viewer styles file)
 * @author Martin Ivanov
 * @web http://wemakesites.net
 * @blog http://acidmartin.wordpress.com/
 * @twitter https://twitter.com/wemakesitesnet
 */

@font-face 
{
    font-family: 'TeXGyreAdventorRegular';
    src: url('fonts/texgyreadventor-regular-webfont.eot');
    src: url('fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/texgyreadventor-regular-webfont.woff') format('woff'),
         url('fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('fonts/texgyreadventor-regular-webfont.svg#TeXGyreAdventorRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.css3-slides-viewer form,
.css3-slides-viewer > form > fieldset > ul > li > section,
.css3-slides-viewer > form > fieldset > ul > li > input,
.css3-slides-viewer > form > fieldset > ul > li section::before
{
    position: absolute;
}

.css3-slides-viewer > form > fieldset > ul > li > input,
.css3-slides-viewer > form > fieldset > ul > li > section
{
    opacity: 0;
}

.css3-slides-viewer form,
.css3-slides-viewer > form > fieldset > ul > li > section
{
    top: 32px;
    right: 32px;
    bottom: 32px;
    left: 32px;
}

.css3-slides-viewer > form > fieldset > ul > li,
.css3-slides-viewer > form > fieldset > ul > li > label
{
    width: 10px;
    height: 10px;
}

.css3-slides-viewer > form > fieldset > ul > li > label,
.css3-slides-viewer > form > fieldset > ul > li > label::before
{
    display: block;
}

.css3-slides-viewer > form > fieldset > ul > li,
.css3-slides-viewer > form > fieldset > ul > li section::before
{
    display: inline-block;
}

.css3-slides-viewer > form > fieldset > ul > li > input
{
    z-index: -1;
}

.css3-slides-viewer > form > fieldset > ul > li > section
{
    visibility: hidden;
}

.css3-slides-viewer > form > fieldset > ul > li > input:checked ~ section
{
    visibility: visible;
}

.css3-slides-viewer > form > fieldset > ul
{
    text-align: center;
}

.css3-slides-viewer > form > fieldset > ul > li
{
    padding: 1px;
    margin: 1px;
}

.css3-slides-viewer > form > fieldset > ul > li > label
{
    height: 10px;
    border: solid 1px #3c8cd3;
    z-index: 15;
    cursor: pointer;
}

.css3-slides-viewer > form > fieldset > ul > li > label::before
{
    content: "";
    margin: 1px;
    height: 8px;
    width: 8px;
}

.css3-slides-viewer > form > fieldset > ul > li > input:checked ~ label::before,
.css3-slides-viewer > form > fieldset > ul > li > input:not(:checked) ~ label:hover::before
{
    background: #3c8cd3;
}

.css3-slides-viewer > form > fieldset > ul > li > input:not(:checked) ~ label:hover::before
{
    opacity: .6;
}

.css3-slides-viewer
{
    counter-reset: slide;
    font-family: TeXGyreAdventorRegular, Arial, Sans-serif;
}

.css3-slides-viewer form
{
    box-shadow: 0 4px 13px 5px rgba(0, 0, 0, .2), 
                0 2px 2px rgba(0, 0, 0, .15);
    background: #fff;
    border-radius: 3px;
}

.css3-slides-viewer > form > fieldset > ul > li > section
{
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    
    -moz-transition: all 500ms 10ms ease-in;
    -webkit-transition: all 500ms 10ms ease-in;
    -ms-transition: all 500ms 10ms ease-in;
    -o-transition: all 500ms 10ms ease-in;
    transition: all 500ms 10ms ease-in;
}

/* slides counter */
.css3-slides-viewer > form > fieldset > ul > li section::before
{
    counter-increment: slide;
    content: "Slide " counter(slide);
    top: 6px;
    right: 6px;
    padding: 6px;
    font-size: 14px;
    line-height: 14px;
    background: #3c8cd3;
    border-radius: 2px;
    color: #fff;
}

.css3-slides-viewer > form > fieldset > ul > li > section
{
    z-index: 5;
}

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