Put simply, CSS3 regions associate boxes and blocks with other blocks to allow a designer to make content flow from one box into another automatically. Previously this was impossible with just CSS. The CSS3 Regions Specification expands CSS further from a static design to a more responsive and future proof language. This article is about new CSS which may not…

HTML5 is a pretty huge undertaking to learn. So much is being added to the web that has been sorely required by web developers for a long time. Since the specification is so big, many features can easily be missed or thrown to the side by the community at large. Web Notifications Desktop and mobile applications have had notifications for…

CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. How it Works Using just CSS we can accomplish some pretty complicated effects. These should be applicable to both images and HTML elements,…

With a lot of talk recently over at Mozilla about supporting the Flexbox specification in the near future (in its current iteration anyway), I thought it would be good to cover exactly what the CSS3 Flexible Box Specification can do, and how it’s really going to simplify layout design, as well as changing forever how we do it.

I’ve been learning a bit more about CSS3 units over the past few days and it’s rather surprising how the web design community seems to have totally ignored their possible uses. The new CSS3 units specification is currently being refined, although the things I mention here are unlikely to change.

3D Transforms are just one of the more refined parts of CSS3, although there is still quite a long way to go before all the kinks are worked out. In this article we’ll be going over the basics of 3D transforms, how to use them, and when to use them, including a bunch of examples!

I recently made a post about creating a share button that zoomed out with transitions on hover. Although I had been targeting desktops with the demo, a user called egypturnash pointed out that the demo didn’t work on iPads or touch enabled devices because there is no hover option available. You touch or you don’t touch. My demo simply wouldn’t work if there was no way to hover. So how do we go about fixing this problem?

In the past few weeks a new official specification for CSS variables has been introduced by the W3C with a lot of scrutiny and praise from the web design community. It’ll probably be a long time before any of us are realistically using variables every day, but it’s certainly something to look forward to. There are alternatives at the moment though.

The CSS4 specification is already in the early stages of being written (for selectors, anyway). I must stress just how work in progress this is, in the sense that some of this stuff might not make the final cut, while more stuff may be added. It will however give you an idea of what you can expect some of this to turn up in the real CSS4 specification. Most of these ideas are probably the basis of what the W3C is aiming for in the CSS4 Selectors Specification.