Repurposing the alphabet with CSS – to create design elements

If you’ve read any of my other posts, you might get the feeling that I like finding new ways to use old features. In this case, that old and well-known feature is the content style. You know, the one that we use to drop colons after labels without affecting the actual HTML content, i.e.

label:after { content: ':' }

Recently, I ended up using the content “style” to address a design constraint in a unique way. The premise is that when you stretch or rotate certain letters, you can create some interesting design elements. It all started when a couple weeks ago…

Price Cuts

So my client wants to visually show that there is a price reduction on a certain group of products. I suggest using a simple strikethrough style to put a red line through the old price.

That was not well received, my client wanted the classic diagonal “price slash” effect.  After some trail and error, I settled on using the lowercase letter “L”, rotated and scaled so it looks like a slash.

<div>
  <span>$20.00</span>$10.00
</div>

div { position: relative; display: block; color: #0a0; }
div span { margin-right: 15px; }
div span:before { 
  position: absolute; 
  display: block; content: 'l'; color: #a00;
  margin: 0; top: -10px; left: .75em; 
  font-family: arial; font-style: italic; font-size: 30px; 
  -webkit-transform: rotate(70deg) scale(.8,1.8); 
}

See the Pen KBqnI by Phil LaNasa (@sitekickr) on CodePen

That worked out well, and avoided the need to load any background images, icon fonts or any asset that would require another HTTP connection.  But it got me thinking, what other cool things can we do by combining CSS with the alphabet?

Dividing Lines with Multiple Borders

A single dividing line is easily achieved with the CSS border style. Even double lines are possibly by combining the border-top style of one element with the border-bottom style of the element above it.

But, what if we want fancier borders, say 3 or 4 lines? The sans-serif letter “L” comes to our rescue once again.

If we imagine that a thin dividing line is kinda like a rotated and stretched letter “L”, we open up some cool possibilities:

<q>Three can keep a secret, if two of them are dead.</q>
<q>It is the working man who is the happy man.
It is the idle man who is the miserable man.</q>
<q>Three can keep a secret, if two of them are dead.</q>

q { display: block; position: relative; padding: 10px 0 18px 0; line-height: 1em; }
q:before { 
  content: 'lll'; 
  position: absolute;
  top: 0;
  left: -110px;
  display: block; 
  font-family: sans-serif; 
  line-height: 1em; 
  -webkit-transform: rotate(-90deg) scale(1,43);
  -webkit-transform-origin: top left; 
  -moz-transform: rotate(-90deg) scale(1,43);
  -moz-transform-origin: top left; 
  -ms-transform: rotate(-90deg) scale(1,43);
  -ms-transform-origin: top left; 
}

What’s really cool here is that we can add additional dividing lines just by adding more “L”s to the content style (with a slight padding adjustment).

See the Pen uwKpF by Phil LaNasa (@sitekickr) on CodePen

The Key Styles

When using fonts to mimic design elements, I found that there are a few key styles that really start to make things click:

content – Without this, there is no hope of pulling off any of these. The content “style” lets us drop text before or after our element.

:before and :after pseudo-elements – These allow us to keep our HTML to minimum, and maintain the semantic meaning of the markup, regardless of how silly we make it look!

position – By applying relative positioning to the base element, and absolute positioning the the pseudo-elements, we are able to “contain” the effect within the bounds of the element.

letter-spacing – Without letter spacing, we would be restricted to the default spacing of the font. By applying letter-spacing, we can separate characters by a given amount. This would allow us to do things like increase the space between the border lines in the example above.

transforms – These are CSS 3 only, so older IE browsers are outta luck. Therefore, we’ll have to be careful to use them only when it’s acceptable if they fail. For example, if we can’t rotate the “slash” in the price cut effect, it might still look okay. But, if we can’t rotate or scale the “L”s that compose our triple border effect, that would really confuse the reader.
A Last Bit of Fun

Here’s one more embedded Code Pen that demonstrates three more possibly-useful-but-more-likely-ridiculous effects.

See the Pen Cwxji by Phil LaNasa (@sitekickr) on CodePen

Tell me this isn’t something you could have a lot of fun with!