CSS Zibaldone

• Home
  • CSS Articles
    • Creating a logo with CSS

Creating a logo with CSS

In this article I'll explain how to create and format a logo by using CSS. Our inspirational logo is the following.

Figure 1. V-Day logo

Table of contents

• The markup
• General styles
• Positioning and dimensions
• Inserting the background image
• Setting the font size and color
• The sub-title
• Final settings
• Download examples

The markup

We start with the following markup:

Listing 1. Markup for a logo

1. <div id="logo">
2. <h1>
3. <span id="css">CSS</span>
4. <span id="img"><a href="#" title="Long description of the image">D</a></span>
5. <span id="day">Day</span>
6. </h1>
7. <h2>Until the quirks stop</h2>
8. </div>

View the example

As you can see, since we want to use a background image on the #img element, we've also provided a link to a long description of the image. Our structure appears as follows in Lynx:

Figure 2. Screenshot taken from Lynx

General styles

The general styles are really simple.

Listing 2. General styles

1. #logo {
2. background: #fff;
3. color: #000;
4. font: 100%/1 Arial, Helvetica, sans-serif;
5. }

View the example

We've set the base font size on our logo, plus a text color and a background color.

Positioning and dimensions

Now we can set the positioning and dimensions of the elements.

Listing 3. Positioning and dimensions

1. #logo {
2. padding: 1em;
3. }
4. #logo h1, #logo h2 {
5. margin: 0;
6. }
7. #logo h1 {
8. height: 150px;
9. }
10. #logo h1 span {
11. float: left;
12. height: 100%;
13. }

View the example

To position the children of the h1 element, we use the float property. The height of the h1 element equals the height of the background image that we're going to insert. Note that also the children of the h1 element share the same height with their parent.

Inserting the background image

The background image will be inserted as follows:

Listing 4. Inserting the background image

1. #logo h1 #img {
2. width: 80px;
3. height: 150px;
4. background: transparent url("../img/csslogo.png") no-repeat top left;
5. text-indent: -1000em;
6. }

View the example

The dimensions of the #img element equal the dimensions of the background image. We get rid of the D-link's text by using a negative text indent, since we're working with an element that's been floated, that is, a block-level element.

Setting the font size and color

Now we can set the font size and color of the children of the h1 element.

Listing 5. Setting the font size and color

1. #logo h1 #css, #logo h1 #day {
2. font-size: 150px;
3. text-transform: uppercase;
4. }
5. #logo h1 #css {
6. color: #c00;
7. }

View the example

We use pixels to get a precise control over the font sizing. In this case, ems are not required, since we're dealing with a text that has enormous dimensions.

The sub-title

The sub-title (h2 element) has the following styles:

Listing 6. The sub-title

1. #logo h2 {
2. text-transform: uppercase;
3. font-size: 55px;
4. display: inline;
5. background: #000;
6. color: #fff;
7. position: relative;
8. top: 10px;
9. }

View the example

Since the background color must cover only the text area and not the whole containing block, we turn this element in an inline-level element. Then we create a vertical space by using the position property set to relative with a vertical offset of 10 pixels.

Final settings

Finally, we want to vertically align the text of the h1 element with the baseline of the background image. So we could write the following:

Listing 7. Final settings

1. #logo h1 #css, #logo h1 #day {
2. position: relative;
3. top: 15px;
4. }

View the example

As we've seen above, we've used the position property set to relative, but now with a vertical offset of 15 pixels.

Download examples

examples.zip