The CSS3 gradient ability allows us to automatically create colour-gradient backgrounds for elements in a web page, without having to use image files.
Unfortunately this is not supported by Opera or Internet Explorer. There is a filter that you can use to create linear gradients in IE, but for Opera you will have to resort to a fallback background image.
Continue reading
The box-shadow property works in a similar way to text-shadow, except you can use it to apply shadows to whole areas, such as images, side panels or feature-boxes. Previously, a web developer would have to resort to using carefully edited background images for drop-shadows, and when it came to putting shadows on resizeable elements such as sidepanels, it could result in a whole lot of extra markup, (such as the use of multiple nested DIV tags), not to mention the extra bandwidth used by the image files. Now we can even cast shadows onto whatever arbitrary background falls beneath drop-down navigation menus, and other dynamic elements, which would previously have been just about impossible.
This is a very straightforward CSS3 property with wide browser support… except for IE. It works well when used subtly for header text (ie: not how I’ve done it!)
Continue reading
The @font-face property marks a revolution in web design, and is now supported by all modern browsers – it allows you to choose from a vast range of different typefaces for your website. Before the @font-face property was introduced, there was no simple and safe way to do this. The stark choice was to either stick with a very small set of ‘safe’ fonts that everyone used, or to use images for your exotic typeography, or to resort to various hacks. Now it is easy.
Continue reading
border-radius is one of the most useful CSS3 properties, though also one of the most easily over-used (um… guilty as charged!). It is particularly convenient for adding simple curved corners to coloured panels, navigation menus, and buttons. In many situations it can be used to replace background box or button images (that in the past were the most common solution to a lot of design problems), and therefore reduce the download-weight of your page.
Continue reading
As a web programmer (like any other programmer), it is important to get the basics right, to build up a toolkit of robust, re-usable code. In these days of templates, frameworks, and object-oriented use of CSS classes, there is plenty of technology at your disposal, and it would be silly not to take advantage of it and have to re-invent lots of wheels every time. However, let’s not jump the gun! We start right at the very beginning, with the core HTML that is the foundation of any website, regardless of platform.
Continue reading