Monthly Archives: March 2008

One pixel notched corners as used by Google Analytics

I use Google Analytics, and I noticed that their left nav has an interesting characteristic: instead of each option being boxed in a clickable rectangle, there is a one pixel notch in each corner. It’s not necessarily a curved corner, but it is a little softer than a normal box.

Google Analytics Nav uses has a one pixel notch in each corner.

I would’ve naturally thought that if someone is going to use background images to create a capsule effect, they would have used anti-aliased images. But upon closer inspection, no background images were used at all. Instead, a couple of nested tags within the link help create the effect. Instead of this:

<ul>
  <li>
    <a href="/">
      Visitors
    </a>
  </li>
</ul>

Some <b> tags are added (likely chosen because because of their length – one letter):

<ul>
  <li>
    <a href="/">
      <b>
        <b>
          <b> 
            Visitors
          </b>
        </b>
      </b> 
    </a>
  </li>
</ul>

Now whether or not this is the purest thing to do is not the subject of this article. Obviously, I don’t support overnesting of tags. But the Analytics designers did this for a specific design purpose. Nesting one tag is quite common for achieving sliding-doors rounded tabs. Perhaps the reasoning was, ‘Why not nest two more and drop the use of images?’

Also, similar techniques exist out there to get rounded borders with a greater radius than just one pixel. However, those techniques involve much more extra markup (or javascript to create it for them) in the form of empty tags, where success comes in the form of a pixelated curve reminiscent of an 8-bit Nintendo display. (I exaggerate, but still.) In the case of a one pixel notch, the effect at least looks intentional.

The notched corner is created by modifying the nested tags’ border and position properties.

Here’s the CSS:

li a {
  display:block; /* a must */ 
  border: solid #666;
  border-width: 0 1px; /* left and right borders only */ 
  text-decoration: none;
  outline:none; /* so as not to distract from the effect */ 
  color: #000;
  background: #e4e4e4;
}
li a b {
  display: block; /* another must */ 
  position:relative; /* because the child elements are positioned */ 
  top: -1px; /* drag it up a little, creates the top notches */ 
  left: 0;
  border:solid #666;
  border-width:1px 0 0; /* top border only */ 
  font-weight:normal;
}
li a b b {
  border-width:0 0 1px; /* bottom border only */ 
  top: 2px; /* pushed down a little to create the bottom notches */ 
}
li a b b b { /* i don't think three-deep tag is even necessary */ 
  top:-1px;
  padding: 1px 6px;
  border-width: 0;
}

To just get the notch, the third-deep <b> tag isn’t needed. I think Google Analytics included it because they wanted to add some background images with it on their buttons. I think this effect can be achieved with one less nested <b>.

<ul>
  <li>
    <a href="/">
      <b>
        <b> 
          Visitors
        </b>
      </b> 
    </a>
  </li>
</ul>

In my example page, I left it at two deep.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Simon Käser said:
Nice technique there. But I don’t see the need for more than one nested tag. One nested span tag is enough if you use negative margins rather than top and bottom.

New CSS Off Contest April 5

I’m excited about the upcoming CSS Off contest, even though I won’t be judging this time around. Brad Colbow is the guest designer. I’ve seen a sneak peak of the design, and it looks like it will be a fun challenge. If you want to exercise your markup skills, get feedback on your approach, and possibly win a little something for your favorite charity, consider giving it a go on April 5 (Saturday).

It’s free and open to everyone of any skill level.

Update (23 Mar 2008): I updated the title with the correct date, April 5.

I’m redoing previous articles to use jQuery, you know, just for fun

I like using the jQuery library so much, I started converting my old article examples to use it. I thought it would be interesting to see how much less scripting I would have to write. (A little less, but not much – my examples were never heavy on the scripting anyway). I think it made some more readable, too, in that I can glance at the script code and tell what’s going on.

Here’s a list of what I have converted so far, with a downloadable zip.

The obligatory disclaimer – using any library’s methods is no substitute for learning JavaScript basics. If you haven’t already added JavaScript to your list of things to learn as a web designer, stop mucking around and pick up Jeremy Keith’s DOM Scripting.

For a seasoned html/css person, learning jQuery is arguably much easier than learning JavaScript from scratch, since its selector syntax is based on CSS selectors. Since I’m the CSS Guy, it is my library of choice, but only when a library is needed. Some pages require so little DOM manipulation that self-written functions easily fit the bill, as well as saving some downloaded bits.

On a related note, someone turned my favicon article example into a jQuery plugin.