Will McNeilly

Create a Wordmark with CSS

Early today I stumbled across Bastian Allgeier’s beautiful new portfolio website. I noticed his logo is made entirely out of markup and CSS. Inspired I set about designing my own.

Demo

The Markup

I’ve tried to keep the markup as simple as possible. I don’t usually advocate cluttering up markup with non semantic elements, so this example should be seen as an exercise.

<h1 class="cssLogo">
	<span class="W">W</span>
	<span class="I">i</span>
	<span class="L">l</span>
	<span class="L">l</span>
</h1>

Styling

When designing our block letter forms we have to take in to consideration the restrictions of css. There is no way to define shapes using the technology, this is usually the domain of SVG or Canvas. As such, we can really only four sided shapes with 90 degree angles and with the use of border-radius, fake circular shapes.

CSS Content Property

We have four boxes created from the four span elements, how exactly do we turn these boxes into ‘W’, ‘I’, ‘L’, ‘L’? The answer is we can’t unless we have more elements to style. We could bloat our markup even further by adding more spans around each letter or we could make use of the CSS content property in conjunction with :before & :after pseudo-elements.

The ‘Content’ property can be used to generate text and images that doesn’t add any semantic value to the content. To be more succinct, it should be used to enhance look or interactivity of the element but is not needed to fully understand the ideas present within the copy.

Here’s the syntax

selectedElement:before{
	content: 'Generated content here';
}

Adding a :before or :after pseudo-element has the same effect as adding another element to the document. As such it can be styled as if it were a completely separate element.

When specifying the css content property we have the option of adding no content. We achieve this by using empty quotes

selectedElement:before{
	content: '';
	display: block;
	width:100px;
	height:100px;}

Using the above css we have generated an block level element with no content.

By using this method, one span element per letter becomes three span elements: the original span plus the :before and :after CSS generated pseudo-elements.

Constructing the Letters

This is the creative part. I essence you have to come up with a way to construct the letter forms out of three blocks. The blocks can be used in two ways:

• To construct the body of the letter i.e. you add the blocks together to make a whole
• Negative space – One block ‘cuts’ a piece out of another.

I’ve used both methods in my example.

Constructing the letter’s body

If we take the letter ‘L’ for example

span.L{
	width:96px;
	height:180px;
	margin-right: 104px;}
span.L:after{
	content:'';
	position: absolute;
	background-color: #E1491F;
	height:96px;
	width:84px;
	right:-84px;
	bottom:0px;}

The code is pretty straight forward. The vertical steam of the ‘L’ is defined using the original span, while the base is defined using the generated :after element. It’s positioned absolutely in relation to the original span.

The ‘i’ is achieved in much the same way.

Using Block level elements as negative space

For the ‘W’ I had to fake the angles rotating the two generated pseudo-elements and have them cut into the original span element.

span.W{
	width:300px;
	margin-right:10px;
	height:180px;}
span.W:before{
	content: '';
	position: absolute;
	background-color: #eee;
	width:96px;
	height:250px;
	-moz-transform:rotate(-20deg);
	-webkit-transform:rotate(-20deg);
	-o-transform:rotate(-20deg);
	transform:rotate(-20deg);
	left:-53px;
	top:0;}
span.W:after{
	content: '';
	position: absolute;
	background-color: #eee;
	width:96px;
	height:250px;
	-moz-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	-o-transform:rotate(20deg);
	transform:rotate(20deg);
	right:-53px;
	top:0;}

The pseudo-element’s background-color will have to match the background-color of their parent container.

In Conclusion

So that’s how I did it. Granted the results aren’t exactly stunning but it does show what can be achieved with CSS and a bit of creative thinking. I hope this served if nothing else as an introduction to the content property and pseudo-elements.
I think I’m going to explore this even further by creating an entire alphabet.

Further Reading

W3C :before & :after Pseudo-Elements Spec

Multiple Borders using :before & :after Pseudo-Elements Tutorial