CSS3

Another new property introduced by the CSS3 Backgrounds and Borders module is background-size. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover.

Browser support has grown of late, with the current versions of most popular browsers now supporting background-size, including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes.

Read the updated article in our CSS3 Preview section »

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support for multiple backgrounds is now relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Read the updated article in our CSS3 Preview section »

Google have recently updated their HTML5ROCKS site, originally launched in June this year, with numerous new demos and tutorials for HTML5 and CSS3. The latest update adds, amongst other articles, a tutorial for CSS3 Web Fonts (with @font-face) and a new ‘HTML5 Studio’ – offering a number of live demos for many of the new possibilities offered by HTML5 and CSS3.

Since being updated the site has been causing quite a stir online and if you’ve not come across the site before, it’s an excellent resource for getting to grips with HTML5 & CSS3 and certainly worth a visit.

The border-radius page in our CSS3 Preview section has been updated to reflect the latest version of the Backgrounds & Borders specification and the latest browser support.

The page now offers a more comprehensive and easy to follow guide/tutorial, including cross-browser examples, which should enable any designer (whether novice or expert) to get to grips with border-radius in a matter of minutes.

Benjamin Meyer has been busy creating Anigma, an online game designed to showcase some of the functionality in CSS3, particularly CSS3 Transitions and Animations.

One aspect of CSS3 that hasn’t received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines, in this alternative box model:

“… the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.”

It’s probably easier if I show you how this works. NB: you’ll need to be using Firefox, Safari or Chrome (or a variant thereof) to see the demos; and if you’re reading this in a feed reader, you’ll need to visit the original post to see them.

As well as all the new CSS features we mentioned previously, Firefox 3.6* is gaining a brand new property value: image-rect. This allows you to clip an area of a background image to display only part of the whole.

It uses Mozilla’s proprietary prefix, and takes two values: a URI for the image, and the boundaries of the clipped area (as four comma separated values, like the clip property):

Simon Fraser announces support for CSS 3D Transforms, on Mac OSX Leopard, in the latest Webkit nightlies.

If you want to get a taste of using the CSS 3 Template Layout module, Alex Deveria has written a jQuery plugin which implements the syntax.

I haven’t had the opportunity to try it out yet, so let me know how you get on.

Six Revisions put six questions to the estimable Eric Meyer on the subject of CSS3, and we get some nice link love.

Also (and I’m slightly late with this one) John Resig, creator of the jQuery library, runs an approving eye over the Advanced Layout Module. Webmonkey provide further context. We looked at the module back in 2006 (part one, part two), and my tongue-in-cheek prediction of a ten year wait to use it is now down to only eight years…