Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Improve css3 text rotation quality

Improve css3 text rotation quality

Problem

I've created a series of rounded tabs using CSS3. I've then rotated these tabs, but the quality of the text (Windows - Chrome) is poor and also 'dims/blurs' on transition. What are the alternatives? Have I applied my CSS correctly? Would I be better to rotate the tabs and keep the text horizontal?

http://jsfiddle.net/jeepstone/9eGt3/

Problem courtesy of: Jeepstone

Solution

Chrome

Chrome doesn't enable anti-aliasing by default. But you can add this CSS property to your elements in order to enable it:

transform: translate3d(0,0,0);

This will force the browser to use its hardware acceleration to calculate the transforms, which will add some anti-aliasing as a bonus.

The same effect could also be applied by setting the -webkit-backface-visibity to hidden:

-webkit-backface-visibility: hidden;

Here is your updated jsfiddle (tested in Chrome)

http://jsfiddle.net/9eGt3/6/

Firefox

Firefox enables anti-aliasing by default so no transform3d hack is required, but the quality of the anti-aliasign algorithm varies among the browser version. Here are some comparison images:

Those are Firefox 5, Firefox 9 and Chrome respectively.

Your best bet here is to tweak your font in order to make it more friendly to the anti-aliasing algorithm. In this case, choosing a bolder and bigger font might help.

Solution courtesy of: Cesar Canassa

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Improve css3 text rotation quality

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×