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