After launching Geek Out, we thought it might be interesting to show how we built some of the prettier effects that made up the page.
The two CSS effects used were @font-face and transform: rotate. With these two CSS styles, you can make some very nifty forms.
@font-face is one of those little gems that has been missed by a lot of designers. Support for it was introduced in Internet Explorer 5, Firefox 3.5, Safari 3.1, Opera 10, Chrome 4, and it’s part of the CSS2 spec. The difficulty, however, is font format support. Internet Explorer will only support EOT (Embedded OpenType) files, while Mozilla, Safari, Opera and Chrome will happily accept a TTF (TypeType) font.
| Browser | EOT | TTF | OTF | SVG | WOFF |
|---|---|---|---|---|---|
| Internet Explorer | X | X (IE9) | |||
| Mozilla Browsers | X | X | X | ||
| Safari | X | X | X | ||
| Opera | X | X | X | ||
| Chrome | X | X | X |
As you can see in the table, support is spread across the four formats, but you can safely address almost all the browsers viewing your site by using an EOT and a TTF. The easiest way to cater to all your users is to use Paul Irish’s Bulletproof @font-face syntax. It relies on your including the differing file formats in a specific order, so that all the browsers will only use the first format they can.
@font-face can be implemented as shown below, and has a few moving parts. The font-family declaration lets you name the font, so you can set elements to use it later. All of the src: url() declarations are paths to the font files. It isn’t necessary to have all the file formats, but if you have them, you may as well use them. That way, they cover the largest possible share of the browsers and provide better options (WOFF, for example, is a compressed, lossless format, so the file sizes are smaller, but retain the same level of quality as TTF/OTF format files). Paul Irish has a nice trick: naming the main set of files means you won’t ever accidentally use a local copy of a file (that is, one stored on the user’s computer), so you know your page will use the font you want.
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
/* Now you can use the font on any element you like. */
h1 {
font-family: 'Graublau Web';
}
Finally, there are some great ways to get free fonts to use. Google Font Directory offers a small list of free fonts (we used the Lobster font from here), as well as FontSquirrel’s Font Kits.
The second CSS effect is the transform: rotate style. Support for transform: rotate is provided in Webkit, in Firefox 3.5 and up, and in Opera version 10.5 and up. Like most of the new CSS3 styles, they use a browser specific naming convention.
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg)Internet Explorer has a rudimentary implementation using filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); where 0, 1, 2, and 3 will rotate the applied element 0 degrees, 90 degrees, 180 degrees, or 270 degrees respectively.
So, if you’re rotating something in those four directions, you can use all four CSS styles to cover all browsers, and the code would look like this:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg)If, as we did with the Geek Out page, we want to rotate the form in an arbitrary direction (in our case, -13 degrees), Internet Explorer will just have to sit this one out. IE will display it normally (no rotation applied), while the other browsers will play along and rotate nicely. To read more about this, have a look at Jonathon Snook’s article Text Rotation with CSS.
I hope this has been helpful! It’s a bit of fun to play around with making forms interesting again, don’t you think?
Mark CipollaMark Cipolla is a web guy at heart; front-end design and coding (with xhtml/html5/css with a touch of javascript) meets programming (Ruby on Rails and a touch of PHP).
