JavaScript
Article
By Simon Willison

More CSS techniques

By Simon Willison
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

--ADVERTISEMENT--

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.
Is it good?Is it good?