<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