CSSS: CSS-based SlideShow System

By Lea Verou


What is it?

A simple framework for building presentations with modern web standards



Thumbnail view

Press Ctrl+H (or Shift+H if you're in Opera) now.

Cool, huh? You can press Ctrl+Shift+H to see all slides (warning: can be slow!)


Presenter view

This slide has presenter notes. They are only visible in presenter view (Ctrl+P or Shift+P).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<style scoped />

You can use the HTML5 scoped attribute on style elements in slides, to only style the current slide or inside sections that include multiple slides to style all of them and nothing else.

For example, inspect this slide and then run $$('style[scoped]')[0].sheet.cssRules[0].selectorText in the console to see how the original selector gets changed.

More features



Plugin: CSS Snippets

new CSSSnippet(document.getElementById('snippet'));

CSS Snippets demo

Edit the following CSS code:

CSS Snippets: raw CSS

Plugin: CSS Controls

CSS Controls demo

Plugin: Code highlight

Code highlight example

// Comment
document.addEventListener('DOMAttrModified',function(e) {
  var node = e.target, attr = e.attrName;
    && (attr === 'placeholder' || attr === 'value')
    || foo > 5)
}, false);