Making Smiles using only CSS & Vertical Text
This week I needed to create a 404 error page for a project, I wanted to create something simple that was purely CSS with no images. I wanted the page to have something graphical as well and decided on a large sad smilie. The challenge here is to get the text :-( to display vertically.
I wanted to keep things as simple as possible. I excluded using SVG, IE conditional statements or IE filters. I managed to get vertical text in a single CSS block. Here is the result:
Here is the basic markup:
To get text to display vertically we use a rule for the four main browser groups. IE has supported the use of
writing-mode for a few years now, Webkit browsers (Safari & Google Chrome), Firefox and Opera all support their own version of
We now have our vertical text. Next is the yellow background. We can simply give the containing DIV a yellow background then apply rounded corners. IE9 now supports the
border-radius property so we can get a circle for every modern browser. So here is the final CSS:
The result is at the top of the page.
This doesn’t work in old Opera versions, but does work in Opera 10.5. This also works in IE6+, FF 3.5+, and Webkit based browsers.
I tried to keep this one simple, but lining everything up in different browsers can be a difficulty because of the way each browser interprets fonts and spacing. The differences in text rendering make it more difficult to create a “pixel perfect” layout.
This article was posted on 24 September 2010 in CSS, HTML
That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.