The basic web design language, HTML, has come of age, and so has CSS, which is the side of web design that controls aesthetics. The two go together like bread and butter as far as web design goes.
Designers all over the world have just started to discover the enormous potential of the latest version of web, one that is powered by HTML5 and CSS3 – the latest versions of HTML and CSS in that order. This post is a huge collection of cool tricks that use HTML5, CSS3 and a bit of JavaScript (for some pzazz). Just click on the headings below to learn more 🙂 Enjoy!
How to Create a Sexy Vertical Sliding Panel using jQuery and CSS3
You will design the cool sliding panel above. There is plenty of starter HTML5 and CSS3 code making customization easier.
MasterCard Logo in Just One Element
Look at that beautifully designed logo. Jaime Caballero did not design the above image using photo editing software such as Adobe Photoshop. That’s just pure CSS3.
Paul Rhayes Analogue Clock
Paul rhayes clock that is made of HTML, CSS and a small startClock () JavaScript function takes our third position. It’s the smoothest digital-analogue clock I have seen. Check out your current time and learn how it works.
3D Animation using Pure CSS3
CSS3 is pretty awesome because you can now access 3D depth on your website. The following 3D animation will inspire you. Might even give some of you great ideas 🙂
Pure CSS Speech Bubbles
There is so much you can do with speech bubbles when improving UX. As seen above, Nicolas Gallagher shows you how to put semantic HTML and CSS together to create several bubble variants.
The HTML5 Progress Bar Element
If you love neat and interactive design, you will want to check out the cool styled HTML progress bars designed by Pankaj Parashar.
Agent 008 Ball and 34 HTML5 Games
They are fun and addictive. I predict you will probably like Agent 008 Ball. Trust me, it’s not what it seems to be. You will also notice Angry Birds Chrome on the list, but keep in mind that Angry Birds is a Flash game 🙂
45+ Beautiful and Creative HTML5 Websites to Showcase
This huge post is a rich source of HTML5 and CSS3 tricks. The only drawback is you have to pull the source code via “View Page Source” option. Of course, that might present a few problems in terms of comprehension as well as copyright issues and we don’t want that. Just go through these 45+ HTML5 websites and see HTML5 in its full glory.
Nine Image Expander Thing
This Nine Image Expander Thing runs on HTML5, CSS and JavaScript only.  In previous years, this was only possible with Flash but CSS3 is getting more powerful by the day. By the way, Nine Image must refer to how the ‘Big Picture’ in the expander is sliced into nine sections. The Expander Thing, well, it must refer to how every section expands into a whole picture on clicking.
CSS3 Speech
To enhance accessibility and usability, it is important to ensure your website caters for speech readers as well. You have full control over speech on your site, thanks to the Speech property, which gives you power over:
- voice-volume
- voice-balance
- Speak – Used to spell out specific words in your content
- Pauses and Rests
- Cues
- voice-family – Used to specify the type of voice
- voice-rate
- voice-stress
- Etc
Example:
.girlvoice {
speak: normal;
voice-family:female;
voice-balance:left;
voice-volume:soft;
cue-after: url(sound.au)'
}
Super Slick jQuery Menu with CSS3
This here is a great illustration of pure CSS and jQuery genius at work compadre. When you mouse over each individual menu item, the rest fade away. Bye bye Flash, welcome CSS3.
28 HTML5 Features, Tips and Techniques You Must Know
Published by Tuts+, this 500plus-comment post puts together 28 HTML5 features and tricks every web designer must know. Dig in, discover 28 more HTML tricks.
Custom HTML5 Video Player
Did you know you could leverage the <video> element, the power of CSS3 and jQuery to create a custom video player for website? Ionut Colceriu over at Dev.Opera knows the way and he is willing to share.
How to Make an HTML5 iPhone App
iPhone app development was the preserve of the Objective-C developers. You know, those hardcore C developers who are having a field day churning out app after app. Well, thanks to HTML5, CSS and a little JavaScript, you can now make your own iPhone app.
Pure CSS Folded-corner Effect
Another one of Nicolas Gallagher’s inventions, this design uses zero images, no extra markup, just pure CSS. This trick works across all major web browsers and you can play around with the designs using CSS3 to get different shapes and colors.
Over to you…
Do you have a few HTML5 and CSS3 tricks up your sleeves? If you do and would like to share with the rest of us, please do so liberally in the comment section below!
