HTML5 and CSS3 have made the web a more beautiful place to work, but they also give you a bunch of new markup and styles to master – not to mention constantly changing support. Worse still, browsers can only take so much so you need to keep your code tidy and your scripting under wraps if you want your projects to work on multiple devices.
Enhancing Your Image Thumb Galleries Using CSS3 Transitions And Transforms (Responsive)
CSS-Only Responsive Layout With Smooth Transitions
Tympanus offers up another CSS-only tutorial and takes you through the process of creating a responsive layout with little more than a style sheet.
Mozilla Guide To HTML5 Canvas
The Mozilla Developer Network introduces the power of HTML5 canvas which allows you to script images, graphs and a range of animations for beginners and pros.
A Thought On HTML5 Geolocation
This guide from InstantShift goes through the ins and outs of HTML5 geolocation and some of the key features of geo-data that makes targeted marketing more effective.
Page Transitions With CSS3
How To Use HTML5’s Drag And Drop
Cirlce Hover Effects With CSS3 Transitions
HTML5 Audio Player With Playlist
Every now and then you come across a project that needs some kind of media player and HTML5 makes this a whole lot easier – as shown by this tut from Script Tutorials.
Create The Illusion Of Stacked Elements With CSS3 Pseudo-Elements
If flat design isn’t your thing then you might prefer to add a bit of depth and texture to your web projects. Inspect Element offers up one option with a quick look at CSS3 Pseudo-Elements and how create a stacked elements effect.
Learn how to make a stopwatch using CSS3 keyframe animations with this interactive tutorial from The Code Player.
Height Equals Width With Pure CSS
CSS lacks a simple way to put equal height and widths on divs, but luckily some clever people have come up with CSS-only solutions and this article from Made My Day visualises a fix for height equals width using pure CSS from A List Apart and Stack Overflow.
Expanding Search Bar Deconstructed
A responsive search bar goes a long way on multiple devices when your site has a lot of content for users to find. Tympanus makes a final appearance on our list to show you how it’s all done.