Build Your Own Slide Presenter: Part 3

The current presenter will show one slide at a time, but the slides keep moving down the page since all the <section> elements are in the normal flow of the browser. The slides also appear and disappear instantly, and aren't centered in the window. We can change all of these qualities using cascading style sheets.

You've probably heard of cascading style sheets. Their unofficial working slogan is:

"CSS - Making The Easy Things Difficult Since 1996".

Ah, but no more.

Well, almost no more.

First we'll address the vertical positioning of each slide. Since only one slide appears at a time, we can set the height of all inactive slides to 0, and hide any content flowing outside the slide's box. Only the currently visible slide has a height.

section {
    opacity: 0;
    height: 0px;
    overflow: hidden;     
}

section.current {
    opacity: 1;
    height: auto;
    overflow: auto;
}

It would also be nice if each slide did not appear instantly, but gradually faded into view. A fade in / fade out effect is easy with a CSS 3 transition.

section {
    opacity: 0;
    height: 0px;
    overflow: hidden;
    -webkit-transition: opacity 400ms linear 0s;  
    -moz-transition: opacity 400ms linear 0s;    
    -ms-transition: opacity 400ms linear 0s;
    transition: opacity 400ms linear 0s;     
}

CSS 3 transitions are still a work in progress, but when IE10 arrives they will have support from all the major browsers. A transition automatically changes property values over time instead of instantly. First we give the name of the property to transition ("opacity" in this case, but we could use a value of "all" to transition as many properties as possible). Next is the duration (400ms), the easing function (linear), and the delay before starting (0s).

Since transitions are still a work in progress, they require a vendor prefix to work. Vendor prefixes are the –webbkit, –moz, –ms noise in the style. Instead of one "transition" line in the style definition above, we have 4. One day everything will work without vendor prefixes, and you'll have more time to spend with the iPhone 22.

You'll also use vendor prefixes if you want to give the slides a gradient background using CSS. Damien Galarza's CSS3 Gradient Generator will give you all the CSS you need with an interactive color designer.

Finally, some people might want to center their slide title. Centering just the title is easy.

section > h1 {
    text-align: center;
}

Still others might want to center the entire content of the slide. Centering block elements is always a bit weird, and one common approach is to give the element a specific width and use auto margins on the left and right sides. With CSS3 there is also the possibility of using Flexbox.

section.center {    
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;  
}

Flexbox is another work in progress, and only the –webkit prefix is shown. Flexbox and Grid will make complex layouts easy, and 3 column layouts trivial. You can experiment with flexible box layouts on The Playground.

In the next post we'll add some feature detection for anyone who uses an older browser. 

For all the code, see github.