13 Amazing Examples of HTML5 and CSS3

Written by Kevin Liew on 14 Jul 2010 •
372,163 Views • Inspirations

Introduction

Another post that demonstrate the power of HTML5 and CSS3. New experimental demonstrates are being released so often, so I must make another post for it! Make sure you have the latest version of browser, preferably latest built of Safari or Chrome. Personally, I like GoogleBox and The Tribute to the Beatles, I think they both are really creative!

In case you missed my previous post regarding CSS and HTML5, you can read it afterward. If you have got more examples to share, please let me know by dropping me a comment!

Slidenafill
GoogleBox
Page Flip
Bar Chart
Solar System
Colourful Clock
CoverFlow
Leaves
Bokeh
3D Bar Chart
A Tribute to the Beatles
Pacman
Coke Can

This isn't made with CSS3 nor HTML5, it's CSS1/2! Pretty amazing concept.

By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

35 comments

kapkek 14 years ago

seems delicious like my cupcakes

jeffz 13 years ago

@James Leahy
"but not ready for prime time. Likely 1-2 years away"

Even with Apple's Jobs boot at work, W3C will not beat its original roadmap - most lilkely.
Remember all ... HTML5 is a draft, it is not standard ... yet.
And it will not likely change for 4-5 years.
At least.
AFAIK old road map mentioned 2018+ for HTML5 to become a RC.

show 13 years ago

Excellent html5 tutorial resources. Here is one more website focused on html5 inspiration http://www.csstrophy.com .

kavita 13 years ago

awesome stuff and stuning effects reallyyyyyyyyyyyyyyyyyyyyyy

scott chu 13 years ago

can't get page flip to work normally. I've tried several html-enabled browsers.

Konrad Dobson 13 years ago

Great stuff.. for html5/css3/JS, but be honest. In flash these would look and feel so much better.

Prodyot 13 years ago

In flash these will not load in slower connections.

geektard 13 years ago

These work on my iPhone.

No technology lasts forever. Flash is irreparably flawed. HTML5 = future.

Konrad Dobson 12 years ago

@Prodyot: Years ago flash was sometimes slow due to faulty user programming, yes, but technologies change, and flash has had mÃ¡ny major updates since those days.

@geektard: what many people fail to realize is that mobile webdesign is a seperate area of expertise. If a client wants his site to be viewed on a mobile device, it's often better to create a seperate version that is fast and contains different - lower res - images. Flash is still great for many main websites that need to be a little more lively.
And no, HTML5 is not the future. It's a step in the right direction, yes, but anyone who's actually gone through the trouble of testing both technologies realizes it's really not a gamechanger. 95% of all the so-called HTML5 sites are mainly using javascript or jquery to make their fancy stuff. And javascript is hardly a new language. HTML5 has been turned into a brand name out of sheer ignorance. HTML5 itself is merely a container format that - granted - does add alot of clean guidelines and SEO optimalisations, but that's about it. Please take the time to do the research before making such bold statements. Flash is far from gone. In fact, with the basics of flash going to html5/javascript people finally won't associate flash with those simple things. Flash is SO much more.