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 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, removeClass, or toggleClass. They can run continuously or a set number of times, and they can be set to start after a delay.
CSS Grid with Overlays
A grid of items with 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 fixed positioning. Not complicated but has drawbacks.
Sticky footer fixed live demo
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.
- CSS Variables (Named Properties)
- Scroll Snap Points
- Background blend modes
- Clip Path