CSS3 text-shadow examples

Posted in CSS3 on 19 March 2010 | Comments

Text-shadow is a CSS3 property (actually, it was introduced a while ago but removed from CSS2.1) that I am seeing more and more on websites these days. It works quite nicely (if used in moderation) and provides a design enhancement for those browsers that support it (Firefox, Opera, Safari, Chrome). Instead of writing a tutorial, like I normally do with CSS3, I thought I’d share a few useful links that provide more information about text-shadow.

Read more ...

CSS3 box-shadow and image hover effects

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

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