Dynamic Image Colorizing with <input type=”color”>
Removes chrome from color input swatch and overlays over an image, using blend modes to colorize. Voila! Color changing without JS.
Perspective Scrolling in CSS
A 3 dimensional scrolling experience built in CSS only. The trick is to rotate a single element around its x-axis, while its parent provides the perspective environment and a special perspective-origin.
Pure CSS content filter
for a simpler effect with fewer lines of CSS, trade the width, height, padding, margin, and opacity properties in each checked input style for “display:none;” — these styles were just set to have a nice tranisition between filters.
Vertical center any element you want with just three lines of CSS.
Super Simple CSS Tooltips
CSS Kitty Toggle
Life is too short for boring checkboxes.
Pure CSS Toggles
CSS Search Field Animation
CSS-only Coffee App Concept
An original coffee app design demonstrating data-driven SCSS and meaningful transitions in an informational app about various espresso drinks.
This is a step by step tutorial on how to perfect parallel park using only css.
CSS-only Calendar App Concept
Pure CSS Progress
a pretty liquid progress-bar.
Simple 3D Menu
Color Extraction Effect
A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.
CSS True Titles
Useful CSS experiment with masking & clipping.
A button that seamlessly transitions from action to confirmation.
Netflix Logo In CSS
The netflix logo animation in pure CSS.
Simpsons in CSS
Chris Pattle created some characters from The Simpsons in pure CSS. See his inspiring CSS creations and the code that makes them work.
Clippy is a tool for generating values for shape functions for the new and cool CSS clip-path property.
A single DIV
A CSS drawing experiment to see what’s possible with a single div.
Motion Blur Experiment
Experiment with motion blur applied to a modal window, using SVG filters.
Silon is an experiment in the true power of CSS selectors. Most people would not expect CSS selectors to be capable of expressing arbitrary boolean logic.
CSS space shooter
An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms.
Blackout is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights.