17 Very Impressive CSS Experiments

There is no doubt that web design innovations come from people messing around, and some of these things show some of the awesome things you can do with CSS and Javascript today. In this post i have collected 17 very impressive CSS experiments from across the web that will make you say “wow” !

Color Extraction Effect

A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.

color-extraction-2

CSS True Titles

Useful CSS experiment with masking & clipping.

css-title-17

Flipside

A button that seamlessly transitions from action to confirmation.

flipside-3

Netflix Logo In CSS

The netflix logo animation in pure CSS.

netflix-4

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.

simpson-in-css-5

Clippy

Clippy is a tool for generating values for shape functions for the new and cool CSS clip-path property.

clippy-6

A single DIV

A CSS drawing experiment to see what’s possible with a single div.

single-div-7

Motion Blur Experiment

Experiment with motion blur applied to a modal window, using SVG filters.

motion-blur-8

Silon

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.

logic-9

CSS space shooter

An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms.

space-shooter-10

Blackout

Blackout is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights.

blackout-1

X-ray

x-ray-11

Squiggly

Squiggly-11

Pure CSS content filter

css-filter-13

Elastic stroke CSS + SVG

elastic-14

Rotate Clock

rotate-clock-15

Isometric experiment

isometric-16


Lascia un commento