CSS3 box-shadow and image hover effects

Posted in CSS CSS3 on 22 January 2010 | Comments [10]

The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser support. The box-shadow property is supported by Firefox and Safari, using their proprietary -moz- and -webkit- prefixes, but it’s not supported by Internet Explorer (or other browsers). For this reason, I think the box-shadow property is ideal for adding image link hover effects where the shadow is not absolutely essential but where it provides a nice style enhancement (enrichment) for modern browsers.

Read more ...

Advanced CSS we CAN use today

Posted in CSS CSS3 on 20 December 2009 | Comments [1]

There have been several articles recently that describe advanced CSS methods, usually part of the CSS3 specification (CSS3 Info), and how these push the boundaries of what we can do with CSS. There are some great examples including:

• What You Need To Know About Behavioral CSS
• CSS Animations
• Going Nuts with CSS Transitions
• Cleaner Code with CSS3 Selectors

Read more ...

Using advanced CSS selectors

Posted in CSS CSS3 on 18 August 2009 | Comments

There’s a good article called Taming Advanced CSS Selectors by Inayaili de León on the Smashing Magazine website. The article gives a good summary of CSS selectors that can be used to target elements in your web page code without adding class names to each element. This is a good way of streamlining your code and using more modern practices.

Of course, not every browser supports these selectors but I encourage you to try them out and experiment a bit. In any case, by looking at your website visitor statistics, you may find that most of your visitors are using browsers that support these selectors. Even if not, you can still use these methods if the styles that they confer are not an absolutely critical part of your website. By using them, you’ll be providing visitors with more modern browsers with an enhanced experience.

Technorati : css, css3

Rotate text with CSS

Posted in CSS CSS3 on 30 July 2009 | Comments [1]

Jonathan Snook published an interesting blog post recently where he described text rotation with CSS. The post was inspired by another article where a date display technique with sprites was described. Even though the latter method does not actually rotate the text [it uses an image replacement method], the effect is still pretty cool.

Both examples show great use of CSS to do something that is slightly different.

PS: Just in case you were wondering, the CSS3 transform method in the Snook article can be used to rotate images as well [although the Basic Image filter that gets this to work in Internet Explorer can only rotate by 90° increments].

Technorati : css, css3

Multi-column layout with CSS3 (and some JavaScript)

Posted in CSS3 JavaScript on 13 July 2009 | Comments [4]

There’s a common newspaper and print layout method where the text of an article is arranged over several columns. This makes the article easer to read and looks quite nice visually. Wouldn’t it be great if you could do this with CSS? Well, in fact this is perfectly possible using the multi-column layout module that is part of the CSS3 specification. Whilst browser support for this is patchy, the module is now approaching candidate recommendation status, and the method can still be implemented using proprietary but well-supported CSS rule prefixes like -moz- and -webkit- in your style sheets. For browsers that do not support the multi-column layout module in any form, there’s a useful JavaScript solution.

Read more ...