More CSS techniques

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • tomByrer

    Actually, I found a link at http://www.alistapart.com/discuss/customcorners2/#c6824 submitted by Lim Chee Aun for her demostration of the 1 image rounding corners at http://phoenity.com/tests/borders_corners.html . Seems she posted the demo on her site back in December of last year, and promoted it on ALA in Feb.

    Seems web design is much like the music world; if you invented a new twist of technique or style, chances are atleast 2 other are doing the same that you are. It just becomes a race who gets more popular with it first :)

  • http://www.sitepoint.com AlexW

    Wow, not sure what’s bending the most. That navigation or my mind after scanning the tutorial ;) Very cool though.