Squash text boxes around any shape with ‘wrap-shape’

The wrap-shape property, along with a couple of other complementary properties, is part of Exclusions, an Adobe-led standard allowing for text to dynamically flow in and around any shape, designed to provide more magazine-like layouts.

What’s it useful for?

We’ll let Adobe’s video speak for us here:

What’s the current support like?

Absolutely zero. Who knows whether this will ever enter the official spec (though we certainly hope so). There is, however, an experimental browser capable of supporting exclusions, available for Mac and Windows.

Other options?

jQSlickWrap can emulate some of these features, but it only works as long as the image is placed in the corner (here’s it in action). Closer to CSS Exclusions is the beautifully-named jQuery plugin Bacon, though its method of dividing each line of text into a separate div means text is difficult to select and isn’t dynamic.

More info:

• Documentation on GitHub

Chop up your content with ‘paged’

This draft property from Opera splits elements into “pages”, which can be navigated by clicking (or, on a touchscreen, tapping) and dragging between them - a bit like on an eBook reader.

What’s it useful for?

“Computers have taken a step backwards, with software – most notably web pages – adopting the scroll metaphor and offering scrollbars for navigation up and down our content,” argues Opera’s Chief Technology Officer, Håkon Wium Lie. It’s certainly slick, though whether paged content is superior to “scrolls” is possibly up for debate.

What’s the current support like?

At the moment, the only browser capable of rendering this property is an experimental build of Opera (download it: Windows / Mac / Linux / Android). Who knows if it will ever be implemented by any real browsers.

Other options?

Though there are plenty of jQuery plugins for paginating content, we haven’t come across anything that works in quite the same way as Opera Reader’s implementation - at least not with cross-platform support.

More info:

• Opera documentation
• W3C draft

Add effects to images with ‘filter’

Originally designed for SVG images only, the filter property allows manipulation of an image’s colour, saturation, contrast, hue and focus, potentially all at the same time. You can see it in action here.

What’s it useful for?

Manipulating images on the fly opens up a range of possibilities - not only for nifty in-browser image editors, but for a greater range of subtle mouseover effects in combination with CSS animations.

What’s the current support like?

Latest versions of Chrome and the just-released Safari 6 support filters, but that’s your lot.

Other options?

If you have access to a site’s backend, you can use ImageMagick, a software suite which can plugin to PHP, Ruby, Perl, Java, C and more. There’s a great tutorial for making Instagram-style pictures with PHP and ImageMagick over on nettuts+. Alternatively, there’s a few jQuery plugins that can do similar things using HTML5 canvas.

More info:

• MDN: filter

• Demo of filters in action

Pull and stretch any element with ‘resize’

If you’re a user of Safari, Chrome or Firefox you may have grown used to a little handle in the corner of all text areas allowing you to expand it to any size. What you may not realise is that this is an implementation of the resize property.

If you're using Chrome, Firefox or Safari you should be able to resize this box.

You can add this effect to any element by giving it the CSS property resize:both. This is “both” because it can be resized both horizontally or vertically, but you can restrict its movement using resize:horizontal or resize:vertical.

What’s it useful for?

In your average blog, maybe not much - but it could serve some function in a web app. (Alternatively, when IE and Opera finally implement the property, you could make all your text areas resizable).

What’s the current support like?

Safari, Chrome and Firefox have had it implemented for years - but unfortunately Internet Explorer and Opera don’t look anywhere near implementing it. Use at your own risk.

Other options?

As you might expect, there’s a whole load of jQuery plugins designed specifically to perform this function. jqDnR is under 1kb and lets you make any element draggable as well as resizable, while if you’re using jQueryUI the Resizable plugin comes with more options and the ability to resize from any edge.

More info:

• MDN: resize
• ImpressiveWebs demo

Even more cursors to choose from

We’ve had the ability to meddle with users’ cursors for years - pointer, crosshair, move, wait and so on. CSS3 adds a whole load of new and potentially useful ones.

What’s it useful for?

With web apps being expected to act more and more like desktop apps, the cursor will need to act more like it does on the desktop - indicating copying, zooming and spreadsheet cell selection. For example, you might want to indicate that an image is zoomable by changing the cursor to a magnifying glass.

What’s the current support like?

Quite a few of these cursor types are already supported in Firefox, Chrome and IE, but not all of them. Keep in mind that each browser displays a slightly different image for each cursor type.

Other options?

Almost all browsers already support cursor:url, which allows an image to be specified to replace the cursor. (Opera is the only exception, which is odd because even IE6 supports it.) For best cross-browser compatibility we recommend using .cur files, which can be created easily using Photoshop. The exact CSS for this is: cursor:url(image.cur).

More info:

• MDN: cursor