Miscellaneous Demos

Below is a collection of miscellaneous examples and demos. Some of them are common and useful layout techniques. Each demo is a self-contained HTML file with an in-document style sheet. Comments in the files describe syntax, usage, and references.

The footer contains a single zip archive with all of the files.

Many of these demos use CSS properties that do not yet have full cross browser support. Consider your audience, use with care, and always check compatibility. Newly developing features can change almost every month!

Disclaimers aside, this is basically a mini treasure trove of fun CSS stuff. Add these techniques to your personal toolbox and you can build some pretty cool stuff.

CSS Columns

Text/content that automatically reflows into multiple columns.

working version

Full Bleed Sections

Scrolling page with sections that fill exactly one browser window.

working version

Full Bleed Fixed Backgrounds

Fixed backgrounds for a modern, layered effect. Poor man's parallax scrolling.

working version

CSS Filter Effects

Built-in effects for manipulating the final appearance of images and content.

working version

CSS Animations using @keyframes

Define and apply custom animations to elements. These can be triggered using jQuery.addClass and removeClass. They can run continuously or a set number of times, and they can be set to start after a delay.

working version

Basic CSS Grid

A responsive grid of images.

working version

CSS Grid with Items of Various Sizes

Very similar to the Basic CSS Grid, but handles vertical centering of images within grid cells.

working version

CSS Grid with Overlays

Grid and positioning rules to create hover overlays.

working version

Z-Index

Controlling the layer order of positioned elements.

working version

Sticky Footers

There are a few methods for creating a sticky footer in CSS. "Sticky" can mean one of two things:

  1. The footer is always visible and attached to the bottom of the viewport. This can be accomplished with position settings. Not too complicated but has drawbacks.

    Sticky footer fixed working version

  2. The footer is at the bottom of the page as normal, but if the page is short, it gets pushed to the bottom of the viewport.

    Sticky footer flexbox working version

    And one more version using CSS Grid (arguably better??)

    Sticky footer grid working version

TODO:

  • CSS Variables (Named Properties)
  • Scroll Snap Points
  • Object-fit
  • Background blend modes