CSS Only Presentation Library – slide.css

Category: Slider | March 17, 2023
Views Total:366 views
Official Page:Go to website
Last Update:March 17, 2023


CSS Only Presentation Library – slide.css


slide.css is a CSS library for creating interactive, responsive HTML presentations, one-page scrolling websites, and vertical page sliders without JavaScript.

It leverages the magic of CSS scroll-snap to snap presentation slides (pages) into place as users scroll through your content.

How to use it:

1. Download and import the slide.css stylesheet.

<link rel="stylesheet" href="slide.css" />

2. Add slides to section elements and the library will do the rest.

<!-- Fixed Header OPTIONAL -->
  Header Content
<!-- Slides -->
<!-- Fixed Footer OPTIONAL -->
  Footer Content

3. Override the default variables to create your own styles.

:root {
  --c-fg: black;
  --c-bg: snow;
  --c-primary: royalblue;
  --c-neutral: lavender;
  --c-notice: orange;
  --c-lines: var(--c-primary);
  --c-shadows: var(--c-neutral);
  --slide-width: 65ch;
  --slide-motion: 100ms ease;
  font-family: sans-serif;
  background-color: var(--c-bg);
  color: var(--c-fg);

You Might Be Interested In:

Leave a Reply