textwrap

running words around
design education and visual communication
authored by chris m hughes

Slanted and Enchanted CSS3

Tuesday, 2 November 2010

For web designers, angled text has always required a trip to Photoshop or Illustrator. So it's a cause for celebration now that CSS3 supports rotation for text on a webpage. This means designers can slant and quickly edit text, images and even divs on a webpage.

To get a flavour of how powerful this is, it's worth stepping back to look at how css3 is generally implemented in webpages. To create css3 styles, you need to use a set of the vendor prefixes - different properties for each browser to understand.

Here's a simple example - how to fade in the background colour of a button when you hover over it. The CSS3 property is called 'transition', and the CSS would look like:

a { /*this is a style for the button link*/
width: 100px;
height: 30px;
text-align: center;
padding: 15px 0;
display: block;
color:#ffffff;
background-color: #000000;
-webkit-transition:background-color 1s ease-in; /*prefix for Safari*/
-moz-transition:background-color 1s ease-in; /*prefix for Mozilla*/
-o-transition:background-color 1s ease-in; /*prefix for Opera*/
}

a:hover {

background-color: #ff0000;
}



Applying angled text uses the same sort of procedure. The css3 property is called 'transform', and the value is 'rotate (angle)'. Rotate will angle text, div elements and images. Here's the CSS to rotate text by minus 30 degrees on a webpage -

.mytext {
-moz-transform:rotate(-30deg); /* text angle is -30 degrees*/
-webkit-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
}


There are a couple of big caveats however. Firstly, not all browsers support this technique, and secondly, at larger point sizes, poor anti-aliasing becomes an issue and the text can start to look decidely pixellated.

For a brilliant example, assuming you have the latest Safari, Chrome, Opera, Mozilla or IE9 browser with which to see it, check out transform experiment by Eric Hansel.