CSS3 Watch

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

CSS3 Watch is curated by Zander Martineau
Zurb never cease to amaze. This time they have created three cracking experiments that focus on box-shadows & text-shadows, but there are tonnes of other things to be found in the code too. Check it out now.

Zurb never cease to amaze. This time they have created three cracking experiments that focus on box-shadows & text-shadows, but there are tonnes of other things to be found in the code too. Check it out now.

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 :target pseudo-class and CSS animations for the bouncing effect.

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 :target pseudo-class and CSS animations for the bouncing effect.

A very cool presentation that explains and uses lots of CSS3 by Lea Verou Use you right arrow key to progress

A very cool presentation that explains and uses lots of CSS3 by Lea Verou

Use you right arrow key to progress

Umbrui update: More awesome experimental work by Simurai

Umbrui update: More awesome experimental work by Simurai

webkitbits: Jordan Dobson has been up to some great things — be sure to check out the source it’s very clever. I’ve revised my previous version of the loading indicator so that the positioning is much cleaner, using less markup, less specific CSS selectors and allows you to resizing. It also is resolution independent since it’s created entirely with CSS so it looks great on your desktop or retina display. :)

webkitbits:

Jordan Dobson has been up to some great things — be sure to check out the source it’s very clever.

I’ve revised my previous version of the loading indicator so that the positioning is much cleaner, using less markup, less specific CSS selectors and allows you to resizing. It also is resolution independent since it’s created entirely with CSS so it looks great on your desktop or retina display. :)

CSS Progress Bar by Ivan Vanderbyl You gotta see it to believe it, it’s great!

CSS Progress Bar by Ivan Vanderbyl

You gotta see it to believe it, it’s great!

simurai: umbrUI is a demo of input checkbox elements made with CSS3. There was a request, so I tried. First I thought to create a div with 2 buttons inside, but acutally, when you think about it.. a switch has an on and off state, so why not use a checkbox input element. And as it turnes out, it worked out pretty good. For the above Rocker switches no JavaScript, images or extra markup is needed. Just a normal <input type=”checkbox” /> and custom data attributes to add the Pictos Font icons, like this: <input type="checkbox" data-icon1="P" data-icon2="v" /> The rest is all CSS3. The main input element is mainly just the black background. Then the :before is used for the left part und the :after for the right one. The Pictos Icons get injected trough content:attr(data-icon1/2);. For the 3Dish perspective a transform:rotateY is used, but unfortunately for now, only Safari can render it correctly. Then of course a lot of gradients, box-shadows, text-shadows. To have the on/off states, you can use the pseudo class :checked to give it a different style when the user clicks. A small detail if you look closely.. there is a real reflection of the active blue icon applied with a box-reflect. See the demo (Safari or Chrome).

simurai:

umbrUI is a demo of input checkbox elements made with CSS3. There was a request, so I tried. First I thought to create a div with 2 buttons inside, but acutally, when you think about it.. a switch has an on and off state, so why not use a checkbox input element. And as it turnes out, it worked out pretty good.

For the above Rocker switches no JavaScript, images or extra markup is needed. Just a normal <input type=”checkbox” /> and custom data attributes to add the Pictos Font icons, like this:

<input type="checkbox" data-icon1="P" data-icon2="v" />

The rest is all CSS3. The main input element is mainly just the black background. Then the :before is used for the left part und the :after for the right one. The Pictos Icons get injected trough content:attr(data-icon1/2);. For the 3Dish perspective a transform:rotateY is used, but unfortunately for now, only Safari can render it correctly. Then of course a lot of gradients, box-shadows, text-shadows. To have the on/off states, you can use the pseudo class :checked to give it a different style when the user clicks. A small detail if you look closely.. there is a real reflection of the active blue icon applied with a box-reflect.

See the demo (Safari or Chrome).

(via simurai)

This seemingly simple site for Andy Clarke&#8217;s new book, Hardboiled Web Design uses masses of CSS3. You have to see the stylesheets to believe it: If you want to understand how CSS animations work, have a look at animation.css Also examples of very neat CSS

This seemingly simple site for Andy Clarke’s new book, Hardboiled Web Design uses masses of CSS3. You have to see the stylesheets to believe it:

If you want to understand how CSS animations work, have a look at animation.css

Also examples of very neat CSS