What I have is a list of links for a blog.  This is an excellent candidate for an unordered list, except that I want them presented like so:

one – two – three

four – five – six

seven – eight

The trick here is getting the dashes so they show up only in the middle of each line.  But there’s no easy way to tell where the natural line breaks are, so I cant just have the first <li> per line not have a dash in front of it.  That means I’m probably going to need to insert some line breaks so I know which ones are at the beginning of a line, but I’d still rather not do it in the html.

I ended up with this:

.blogroll { text-align: center; }
.blogroll li { display: inline; padding: 0 6px; }
.blogroll li + li:before { content: '-'; position: relative; left: -8px; }
.blogroll li:nth-child(3n+1):before { content: '\a'; position: static; white-space: pre; }

The first two lines just make the elements centered, inline, and separated a bit. The third line puts a dash before all<li> elements that come after another <li> element–effectively everything but the very first in the list.  The fourth one is the magic: it uses a new css selector nth-child to select the element after every third element (that’s the “3n+1″ bit) and replaces the dash with a newline character (that’s the “\a” bit).  Normally newline characters are just converted to spaces, but setting the white-space to “pre” makes the line actually wrap there.

It almost works!  Unfortunately, there is a case it doesn’t handle well.  If one of the items is too long, the lines will wrap before the third item and you end up with this:

one – two – three

four – reallyreallylong

- six

seven – eight

Oh well.  I guess I’ll be putting those line breaks in by hand after all.  But if you don’t have to worry about that, it might actually be a good technique!

I’ll be referring to the use of varied shadow size and intensity to create a consistent sense of depth.  I highly recommend this summary of the subject, which is actually what got me thinking about the second case here.

Fixed menus and tabs

What happens when you have a header (or other element) with a box shadow and tabs or a drop-down menu suspended from it?  Ideally, those items would have matching shadows to maintain the illusion of depth.  You may want something like the following image:

A drop-down menu below a header with a continuous shadow around the outside

Unfortunately, if you just have a shadow on each of the menus and the header you’re more likely to end up with something like one of these:

Two menus with inconsistent shadows

The menu on the left is inside the header element and positioned so the top of the menu is at the bottom of the header.  The menu’s shadow is cast on top of the header, which is probably not what anyone wants.

The problem with the one on the right is a little more subtle, and a lot of web designs do it all the time.  But it may not feel quite right, because shadow is an indication of depth.  The shadow cast on the menu is the same as that cast on the page, indicating that they are at the same depth, but the menu casts a shadow too, indicating that it is not at the same level as the page below the header.  It would actually be more consistent not to include a shadow from the right menu at all.

The left menu also has that problem: the header and menu cast the same shadow, indicating that they are at the same depth, but the shadow from the menu onto the header says that they are not.

One solution to this is to use something like the first menu but to cut off the shadow at the top that it casts onto the header to put the menu and the header at the same depth.  Overflow:hidden will do nicely for that.  (You might want to have your menu looking like it’s layered between the header and the body, I’ll get to that later.)

We’ll have the following html:

<header>
    <nav>
        <ul>
            <li>oranges</li>
            <li>strawberries</li>
            <li>grapes</li>
            <li>lemons</li>
        </ul>
        <ul>
            <li>lettuce</li>
            <li>cabbage</li>
            <li>spinach</li>
        </ul>
    </nav>
</header>

There are two unordered lists nested inside a nav element. (This example is html5, but of course you can use divs with classes too.) The nav element is what we’ll use to trim off the tops of the menus. The key css is here:

header { display: block; width: 100%; height: 100px; background-color: #FFC; box-shadow: 0 0 10px rgba(0,0,0,.5); }
nav { display: block; position: absolute; top: 100px; left: 0; width: 100%; overflow: hidden; padding-bottom: 10px; }
nav ul { margin: -10px 15px 0 15px; padding: 10px 0 0 0; float: left; background-color: #FFC; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.5); }
nav ul li { margin: 0; padding: 5px 10px; list-style: none; }

The nav is absolutely positioned to the bottom of the header with overflow:hidden.  The boxes for the unordered lists will start at the top of the nav, but the shadow will extend above the top edge of the nav and be cut off.  Here the lists also have a negative margin to cut off the top rounded corners instead of  using extra “border-top-radius” etc. styles, but that isn’t really necessary.

demo page

Drop-down menus

That all works great if you just want a static tab extending from your header, but if you want real interactive drop-down menus it gets a little more complicated.  Say we have the following:

<header>
    <nav>
        <ul>
            <li>fruit
                <ul>
                    <li>oranges</li>
                    <li>strawberries</li>
                    <li>grapes</li>
                    <li>lemons</li>
                </ul>
            </li>
            <li>leafy greens
                <ul>
                    <li>lettuce</li>
                    <li>cabbage</li>
                    <li>spinach</li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

Each of the drop-down menus is now inside another list element that contains the header for that menu. The menu headers should appear inside the header, and hovering or clicking should cause the menu to appear.

We can’t just use the nav element to cut off the top anymore because that will clip the header too.  I keep saying how awesome css is in letting us take out extra elements we’ve been using for rounded corners and shadows, but we’re going to have to put one back in for this (d’oh).  Lets wrap each of the drop-down menus in another nav (or div, or whatever you like–semantics people can argue about that one, nav seemed appropriate to me):

<header>
    <nav>
        <ul>
            <li>fruit
                <nav>
                    <ul>
                        <li>oranges</li>
                        <li>strawberries</li>
                        <li>grapes</li>
                        <li>lemons</li>
                    </ul>
                </nav>
            </li>
            <li>leafy greens
                <nav>
                    <ul>
                        <li>lettuce</li>
                        <li>cabbage</li>
                        <li>spinach</li>
                    </ul>
                </nav>
            </li>
        </ul>
    </nav>
</header>

Now it will be the inner nav only that gets positioned at the bottom of the header with overflow:hidden:

nav nav { position: absolute; top: 30px; left: 0; padding: 0 20px 10px 20px; overflow: hidden; }
nav ul ul { display: none; background-color: #FFC; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.5); border: 1px solid #979700; margin: -10px -10px 0 -10px; padding-top: 10px; }
nav ul li:hover ul { display: block; }
nav ul ul li { float: none; padding: 5px 10px; }

Notice the extra margins and paddings in there to make sure the list is lined up correctly and the nav element isn’t cutting off any other sides of the shadow.

demo page

Multiple shadow depths

What if you want to have two elements overlapping at different distances from the background (i.e., something with a longer, lighter shadow on top of something with a shorter, darker one).  The shadow of the upper element will need to be shorter where it overlaps the second element than where it is over the background.

You can use this technique on the drop-down menus mentioned above tomake them look like they’re lower than the header they’re dropping from, but lets start with something simpler first.  Let’s say you have a header with a shadow and a sidebar that should look like it’s half way between the header and the background page.  You may want to end up with something like this:

Shadows of varying perceived depths

I’ve made the header shadow spread 20px and the shadows on top of and cast from the sidebar 10px each to add up to 20.  You could also make it 5 and 15, or some other ratio you like.  I’ve also made them slightly darker, but I can’t think of a formula to use for that.

If you just have the header cast the shadow and the sidebar cast a separate shadow it will be a uniform 20px all the way across.  What we want is two separate shadows under the header in addition to the one cast by the sidebar.  Unfortunately, we’re going to have to add extra elements to get that.

What we need is one shadow to go all the way across at the bottom of the header underneath the sidebar and another above the sidebar but below the real header so it’s possible to click through to the logo or whatever else is in there.  That means something like this:

<div class="fakeshadow"></div>
<header></header>
<nav>
    <div class="fakeshadow"></div>
</nav>

There are two extra elements there, one just in the body and one inside the nav element that’s going to be the sidebar.

The nav and the “fakeshadow” element inside it will have the 10px shadow.  The “fakeshadow” div above the header will go under everything and have the 20px shadow, which the nav will cover.  Here’s the css:

header { display: block; position: relative; z-index: 2; width: 100%; height: 100px; background-color: #FFC; }
.fakeshadow { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100px; box-shadow: 0 0 20px rgba(0,0,0,.5); }
nav { position: absolute; top: 0; left: 0; z-index: 1; width: 200px; height: 100%; background-color: #3CF; box-shadow: 0 0 10px rgba(0,0,0,.7); }
nav .fakeshadow { box-shadow: 0 0 10px rgba(0,0,0,.7); }

demo page

Combining everything: drop-down menus with multiple shadow depths

If we add some of those “fakeshadow” elements to the drop down menus and adjust the menu shadow, we can get something like this:

Drop-down menus with multiple shadow levels so menus look like they're closer to the background

The fakeshadow element is added to the drop-down list, so the html looks like this:

<header>
    <nav>
        <ul>
            <li>fruit
                <nav>
                    <ul>
                        <li class="fakeshadow"></li>
                        <li>oranges</li>
                        <li>strawberries</li>
                        <li>grapes</li>
                        <li>lemons</li>
                    </ul>
                </nav>
            </li>
            <li>leafy greens
                <nav>
                    <ul>
                        <li class="fakeshadow"></li>
                        <li>lettuce</li>
                        <li>cabbage</li>
                        <li>spinach</li>
                    </ul>
                </nav>
            </li>
        </ul>
    </nav>
</header>

The fake shadow has a box shadow of 4px and the lists now have a shadow of only 6, so the modified css looks like this:

header { display: block; position: relative; width: 100%; height: 100px; background-color: #FFC; box-shadow: 0 0 10px rgba(0,0,0,.5); }

nav { position: absolute; top: 70px; left: 0; }
nav ul, nav li { margin: 0; padding: 0; }
nav ul li { list-style: none; float: left; padding: 5px 20px; position: relative; }

nav nav { position: absolute; top: 30px; left: 0; padding: 0 20px 10px 20px; overflow: hidden; }
nav ul ul { display: none; background-color: #F5F5BA; border-radius: 10px; box-shadow: 0 0 6px rgba(0,0,0,.5); margin: -10px -10px 0 -10px; padding-top: 10px; }
nav ul li:hover ul { display: block; }
nav ul ul li { float: none; padding: 5px 10px; }
nav ul ul li.fakeshadow { padding:0; height:1px; left:0; margin-top:-2px; box-shadow:0 0 4px rgba(0, 0, 0, 1); }

The background color was also adjusted a little bit to bring out the effect.

demo page

Bonus: Animated tabs

Added 3/15/10 because I can’t seem to get the idea out of my head

In this example, the tabs move when you hover over them but the shadow remains stationary.  It also demonstrates the use of :before (or :after) instead of using a completely separate element in the html.

Tabs with shadows and hover states

The tabs are each li elements with a style similar to that applied to the menu ul above:

<header>
    <nav>
        <ul>
            <li>oranges</li>
            <li>strawberries</li>
            <li>grapes</li>
            <li>lemons</li>
        </ul>
    </nav>
</header>

There are no fake elements this time–we can also add those fake shadows with :before or :after pseudo-elements. Here’s the css:

nav ul { margin: 0; padding: 0; list-style: none; }
nav ul li { margin: -10px 5px 0 5px; padding: 10px 5px 5px; float: left; background-color: #F5F5BA; border-radius: 10px; box-shadow: 0 0 6px rgba(0,0,0,.5); position: relative; cursor: pointer; }
nav ul li:before { content: ' '; height:1px; width: 100%; position: absolute; left: 0; top: 9px; box-shadow:0 0 4px rgba(0, 0, 0, 1); }
nav ul li:hover { padding-top: 15px; background-color: #FDEBB3; }

demo page

HTML5

I found myself wanting a <content> element to match <header> and <footer>.  I’ve found this on several other projects I’ve messed about with html5 on, too.  I’ve since been told that “everything that isn’t in <header> or <footer> tags is content, so you don’t need it,” but

• It’s a useful styling wrapper to prevent a lot of redundant css (and ok, maybe css isn’t a very good reason to include markup if you’re going semantic)
• It feels really semantically inappropriate to put all my <p>, <img>, etc. tags at the same tree-level as <header> and <footer>.  They are not the same level of content.  I guess I could use <section>, but it still feels like section should be something that goes inside <header>, <footer>, and <content>.

I also discovered that I don’t really understand <hgroup>.  Can/should I put it around my headers if there’s only one?  What if there’s a possibility that I might add/remove headers later?  What’s up with this “document outline” thing, how do I preview it to see if it’s doing what I meant?  Can I use it for markup?

It also seems like html5 and microformats don’t naturally coexist very nicely, but I guess they’re working on that.

CSS(3)

There are a lot of cool new things in css3, and it really can be used to substantially reduce markup (no more decorative rounded corner <span class=”bottom right”></span> caps, woo!), especially when combined with things like :before and :after. Border images are awesome, and I really love the button styles I was able to get with a combination of border-radius, background gradients, and box-shadow:

"Keep reading" button with base style (top), hover style (middle) and active style (bottom) using CSS3

/* css to create the above buttons; text styles and -moz and -webkit prefix versions removed for space */
.more, .more:visited {
    line-height: 25px;
    color: #e97e7e;
    border: 1px solid #88706c;
    padding: 0 13px;
    border-radius: 13px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
    background-color: rgb(110, 38, 38);
    background-image: -moz-linear-gradient(#934d4d, #6f2828);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#934d4d), to(#6f2828));
}
.more:hover, .more:focus { /* increase brightness by 10% */
    color: #ffa1a1;
    background-color: rgb(135, 47, 47);
    background-image: -moz-linear-gradient(#ad5c5c, #8a3232);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#ad5c5c), to(#8a3232));
}
.more:active { /* increase saturation by 10% and add an inner shadow */
    color: #e87b7b;
    background-color: rgb(135, 34, 34);
    background-image: -moz-linear-gradient(#944040, #701d1d);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#944040), to(#701d1d));
    box-shadow: 0 0 3px rgba(0, 0, 0, .7), inset 0 3px 3px rgba(0, 0, 0, .5);
}

However, despite all the new developments I still ran into a lot of limitations that it really seems like css should have overcome by now.

Text pseudoclasses: first n words, nth line, etc.

The mockup for the contest had the first three words of each paragraph bolded.  This seemed like a purely stylistic, not semantic, boldening, but all css gives you is first-line and what I needed was first-n-words.  Similarly, there were quotations at the bottom that had 3 lines each, each with a different color.  Again, purely stylistic, not semantic, so I didn’t want to add markup, but how do you get 3 different colors when all you have is first-line?  I ended up using javascript for both of those, and the second one ended up being a pretty seriously ugly hack.

It’s been pointed out to me that these are pseudoelements, not pseudoclasses.  To this I reply that I do not want to have to care.  I would like to be able to do anything I can do with one with the other (“p:first-line a”, anyone?), and I don’t want to have to remember (or constantly look up) which one has the stupid new double colon notation.

Flexible floated image placement

Magazines layouts float images to an arbitrary position up or down from where they naturally fit in the text all the time, but it requires a bit of a hack to do it for the web, and even then you can only do downward.  And while we’re talking about how magazines use floats that aren’t possible on the web, how about floating between columns or floating around an arbitrary shape?

:before and :after

I tried to avoid adding any purely decorative elements to the html, and added them with :before and :after.  But there comes a point when that gets difficult, since you can only add one thing for each of those.  I started out using :before to get a decorative page fold image to show up at the top left of the main article, but I also needed to use that to get the element that pushes down the image for the afore-mentioned image float hack.  I got around it by using multiple backgrounds for the browsers that support it and javascript for those that don’t, but I really wished it were possible to have multiple :before elements.  I was also frustrated by the inability to apply certain css to things included in this way (e.g. width and height for images), and by the ugliness of things like ‘content: “\2192″‘ (that inserts a right arrow, can’t you tell?).

Sure, I could just avoid all that by using javascript in all cases, but I prefer to leave the one-off things like this out of my javascript and keep it with the rest of the style of the element it applies to wherever possible.  Or maybe I’m just justifying an underlying discomfort in applying styles with javascript that’s becoming less appropriate these days.

Webkit developers don’t pay enough attention to detail

I’ll forgive them for the new stuff–it’s not standard, it’s not finished, and it’s got a big “-webkit-” red flag on it to say “use with caution.”  But floats are CSS1, so by now I expect better than the following:

A floated image with text shown in Firefox (left) and Webkit (right). Text on top of the image is circled on the right.

There should not be text on top of that floated image! I think this is related to the float hack mentioned above. There is a 1px wide div shoving the figure down to the appropriate position. I think maybe Webkit is only checking alignment at the top of the line, which is aligned with the 1px div correctly, but the bottom crosses into the second, wider floated element. All other browsers that honor the 1px pusher div seem to check the whole height of the text line.

I also keep running into trouble with new properties being incompletely or incorrectly implemented.  I understand that they’re new, not yet fully standardized, and not yet finished, but it does highlight a different development ideology from other browsers, which I find interesting.  So the couple of things aren’t really complaints so much fun quirks I ran across and feel like documenting.

The one I’ve run into the most different problems with is box-shadow.  On previous projects I’ve hit problems like the property being thrown out if the word “inset” was added to just one of the shadows or the shadow having a thin line of background between it and box it surrounded.  This time everything was much nicer, but I did notice the following on the inset button described above:

The depressed state of the "keep reading" button in Chrome; square corners from the shadow appear outside the rounded button edges.

There’s an inner shadow to show that the button is depressed, but in Chrome the shadow doesn’t get clipped to the rounded button edge.  Safari just ignores the “inset” part of the shadow rule but now keeps the rest.

Another interesting thing I ran across, but fortunately pretty easy to get around in this case, was borders and rgba colors.  It seems that Webkit overlays the colors of both sides at the corners, which isn’t noticeable when they’re all solid and the same color, but can lead to dark squares with rgba:

An rgba border in Webkit with dark squares where transparent sides overlap circled in red

To get around it here, I ended up switching from using borders to using an rgba background color, which then allowed me to get the extra highlight details at the top and left using borders instead of box-shadow as originally planned. (Isn’t it cool how flexible css can be?)

All these cool features make me want more cool features!

Apparently I can never be satisfied. Two big things I want, in addition to the things mentioned above that it seems like css should already have, are blending modes (e.g. multiply, overlay, etc. that you can do in Photoshop and other image editors) and alpha masks. And of course it would be great if some of the new things had more flexibility, like letting me change the box shadow gradient curve from solid to transparent independently of total alpha and spread, or allowing gradients along a specified path in addition to radial and linear.

Edit: Apparently WebKit does masks, awesome!

Conclusion

All in all this was a great learning experience for me, getting to know the new elements and styles.  I’ve since thought of other new things I could have added, like the flexible box model.  I guess I’ll have to think of another project for those.

I griped about Webkit above, but really the support for CSS3 and HTML5 is pretty good in the browsers that support it at all, with more to come in Opera soon and potentially even IE9.

I still wouldn’t use HTML5, at least, for any real projects–check out the page in IE with javascript turned off, ick!  But progressive enhancement with CSS3 rounded corners, box shadow, RGBA, etc. are definitely on the menu.

But I’ve been looking around and I can’t find anything of the sort for aural web design, other than that you should use those properties to make your designs less terrible for people on screen readers.    You might be able to adapt from radio guidelines, if such things exist, but it doesn’t look like anyone has yet.

Am I wrong?  I’m sure there are some conventions shared between screen readers for default aural stylesheets the way that visual browsers do, but I admit I haven’t spent much time with screen readers.  And I’m sure some improvements you could come up with off-hand, like adding a pause before and after headings, which I suspect is one of the screen readers’ defaults.  But some things don’t have direct analogues to visual styles–what does a hyperlink sound like?  How about when you hover over it?  And according to Professor Bruce Walker in an Intro to HCI course I took a couple years ago, there are some things that the blind and the sighted just conceive of differently, like high vs low pitch to mean something large.

I’ve never attempted to design an aural stylesheet, but I’m genuinely curious now and probably will.  If you know of a style guide (or several), please let me know in the comments!