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:

<div class="smiley">
  <p class="vertical-text">:-(</p>
</div>

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 transform.

p.vertical-text {
  writing-mode:tb-rl;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform: rotate(90deg);
  white-space:nowrap;
}

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:

div.smiley {
  background: yellow;
  height: 100px;
  width: 100px;
  line-height: 100px;
  border-radius: 50px;
  text-align: center;
  font-size: 60px;
  font-family: Arial;
  padding-left: 6px;
}

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.