10 Most Expressive HTML5 and CSS3 implemented Web Design

Advertisement

Adobe helps develop fluid CSS modules that adapt to various viewing experiences. HTML5 and CSS3 have brought to the design world not only new techniques and an easier or more manageable code but also the chance to create features for a website that were previously available with flash, javascript or some pretty hardcore designing. CSS Regions is a module that builds on the column-based layout options now available in CSS3 to enable front-end developers to flow text across different columns (or “regions”) on a page. This allows for more dynamic page designs, which can shapeshift to fit different devices and device orientations on-the-fly.

HTML5 and CSS3

Another improvement to CSS proposed by Adobe is called Exclusions, which lets developers flow text into a non-rectangluar shape, or to wrap it around graphics on the screen, much like what’s been possible in desktop publishing for decades. Check out the video below for examples of these new standards at work.

aprilzero

A ticking clock animated using HTML5 and jQuery

Simurai

Space CaCSS - Animated CSS3 background patterns. Let’s get trippy. How does it work? The basic technique is to use a CSS3 repeating-radial-gradient as a background and animate it by changing its background-size. That’s all what’s needed in the second example. Pretty hypnotic. If you want more variations you can use a second gradient with a different background-size. Or add a second animation for the background-position with a different timing. That makes it possible to create a somewhat random looking motion like in the last example (orange).

Bifter

Bifter is an SVG Comic that also utilises HTML5, CSS3 and RDFa as well as remaining screenreader friendly.

Teamviget

We’re searching the universe for intelligent beings who inspire us and will help us conquer new frontiers. Read our stories and make contact if you are ready to join the adventure.

Ztype

An HTML5 browser-based typing game.

The wilderness downtown

That famous Arcade Fire video that all your friends emailed you about.

klowdz

Find shapes in clouds and draw what you see! Share with friends in the gallery.

Soulwire

please check the Experiments in Code and I am sure you will love it

The Expressive Web

This site is a resource and showcase of some of the newest, and most expressive features being added to the web today.

lights.elliegoulding

Lose yourself in @EllieGoulding’s Lights, an interactive & colorful music video experience using #webgl

Blogger from UK. A person that really likes technology, design, photography and web design. He is the New Owner of Web Design Burn & Founder of Lava360. Following WDB on Twitter.

Interesting News From

  • Anonymous

    My own PSD to HTML website
    http://www.css4me.com

  • http://www.the-triumph.com Web Design Company Mumbai

    Nice Post.

  • http://bacsoftwareconsulting.com/blog/ Boutros AbiChedid

    Very Nice list. They are all nice, but my favorites are: ‘The Wilderness Downtown’ and ‘Expressive Web ‘

  • http://www.cyberdesignz.com/ Business Website Design

    Great collection of web design with HTML5.
    HTML5 provides a lot of new tags, elements and attribute.
    kindly tell me which tool you use for design purpose?
    Thanks

  • Tanuj Rastogi

    Great design and Best collection of web site design with HTML5

  • http://www.sigmainfotech.com.au/websitedesign.htm seorajeevpal

    While designing site, the prime focus is to increase prospects and sales and not to look for getting in the search engines for placing banners.

  • http://www.howgood.im/ Nikhilsapkota02

    Amazing Collection :D Very inspiring.