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
, transform
andanimation
.
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 gradient
s. 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.
If you liked my post then,
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!!
0 comments: on "Top 7 Mind-Blowing CSS3 Techniques and Demos"
Post a Comment