One of the lesser-appreciated CSS3 properties, resize does exactly what it says: it allows a user to resize almost any element it is applied to. The property itself is something of a misnomer: it does not make content larger or smaller, and is perhaps more akin to a user-modifiable clip property.

resize can take four values, in addition to inherit:

A photograph of the eyes of Audrey Hepburn

clip has been a misunderstood and ignored property for a long time. That is beginning to change with the emergence of related CSS3 properties such as background-clip, but clip itself has been present in the spec since CSS 2.1.

clip is perhaps best understood as a “window” through which portions of content may be seen. While this window may be of any dimension, the visible clip area is always rectangular. clip is only applicable to elements that are positioned absolute.

Photograph of a bearded man in darkness throwing dice in the air

As web pages become more active and dynamic, we desire content to appear and disappear at will. There are four CSS properties commonly used to accomplish this.

Each technique has its uses, along with its own advantages and disadvantages. It’s also common to employ more than one technique at the same time; where appropriate, I have linked to examples.

I’ll be applying the CSS in each example to the same basic code: