As HTML + CSS become more and more powerful, they seem to eclipse more and more conventional software. After all, they offer greater control, are much easier to work with, and have enviable cross-platform support. Imagine never having to worry if the recipient has the same version of PowerPoint! All they need have is a (hopefully compliant) browser, no network connection required.
In this article, we will discuss a way to use HTML and CSS to create HTML-based slideshows that can be embedded anywhere. These are slide presentations that give the user the control to advance to the next slide. We find that they are better suited for "how-to demos" than most screengrabbing videos, because (a) they consumer sets the pace, (b) the bandwidth is much (much!) smaller, and (c) the visual quality is significantly better, by ditching images for rendered fonts.
The tricks of the trade#
HTML#
The HTML portion of this exercise is very basic. Our aim is to create a standalone HTML document whose only purpose is to be a slideshow. That document can then be embedded via the object tag on any other page, or viewed on its own for a "full screen" experience.
CSS#
Most of the trickery will be performed by the CSS. In particular, we will use CSS3's vw units to make sure the slideshow scales uniformly regardless of viewport size. We will also use the handy :target pseudo-class to bring the active slide to the front.
Implementation#
The HTML document consists of a wrapper <DIV> element with ID "slideshow". Each slide, in turn, is a <DIV> with class "slide" and its own ID. The title slide should also have its own class "title".
The following are the essential CSS rules that apply to the .slide elements:
- display: block
- width: 100%
- height: 100%
- overflow: hidden
- position: absolute
- left: 0
- top: 0
- z-index: 0
- background: white;
These rules collapse all the slides into a stack. The background property can be stylized according to your slideshow theme, but must be set to a non-transparent value because of the way the slides are placed on top of each other.
The title slide requires the following special rule:
- z-index: 1
This rule places the title slide at the top of the deck by default. The final CSS rule brings the chosen slide to the top of the deck with the selector .slide:target:
- z-index: 2
With these rules in place, all that is needed is a way to select which slide to view. Add a navigation footer fixed to the bottom of the slideshow with links to each of the slides.
Advantages#
Not only is this slideshow easy to implement, it can work without Javascript at all! We really like how intrinsically accessible it is: each slide has its own unique URL (with the anchor element). This means that we can link to a particular slide in the show. This feature alone makes the show more useful and easier to disseminate by providing natural bookmarks to the desired content within the show. As shown in the bonus slide, you can use Javascript to enhance the slideshow experience.
Conclusions#
We now use these slideshows in lieu of screencast videos for most of our how-to manuals. They are fast, reliable, and fun to develop. The slideshow is back to being a blank canvas. Let your CSS creativity shine!
Continue the discussion on Twitter. Follow @OpenWebSolns