Take Five!

A semantically-consistent pure CSS slide renderer

I want to see the demo

I want to read the manual

Table of contents

  1. Summary
  2. A quotation
  3. Into the woods
  4. Yellow at the lake
  5. Winter tree
  6. Autumn
  7. The old castle
  8. Frozen source
  9. Water drop
  10. HTML5 video example
  11. YouTube/iframe example
  12. HTML5 audio example
  13. About
    1. Leave a message!

Getting started

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.
Albert Einstein
Into the woods

Slide 2 of 10

Yellow at the lake

Slide 3 of 10

Winter tree
This is the <footer> element.

Slide 4 of 10


Pay attention to the left menu and the text that appears on the top right corner. This and the previous three slides are an example of <article class="verbose slide">.

Slide 5 of 10

The old castle

Pay attention to the left menu and what happens with navigation buttons. This is an example of <article class="verbose foyer slide">.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis libero et nulla ultricies, vitae interdum diam vestibulum. Sed ut convallis est, ac tristique turpis. Fusce ipsum est, fermentum in facilisis imperdiet, tincidunt ac justo. Nunc quis tortor sed nunc ornare ornare.

Water drop

Nullam accumsan ipsum risus, sed auctor enim varius eu. In ipsum sem, suscipit eget tortor nec, laoreet auctor metus. Integer quis erat nisl. In hac habitasse platea dictumst. Phasellus a finibus libero. Etiam lacus elit, tempor nec elit eu, bibendum dignissim magna.

Phasellus nec odio velit. In hac habitasse platea dictumst. Aliquam blandit nec nulla a aliquam. Donec eget erat a leo dapibus egestas sed a nunc. Phasellus elementum laoreet urna, vel porttitor lectus iaculis vitae. Duis a euismod lorem. Pellentesque quis auctor eros, at mollis mauris. Etiam sit amet finibus nulla. Cras at mi vitae lorem ultricies tristique.

(c) John Doe

Slide 6 of 10

Frozen source

Pay attention to the left menu and the text that appears on the top right corner. This is an example of default layout (simply <article class="slide">).

Note that the link for exiting the slide is still shown with a label. Labels can be removed individually from the links by assigning a "no-label" class to them.

(c) John Doe

Slide 7 of 10

Water drop

Pay attention to the left menu. This is an example of <article class="foyer slide">.

Slide 8 of 10

HTML5 video example (source)

Slide 9 of 10

Wolfgang Amadeus Mozart, Piano Concerto No. 21, Andante — source: https://www.youtube.com/watch?v=df-eLzao63I

Slide 10 of 10

Erik Satie, Gymnopedies – La 1ere. Lent et douloureux.
Performed by Robin Alciatore. Courtesy of Musopen.