HTML slides without frameworks, just CSS

Written by Bram.us - - Aggregated on Friday April 12, 2019
Tags: elsewhere, css, link, slidedeck

Creating a slidedeck with CSS is not really that difficult. Stack all slides on top of each other, and then make good use of the :target pseudo-class selector:

We adjust the z-index for the active slide to be higher than all the other inactive slides with our trusty :target selector.

section {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 0;
}

section:target {
  z-index: 1;
}

Sprinkle some more CSS on top, and you can also build in transitions.

https://www.bram.us/wordpress/wp-content/uploads/2019/04/hs-final.mp4

HTML slides without frameworks, just CSS →

Mostly the :target selector is used to highlight the anchor you just jumped to. But did you know it can also be used to change the entire layout of your site?


« Unsafe SQL functions in Laravel - Bram.us

Bram.us - Automatic GitHub Changelog Generator »