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 or 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 or 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
Like this:
Like Loading...
Read Full Post »
