Saturday, May 22, 2010

Top 7 Mind-Blowing CSS3 Techniques and Demos

yestutor brings the top seven Mind-Blowing  CSS3 Techniques and Demos around the web for its users.Hope you like them and share them.

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.

Our Solar System – An experiment with CSS3

This is a recreation of our solar system using the CSS3 features border-radius, transformandanimation.
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!

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

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.

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.


People who read this post also read :



If you liked my post then,

Subscribe to this site via Email:

Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!

DropJack!
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 comments: on "Top 7 Mind-Blowing CSS3 Techniques and Demos"

Post a Comment