CSS shorthand is to me a no brainer and it’s use can have huge benefits – some of which include smaller file sizes, less code to read and it makes files quicker and easier to comprehend and maintain.
In this post I’m going to be talking about box styling – any CSS effects that can be implemented on all 4 sides of an element. This can include:
This post has come from a quick bit of experimentation, trying to centre align list items.
The design called for centerally aligned list item links, and there could be 3, 4, 5 or more links. Initially I was stumped as to how to create this effect. I had considered a left margin to create the illusion of centre aligning for each possible number, but I knew there was a better way. I’m always aiming for a solution that works in the older browsers too, and this includes IE6. I don’t know why I do it to myself, especially as it apparently only has less than a 5% market share nowadays.
In an ever-changing web world, new technologies are constantly evolving. With the emergence of alternative font display systems, new CSS effects and the increased uptake on modern browsers, designers are using these new techniques more and more. Add this to a sprinkling of current design ‘trends’ such as the noise filter, and pixel perfect line details and it makes for some very similar looking websites.
It is inevitable then that these new and shiny capabilities will catch a web designer’s eye (especially after years of browser constraints) but are we turning our eagerness to use the latest styling techniques into a world of monotonous and similar designs?
I thought it was about time I experimented with some CSS3 multiple backgrounds so I decided to play around with a wallpaper design I worked on in September.
My experiment uses a top left, top right, bottom left and bottom right png gradient on the HTML element, with a repeating png overlay on the BODY.