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.

live demo

Full Bleed Fixed Backgrounds

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

live demo

CSS Filter Effects

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

live demo

CSS Animations using @keyframes

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

live demo

CSS Grid with Overlays

A grid of items with hover overlays.

live demo

Z-Index

Controlling the layer order of positioned elements.

live demo

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 fixed positioning. Not complicated but has drawbacks.

    Sticky footer fixed live demo

  2. The footer rests at the bottom of long pages as normal, and you scroll down to find it. On pages with very short content however, the footer still gets pushed to the bottom of the viewport.

    This can be accomplished using flexbox with flex-direction: column, or with CSS Grid. I recommend the CSS Grid method, mainly for simplicity.

    Sticky footer Grid live demo

    Sticky footer flexbox live demo

Object-fit and Object-position

Controlling image dimensions without squishing images.

live demo

TODO:

  • CSS Variables (Named Properties)
  • currentColor
  • Scroll Snap Points
  • Background blend modes
  • Clip Path