Magic with CSS3

Lets face it, the world is filled with some amazing people, and these amazing people have pushed the technology to create some ridiculously simple solutions with some stupidly clever ideas. This is a article dedicated to those CSS wizards who have created some AWESOME stuff.

Here's a small list of what Selesti’s web development team have stumbled across recently!

CSS iOS Icons (webkit only)

A student from Chicago created a full set of the default iOS icons using nothing but the new CSS3 features that webkit browsers have implemented, this might now work for Firefox and other browsers that have implemented more css standards, but cross-browser support aside, what he's achieved is amazing, could this possibly be the way forward for creating full colour salable images? - Seriously zoom in! Not a pixel of quality is lost!

ios-iconsVisit CSS iOS Icons

Flipbook

If you love crisp modern design and interaction the next example will be a delight for you. Using CSS transform the guys at codrops have come up with this elegant solution to creating a full screen flip book!

flipper

Visit CSS Flipbook

CSS3 Patterns

This is a Selesti discovery from the other week; it's a remarkable use of the new gradient implementation in CSS3 to create scalable patterns, and not touching a single image. Give them a look as some of them are so sleek and simple it's untrue!

patternsVisit CSS3 Pattern Gallery

CSS3 Solar System

This site has been floating around now for some time, but was one of the first CSS3 tech demos, and to this day still one of our favorites! Its clean and simple. Definitely give it a look!

solarVisit CSS3 Solar System

CSS3 Box Shadow Experiements

Zurb's Playground has tones of nice html and css fun one of our favorites being the bubbling potions! But check out some of these box-shadow related fiddles that they've come up with. I'm sure there's loads of great ways to find a use for them...

shadowsVisit Zurbs Playground

BigVideo.js
(Not So much CSS but more JS- But its still cool!)

As this is not CSS related we'll be quick - If you love motion, and full screen colour, check this bad boy out!

fullbgSee BigVideo in action!

Zen

This is definitely eye candy. Using CSS3 hooked into the new HTML5 audio API creates an awesome all in one audio controller, make sure you turn your speakers up.

zenVisit Zen player

One Hour Per Second

This is CSS animation built by the folk at YouTube LLC. It shows a beautifully designed css transitional timeline with some lovely animations, sit back and let YouTube take you on a journey!

youtubeWatch OHPS!

Beercamp

You've all seen it, and if you haven't, you should have! So go there now. This is the 2012 Beercamp web-ad.

beercampCheckout Beercamp 2012

Adobe: The Expressive Web

As per usual, adobe jumping on the band wagon and diving into every technology possible. Here's their take on the the new "expressive web" showing some nice CSS3 examples and what you can do with it.

adobe

That's it for this week; we hope you have found something here to spark off a revolutionary web development idea that will change the world! And if you haven't then maybe you should check out some of our other posts, or get in touch and challenge us to apply some of these techniques and skills to your web project.