10 Awesome CSS3 Experiments

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article.

CSS3 Isometric Text Demo

In this demo the 3D text is created from multiple offset shadows that increase in darkness with no blur applied. The text is then made isometric by applying a 2D transform to skew the text in the Y axis to an angle of -26.6°. (OK, true isometric art is set at -30°, however pixel-based isometric art is set at -26.6° as this produces the smoothest lines).

CSS3 toggle-button without JavaScript

This is a CSS3 toggle-button that works without JavaScript. Nothing special, just a cheap trick.

Rotating dashed border with rounded corners

Animated CSS3 helix using 3d transforms

One of the most popular articles on Marcofolio.net in 2010 was the 3d animation using pure CSS3. In my opinion, it was one of the best articles for myself as well, since I learned some pretty neat stuff about CSS3 and 3d capibilities.

Pure CSS Timeline Demo

First and foremost, is the solution I’m about to share with you the best solution? Probably not. I may revisit this at a later time when I have more than fifteen minutes to spend thinking about it, but for now it works and is accessible.

CSS Lightbox

Building a pure CSS 3D City

Most of you are aware that Safari and most decent modern browsers support CSS rotation. No javascript nor plugins involved.

The World’s Highest Website

Welcome to the World’s Highest Website! Currently, it’s 18.939 kilometers high (that’s about 11.77 miles), and an enormous pleasure to scroll. Enjoy.

Pure CSS GUI icons (experimental)

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.

Pure CSS Twitter ‘Fail Whale’

The idea for this came to me this morning after being greeted first thing this morning by another Twitter outage. I’d been looking for something to stretch my CSS muscles on, and the Fail Whale seemed perfect.