10 Mind-Blowing Experimental CSS3 Techniques and Demos

Categories → CSS,Web Design

As CSS3 gathers momentum, more and more new techniques and ideas are being published every other day. Each seems to explore exciting never seen before avenues, and ALL push CSSes boundaries ever further away. It really is an exciting time for web design.

The post should have been called “The Top 10 Kick-Ass Experimental CSS3 Techniques That Simply Blew My Mind Away!“, but instead we opted for the conservative route. Having said that, that title describes this post to a tee, and gives you a clearer idea of what you will find.

Anyway, here are our favorite CSS3 experimental techniques, And please, please do try this at home, we will really look forward to seeing your results.

Our Solar System – An experiment with CSS3

This is a recreation of our solar system using the CSS3 features border-radius, transform and animation.
The orbits and planets have all been built using border-radius, while the animation have been done via –web­kit animation properties and transform. The result is amazing!

Star Wars HTML and CSS: A NEW HOPE

A couple of years ago, would you have thought that the Star Wars Episode IV opening crawl could be built by using only CSS and HTML? I didn’t either.
This inspirational experiment, built by Guillermo Esteves, only works in recent versions of Safari and WebKit on Mac OS X.
If you do view it in your browser, just be aware that it may not work work, and may even crash your browser. Never mind the warnings, go for it, try the demo!

Pure CSS3 Animated AT-AT Walker from Star Wars

This article is not only showcasing experimental CSS3, it actually shows you how to do it via a highly detailed and well written tutorial (by Anthony Calzadilla), that walks you through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back.

Pure CSS3 Spiderman Cartoon

This experiment is a recreation of the intro to the classic 1967 Spiderman cartoon using CSS3 for animation and with a little dash of HTML5 for audio.

CSS3 Clock – 3D Transforms and Transitions

This experimental clock has been built by using CSS3s 3D transforms and transitions. JavaScript has only been used to set the time and turn the wheels, but the wheels themselves are built and animated using only CSS. There are two demos available, one with Javascript and one without.

Pure CSS3 Page Flip Effect

By using CSS3 gradients, transitions, 2d transforms and clipping, Román Cortés has built this pure CSS3 – without Javascript – page flipping effect magazine.
You could add some Javascript and it would then be possible to do a full catalog viewer just like the existing ones Flash versions, which are popular.
It works in Webkit based browsers (Safari and Chrome) only.

Pure CSS3 Cube

Create Social Media Icons in Pure CSS

These icons are an amazing and practical example of what can be achieved with CSS3. Built using the new CSS3 properties border-radius, text-shadow, box-shadow and gradients. They are an amazing achievement.

Curtis CSS Typeface by David DeSandro

Curtis is the name given to this font, that has been entirely built using CSS3. All shapes are rendered by the browser, using a combination of background-color, border-width, border-radius, and a heavily reliance on absolute/relative positioning.

Anigma – Online Gaming using only CSS3 Animations and Transitions

Benjamin Meyer has built the experimental Anigma, an online game designed to showcase some of CSS3s functionality, and in particular its transitions and animations.
Anigma is a simple puzzle game where the player has to remove the jewels from the screen, by moving matching jewels next to each other, and progress through multiple levels of varying difficulty.
The source files are also available.

CSS 3D Meninas

This is another experimental demo from Román Cortés, this time he has taken the classic painting 'The Maids of Honour (Las Meninas)' and given the painting a CSS pseudo-3D/parallax effect. It is pure CSS.
It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it even validates!

You might also like…

30 Pure CSS Alternatives to Javascript »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »

About the Author: Paul Andrew (832 Articles)

Paul Andrew is the editor and founder of Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook, on Digg or you can subscribe via RSS.

Comments and Reactions

Partners