Tuesday, September 2nd, 2008

Firefox implements 3 CSS properties: text-shadow, -moz-box-shadow and -moz-column-rule

Category: CSS, Firefox

Michael Ventnor has blogged about the new support for text-shadow, -moz-box-shadow and -moz-column-rule which follows on with Safari and Opera. The subtle effects really add a great touch when NOT used gratuitously. The samples are both ;)

If you’ve been following the Gecko 1.9.1 development since it started then you’re probably already aware of, and possibly already taking advantage of, these CSS properties that I implemented but haven’t talked about yet (this web-tech blog really is a great idea!). They are in Alpha 1, but for maximum stability regarding them you should wait until Alpha 2 comes very shortly. I am, of course, talking about CSS3 text-shadow, box-shadow and column-rule.

(I would’ve liked to include an example in this post, but WordPress doesn’t seem to like “strange” CSS properties)

Text shadows were in CSS2, but were dropped in CSS2.1 due to lack of implementations; but it’s slowly making a comeback! That’s why the -moz prefix is not necessary for text-shadow, but is needed for the other two (-moz-box-shadow and -moz-column-rule). To see some very creative uses of this property check out this web page. Another cool thing is that this property plays nicely with the “contenteditable” attribute, so you can make a text editor with flickering flames behind your text. Who said Silverlight was needed for pretty RIA’s?

Box shadow is really nice, you can apply a shadow to almost any arbitrary element in your web page, thus easily giving your web app an extra bit of beauty. We also support the multiple shadows feature for both text and box shadows. Column rule allows you to draw lines between the gaps that separate columns if you are using CSS3 columns. It takes exactly the same syntax as a border side (border-top, etc), and pretty much completes our support for CSS3 columns functionality-wise.

This post comes on the back of CSS word wrap support (e.g. word-wrap: break-word;), CSS 2.1 generated content (e.g. tr::before { display:table-cell; content:"First cell"; }), and more.

Posted by Dion Almaer at 8:36 am

4.5 rating from 45 votes


Comments feed TrackBack URI

Great, when can we have multiple background images? Safari has supported this since version 1.

Comment by coob — September 2, 2008

sweet. How about CSS2? text-decoration:underline in a and in SVG text would be great.

Comment by JonathanLeech — September 2, 2008

whoa! eyecancer fx best combined with a blinking marquee. i bet these will be all the rage on myspace :)

Comment by Gordon — September 2, 2008

Maybe you guys could take an extra 10 seconds and add in a font OTHER than TNR? Seriously…those sort of effects barely look good to begin with, much less on serif fonts.

Comment by commadelimited — September 2, 2008

Blink is back! I’m crying blood tears from just looking at the animated multiple shadows.

Comment by BertrandLeRoy — September 2, 2008

Leave a comment

You must be logged in to post a comment.