Skip to main content

More CSS techniques

By Simon Willison



In my recent article Rounded Corners with CSS and JavaScript I described a simple and popular CSS technique for creating fixed-width boxes with rounded corners using two background images, one for the top of the box and one for the bottom. A new tutorial on 456 Berea Street demonstrates a similar technique for creating elegant “teaser” boxes, but then goes on to show how the same effect can be achieved using just a single image re-used for both backgrounds.

Another fun CSS demo doing the rounds at the moment is Bending the Matrix, which makes extensive use of image replacement and CSS Sprites to convert a regular unordered list in to a curved graphical navigation menu.

Just two years ago, every time the topic of CSS based layouts came up people would complain that they all essentially looked the same – boxy layouts with minimalistic, visually uninspiring designs. Today those complaints have all but vanished, thanks both to an influx of talented visual designers to the web standards scene and to the many mature CSS techniques being actively shared within the community.

Integromat Tower Ad