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.
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.
Comments (20)
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.
example:
http://endlessx.com/rounded.html
Posted March 29, 2008 12:37 PM | #
IMO, using a background image is a much better way of creating rounded corners. Here's my implementation of rounded corners
Posted March 29, 2008 1:15 PM | #
Good technique. However, is there any way I can avoid nested tags.
I am an ASP.NET developer. And hence most of my controls are rendered the way the .NET framework decides. Though I can override, its too much work.
So, is there anyway I can pull it off by not using nested tags?
Thanks in advance,
SK
Posted March 29, 2008 2:51 PM | #
@Simon,
Nice one - looks like a pretty safe method. Works in IE6 and 7, too. This makes me wonder even more about the reasoning behind the folks at Google Analytics using three nested <b> tags.
Posted March 29, 2008 8:57 PM | #
Why two b's? What's up with first-letter or first-line for a?
Posted March 31, 2008 1:44 AM | #
Nice effect.
I've tried it as a feature div, as per your example page. Interestingly, in Firefox and Safari (haven't test IE yet) the contents of the box sit on top of adjacent suckerfish sub-menu items. I tried using Simon's technique (March 28) but any nested divs seem to create the same issue.
The div also flips out in IE, unless you put a width value to it and it seems to come good - so far.
Posted April 3, 2008 11:12 PM | #
What a great little trick!
Thanks
Posted April 3, 2008 11:32 PM | #
"This makes me wonder even more about the reasoning behind the folks at Google Analytics using three nested <b> tags."
Heehee. When did Google ever have a problem with generating a tonne of bloated deprecated markup to create universally unambiguous (to user agents, at least) layout? Take your DOM inspector to any Google widget and it's soup. They've always proved an authoritative case in point when arguing with standardistas — the case being for present browserland-unambiguous code as opposed to idealist W3 evangelism code.
Very good technique though. Thanks for running it past us!
@Sashidhar:
These don't need to be nested. To be extra safe it's best to put useless characters inside presentational tags (zero-width non-joiner [‌] always works for me), but they can just all be lumped at the end (which is what I always do — that way you can easily just cut them out without mucking with your real content) as long as the overral parent is set to {position:relative}.
Posted April 23, 2008 9:53 AM | #
Is there a way to accomplish this same effect without the extra tags by using border attributes? Wouldn't something like
:link {border-length: 99%;}
do the job?
(Of course there's probably no border-length property, is there?)
Posted April 23, 2008 12:22 PM | #
@Matt,
Sure, there are other ways of achieving the same effect - background images, tables (eek!), whatever. I just hadn't seen this one before.
Posted April 23, 2008 12:55 PM | #
Nice one! It seems to be pretty rare I come across a method of doing something in CSS that I hadn't already seen, and this one fits the bill nicely.
@Simon
Nicely done! The more we can stay away from deprecated tags the better imho.
Posted April 24, 2008 10:34 AM | #
@CSSGuy,
Thanks for sharing!
@Simon
Way to take it a step further. I really like your method!
Posted May 1, 2008 10:11 AM | #
*** I just noticed Simon's post with a similar solution using negative padding. This one uses absolute positioning so I'll post it as well ***
The example below is for 200-pixel wide options and includes a :hover effect:
<ul>
<li><a href="/"><span>Option 1</span></a></li>
<li><a href="/"><span>Option 2</span></a></li>
<li><a href="/"><span>Option 3</span></a></li>
<li><a href="/"><span>Option 4</span></a></li>
</ul>
ul {
width: 198px;
margin: 0;
padding: 0; }
ul li {
list-style: none;
height: 26px;
padding: 0;
margin: 0 0 2px 0; }
ul li a {
position: relative;
display: block;
background-color: #E4E4E4;
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #D7D7D7;
text-decoration: none;
color: #000;
height: 24px; }
ul li a span{
position: absolute;
display: block;
top: 0px;
left: -1px;
border-left: 1px solid #D7D7D7;
border-right: 1px solid #D7D7D7;
text-indent: 24px;
height: 24px;
line-height: 24px;
width: 198px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif; }
ul li a:hover {
background-color: #FFEAE0;
border-bottom: 1px solid #FFD3B4;
border-top: 1px solid #FFD3B4; }
ul li a:hover span{
border-left: 1px solid #FFD3B4;
border-right: 1px solid #FFD3B4; }
Posted May 2, 2008 8:23 AM | #
>The example below is for 200-pixel wide options and includes a :hover effect:
its no good. no work in IE6...
Posted May 4, 2008 5:56 AM | #
Nice.
I've made a simple test case using two nested elements and negative margin, as proposed in the first comment. 'Core' came up like this (ems used just for fun):
I am quite surprised how simple it is : )
Posted May 4, 2008 8:11 AM | #
Many Thanks for Sharing.
Best Regards
Team
Web Hosting Sri Lanka
Posted May 5, 2008 12:53 AM | #
Hi from puerto vallarta jalisco mexico, please visit: www.saboravallarta.com.mx News Radio & Television Online
thanks !!!
Posted May 5, 2008 12:08 PM | #
Nice tutorial, but this is highly impractical. I can't see any benefit for using so much CSS to replace a small image. Why waste the time only to be challenged with cross-browser compatibility?
Posted May 6, 2008 6:55 AM | #
Nice article - I am re-coding my website and will use this method. I have not seen this before - Thumbs Up!
rg
Posted May 7, 2008 1:00 AM | #
To be honest, i have analytics installed on my site but they are always giving me the wrong info ;( Not a fan anymore
Posted May 9, 2008 2:22 PM | #