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.
You will design the cool sliding panel above. There is plenty of starter HTML5 and CSS3 code making customization easier.
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.
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 🙂
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.
If you love neat and interactive design, you will want to check out the cool styled HTML progress bars designed by Pankaj Parashar.
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 🙂
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.
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:
- Speak – Used to spell out specific words in your content
- Pauses and Rests
- voice-family – Used to specify the type of voice
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.
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.
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.
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!