CSS3 Watch

Collecting examples of creative, innovative, and unexpected use of CSS3.

CSS3 Watch is curated by Zander Martineau
Hi,
I created new Google Chrome Logo using simple use of CSS3. The link is here. http://dl.dropbox.com/u/8498648/chrome-logo.html.
New smooth Chrome logo is being seen in some of the dev channels and here is chrome post about their new logo on 21st March. http://chrome.blogspot.com/2011/03/fresh-take-on-icon.html
On Friday (25th March) night, I gave it a shot and created the cool new Chrome logo with just the use of CSS3. I hope you may like it :)
Regards,
Rajendra 

Hi,

I created new Google Chrome Logo using simple use of CSS3. The link is here. http://dl.dropbox.com/u/8498648/chrome-logo.html.

New smooth Chrome logo is being seen in some of the dev channels and here is chrome post about their new logo on 21st March. http://chrome.blogspot.com/2011/03/fresh-take-on-icon.html

On Friday (25th March) night, I gave it a shot and created the cool new Chrome logo with just the use of CSS3. I hope you may like it :)

Regards,

Rajendra 

CSSPrefixer

You hate writing vendor prefixes for all browsers? Just let CSSPrefixer do it for you!

(Source: decodering)

Totally f-ing awesome tool by Matthew Lein to create CSS3 transitions.
Bookmark it.

Totally f-ing awesome tool by Matthew Lein to create CSS3 transitions.

Bookmark it.

I wanted to do something a little different and make use of new CSS3 transitions when designing my portfolio. I separated key elements onto their own dimension, and swung them around in 3D space. It kind-of looks like a pop-up book!

I wanted to do something a little different and make use of new CSS3 transitions when designing my portfolio. I separated key elements onto their own dimension, and swung them around in 3D space. It kind-of looks like a pop-up book!

A logo animation, fully done in CSS3, with only one HTML element used. The logo has transparency, and can be used on any type of background.

A logo animation, fully done in CSS3, with only one HTML element used. The logo has transparency, and can be used on any type of background.

Media Queries

Just found this new blog that ‘collects’ examples of websites with responsive designs. Check it out.

simurai:

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.

simurai:

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.

simurai:

:toggle - A while ago I worked on a project where I needed just a simple toggle button to show and hide some content. The obvious way would be to use JavaScript for that functionality. But then I thought: Is it possible to create a toggle button with only HTML and CSS3?
See the result: Live Demo.

simurai:

:toggle - A while ago I worked on a project where I needed just a simple toggle button to show and hide some content. The obvious way would be to use JavaScript for that functionality. But then I thought: Is it possible to create a toggle button with only HTML and CSS3?

See the result: Live Demo.

Cracking demo from Mark Otto illustrating multiple drop-shadows on text.

Cracking demo from Mark Otto illustrating multiple drop-shadows on text.

Pure CSS GUI Icons
Another amazing effort from Nicolas Gallagher. He has created no less than 84 GUI-style icons for ‘possible’ use in a web app. This experiment should be commended & again highlights the possibilities that CSS3 affords.
Check out the source code to really understand how they all work. Also, Firebug cannot view CSS pseudo elements so use Safari or Chrome instead…

Pure CSS GUI Icons

Another amazing effort from Nicolas Gallagher. He has created no less than 84 GUI-style icons for ‘possible’ use in a web app. This experiment should be commended & again highlights the possibilities that CSS3 affords.

Check out the source code to really understand how they all work. Also, Firebug cannot view CSS pseudo elements so use Safari or Chrome instead…