Tried to make a Brushed Metal style in CSS3. The texture is done by using 3 repeating-gradients with different length. That makes it look somewhat random. For the linear version, browser support is pretty ok, but for the radial one it’s not quite there yet.
In addition I tried to add a conical gradient for the circle with just faking it with ellipse gradients. It’s ok for low contrasts and if you cover the middle part with an icon or so.. hehe.. ;-P A much more real looking technique is used in this experiment, but I believe it currently only works in Safari and Chrome Windows. Let’s hope that CSS4 will add support for real conical gradients.
See live Demo.
Source: lab.simurai.com
I have been interested in the idea of building a turntable-based UI in HTML for years; however, the past presented a number of technical hurdles. Setting dreams of browser-based remixing aside, simply recreating the core design elements of a turntable was practically infeasible until the advent of CSS3. The features most notably missing from browsers involved drawing circles, rotation of elements and low-level control of audio. As of 2011, it’s a pleasure to say that these features can be implemented almost entirely using HTML, CSS and JavaScript alone.
Read the whole detailed post here.
Source: gigaom.com
ZEN is a HTML5-CSS3 Audio Player. I’m really happy how the little details turned out. Like how it morphs from a circle to a square button, the swirl at the beginning or the skipping of the record if you hold the progress bar.
But what I like most.. At the beginning, there is just a big simple button. You click it, and it shows its fancy pants. You click it again, back to the simple. It’s like the visuals match the sound. From a relaxing Zen garden into a crazy club and back.
See the demo.
Source: simurai
Mac OS X Dock Built Using CSS3 by Michael Hue
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the
:targetpseudo-class and CSS animations for the bouncing effect.
Source: macstories.net
IE9 is the IE6 of CSS3
Microsoft has been bombarding the media with claims about how much better IE9 is than all the other browsers, more HTML5 and CSS3 compliant than any other browser that ever existing and ever will. It’s the only browser that passes all the tests they made up. And, Microsoft has finally implemented the CSS3 selectors that were implemented by other browsers back in, what? 2003? Because Microsoft has updated IE to support CSS3 selectors and rounded corners, they want us to believe that somehow IE9 magically supports the whole slew of CSS3 visual styling. I’m afraid it doesn’t. As a matter of fact, IE9’s support for CSS3 visual styling is so poor that the results are shocking.”
This is disappointing.
Source: osnews.com
CSS3 Ads Versus Flash Ads
See if you can tell the difference between an ad made in CSS3 vs the same one made in Flash.
iPad-ready websites. (link to view more)
looks like a great start.
