Jon
Rohan

CSS3 has a lot of cool pseudo-classes. For this experiment I used the :target pseudo-class which lets you target css element based on the element targeted at the end of a url, for example.

http://example.com/page#article1

The :target on this page would be the element with the id="article1". So if you wanted to place a red dotted border around article1, then you would use something like this.

:target { 
  border: 1px dotted #FF0000; 
}

So I decided to try an experiment and make a slideshow using nothing but HTML and CSS.

Demo

Sorry, but no IE’s allowed. You prob won’t see anything.

Start Slideshow

• Taming CSS

  by Jon Rohan

  Slide 1 of 3
  Next

• Never Assume you’ve mastered it

  Slide 2 of 3
  LastNext

• The End

  Slide 3 of 3
  Last

Code

<ul class="book-pages">
  <li id="1">
    <div>
      <h3>Taming CSS</h3>
      <small>by Jon Rohan</small>
    </div>
    <span class="slide-info">Slide 1 of 3</span>
    <a href="#2" class="next">Next</a>
  </li>
  <li id="2">
    <div>
      <h3>Never Assume you've mastered it</h3>
    </div>
    <span class="slide-info">Slide 2 of 3</span>
    <a href="#1" class="last">Last</a>
    <a href="#3" class="next">Next</a>
  </li>
  <li id="3">
    <div>
      <h3>The End</h3>
    </div>
    <span class="slide-info">Slide 3 of 3</span>
    <a href="#2" class="last">Last</a>
  </li>
</ul>

The HTML is a basic unordered list. Each list item will be the slide. Inside each slide is the controls to navigate backward and forward. And a span to display the current slide number.

The main CSS that controls the slideshow, is to just display the current slide, like this.

.book-pages li:target {
  display:block;
}

And here’s the rest of the CSS.

.book-pages, .book-pages li {
  list-style-type:none;
  margin:0;
  padding:0;
}
ul.book-pages {
  margin:30px 0;
}
.book-pages li {
  background-color:#111111;
  display:none;
  height:350px;
  margin:0 auto;
  position:relative;
  text-align:center;
  width:510px;
  color: #ffffff;
}
.book-pages div {
  font-size:1.8em;
  padding:120px 25px 0;
  line-height:2em;
}
.book-pages li:target {
  display:block;
}
.book-pages .next {
  position:absolute;
  right:0;
  bottom:-20px;
}
.book-pages .last {
  position:absolute;
  left:0;
  bottom:-20px;
}
.book-pages .slide-info {
  position:absolute;
  bottom:-20px;
  left:44%;
  color:#333333;
}

If you enjoyed reading this post, check out these posts CSS 3 @font-face, CSS Text Rotation Clock, Submit to Digg Bookmarklet.

Tags: classes, css3, Ideas, pseudo class, tricks, webkit 28 Sep 2009