The introduction of HTML5 and CSS3, have made the web a much beautiful place by allowing designers and developers to create wonderful animation, designs and functions on a regular webpage which can be viewed on any browser which supports HTML5 and CSS3 like Google Chrome and Mozilla Firefox, without any additional plugins.
These two technologies when put together can create great websites, which are really attractive and worth watching, in other words are a visual treat to everyone. Right now, there are only few websites along the billions of websites that are designed beautifully using HTML5 and CSS3. However, as days pass by, more designers are coming up with new projects, which combine these two technologies and put up a great website together.
To show you some examples of what HTML5 and CSS3 can do, and to inspire you to create a site using these two advanced technologies for the web, I have compiled a list of 15 awesome websites that are created using HTML5 and CSS3, which are worth watching,
Creative Sandbox
This is a wonderful animated website created by Google, which takes you through a journey by flipping pages and emerging 3D objects. Just flip pages and see the magic that happens.
Click Now
This is another great example of CSS3 animations. Just keep scrolling the pages and see the animations as they pop out when scrolling down. This is an example of a simple yet beautifully designed HTML5 page.
Carbon Studio
In this website you get to see a Drag and Drop feature using HTML5 and CSS3, which lets you drag and drop each elements of circles into the bigger circle to reveal a part of the website for more information. This is a fun and interactive way of presenting information to the visitors.
Silk Tricky
This site is based on interactive blocks clicking on which reveals some information by making its place to the center of the website and showing up the information. If in some block there is a video, then clicking on it will reveal the video, playing it automatically.
Wet Willy
This website is another example of the scrolling effects, which produce a animation of something like that. Just keep scrolling and see each background and information reveal in an appealing manner.
The Expressive Web
This is a site created by Adobe, to show the various features of CSS3 and HTML5, using various animations and interactive effects. For example, you can see my name typed in the website. The font is actually editable, and you can put your name there or anything you want to test the font on the website and the feature.
Domani Studios
Domani Studios has set up a unique site, which has a background that looks like a video that is being played in the background of the website. You can even see some distortion effect on the right and left arrows whenever you hover your mouse over them.
Gaming Media
This is a site, which has a horizontal scrolling effect rather than the conventional vertical one, and shows beautiful fragmented animations as you scroll the website. Just keep scrolling and see some great things pop out. Look at the details they have achieved in this site.
Survey of the States
This a website set up by the US government to present the topic of student loans and education. This website also has a vertical scrolling effect, so keep scrolling and see the animations that happen along with the information that pops out.
Dumb Ways to Die
This website features a funny and unique concept, which shows some of the dumb ways to die, like taking off your helmet in outer space, and other funny concepts in an interesting and interactive way. You can also play the video that is featured, and the video will pop out.
Lorenzo Verzini
This is a simple yet very cool portfolio designed using HTML5 and CSS3, as you can see the blinking eye CSS3 animation on the website, which is a pretty cool effect. This website also has a pretty neat and clean layout with changing logo, which changes colour when passing from one section to another.
W3haus
This website is partly designed using CSS3 and partly with images, as you can see the big W3haus logo being a image, while the other parts like the animated colourful objects are designed using CSS, tough some part may be done using images, but still the animations are achieved using CSS. You can scroll down to see more effects and animations.
Fishy
This is a cool website, which features CSS3 animations and shows a fishing environment using these animations. You can scroll down and see some objects and animations pop out in front of you and show their magic. The floating headphones are the coolest part of this website, just have a look at them.
Built by Buffalo
This is a plain and simple website built using CSS3 featuring some minimal animations and a clean layout with cool effects. You have a look at how neat the geometry of the shapes is and how clean the website is. This can be considered as how beautiful a company website can be built using CSS3 and HTML5.
The Graphical Web
To give you another visual treat, I have saved this website for the last spot. This website is designed by Adobe and shows the various aspects and features of CSS3 and HTML5, and the power things they can achieve together when utilized properly.
In this website, you can keep scrolling horizontally and the animations as well as 3D effects that were only possible in games and apps before can be seen here in a website. This is an advanced example of what these two technologies can do.
With this we come to an end of our exciting journey in the world of HTML5 and CSS3, and I hope that you have enjoyed watching these splendid websites specially the Adobe and the Google ones. I would love to have your views and suggestions for HTML5 and CSS3 websites, so do not forget to leave your comments below.
So, which one did you enjoyed seeing the most?
Nice collection Rahul, just for viewing I clicked on the first site creativesandbox and I found it quite awesome. HTML5 and CSS3 are quite useful to web developers but we need to keep an eye on cross browser compatibility. The above said creativesandbox site isn’t supported in opera then I viewed it in Chrome.
Yes right Vijesh, some advanced features of HTML5 and CSS3 are only available in Google Chrome and Firefox right now, hope the other browsers will catch up soon.
Rahul Chowdhury recently posted..Interviews: Hongkiat Lim of Hongkiat Design Blog
Your blog surely rocks and there have been a lot of great contributions.
Wow, Carbon Studio really rocks. At first look, I thought it was flash.
(dofollow)
Really amazed to know its pure CSS coding.
Thanks for sharing Rahul.
Zion Amal recently posted..How to Improve Your Writing Skills and Impress Your Readers.
Yes that website has done a great job, a great concept with the Drag and Drop thing. You are welcome mate.
Rahul Chowdhury recently posted..Interviews: Hongkiat Lim of Hongkiat Design Blog
[...] MUST READ: 15 Inspiring Examples of Awesome HTML5 & CSS3 Web Designs [...]
[...] SEE ALSO: 15 Inspiring Examples of Awesome HTML5 & CSS3 Web Designs [...]