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:
[sourcecode language=”html”]
<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>
[/sourcecode]
The Slides Counter…
… Has been implemented via CSS counters:
[sourcecode language=”css”]
.css3-slides-viewer > form > fieldset > ul > li section::before
{
counter-increment: slide;
content: "Slide " counter(slide);
}
[/sourcecode]
The Fade-in/out Animation…
… Is using delayed CSS3 transitions and visibility: visible/hidden.
[sourcecode language=”css”]
.css3-slides-viewer > form > fieldset > ul > li > section
{
transition: all 500ms 10ms ease-in;
}
[/sourcecode]
Hide/Show Slides
[sourcecode language=”css”]/* 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;
}
[/sourcecode]
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
© 2006 - 2023 Martin Ivanov