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.
Text/content that automatically reflows into multiple columns.
Full Bleed Sections
Scrolling page with sections that fill exactly one browser window.
Full Bleed Fixed Backgrounds
Fixed backgrounds for a modern, layered effect. Poor man's parallax scrolling.
CSS Filter Effects
Built-in effects for manipulating the final appearance of images and content.
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.
Basic CSS Grid
A responsive grid of images.
CSS Grid with Items of Various Sizes
Very similar to the Basic CSS Grid, but handles vertical centering of images within grid cells.
CSS Grid with Overlays
Grid and positioning rules to create hover overlays.
Controlling the layer order of positioned elements.
There are a few methods for creating a sticky footer in CSS. "Sticky" can mean one of two things:
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
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
- CSS Variables (Named Properties)
- Scroll Snap Points
- Background blend modes