Liquid Dropshadows and Curved borders

by Nicholas Johnson

Tired of your boring square boxes for your content? Like to do something a little more interesting without messing up your markup?

You can spice up your boxes with a range of effects including rounded corners and dropshadows using a powerful but simple technique called sliding doors. Although it's simple the sliding doors technique is incredibly useful in a whole range of situations. We use it heavily throughout this site to get all the curves and dropshadows which Graeme just loves!

In this tutorial we will look at giving an ordinary piece of content a classic curvy border, but once you understand the technique you can achieve all sorts of fabulous effects. Here's how it works:

Step 1 - the left border

We start by creating a block level element, say a div and giving it some content. (If you don't know what a block level element is see the introduction css formatting tutorial)

<div class="main">
Some content<br/>
Some more content</br>
</div>

Sliding doors uses background images so we style this new div with a background image and optionally a background colour. We align the image to the top left and have it repeat vertically using css like so:

div.main {
background:#fff url(img/left-border.png) top left repeat-y;
}

Our page now looks something like this, we have a rather nice looking left border but not much else to speak of yet. Read on to find out what we do about the right border.

Step 2 - the right border

Now we are in trouble. Elements can only have one background image but we need a second background image to create the right border. To overcome this we have to modify our markup a little and add a nested element. This is bad, but there are ways to make it less bad which we will come to in a bit. Our html now looks like this.

<div class="main">
    <div class="content">
        Some content<br/>
        Some more content</br>
    </div>
</div>

Now we need to add another rule to style this new div, the trick is to make it transparent so we can still see through to the div beneath it

div.content {
background:transparent url(img/right-border.png) top right repeat-y;
}

Our page now looks something like the following.

You can see the content div has the right border, and because it's transparent we can see through to the main div which has the left border. Also, because the divs are block level elements and block level elements by default are as wide as their containing block, we can resize our browser window and all will be well. We can visualise what's happening like so.

3d picture of the two divs on top of one another

Step 3 - the curves

This is all very, we now have a liquid box with pretty borders to the left and right, but where are the curves? There are several ways to remedy this unpleasant situation: a 'good' way and several slightly less good but arguably more fun ways. We'll cover the good way here, see box for the less good ways.

To get the curves we need some more block level elements. At the top of your document you will probably have a heading, so lets put this in.

<div class="heading">
    <h1>My Test Heading</h1>
</div>

<div class="main">
    <div class="content">
        Some content<br/>
        Some more content</br>
    </div>
</div>

<div class="footer">
    <p>
        email: This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
    </p>
</div>

I also put a footer in there too. Can you see where I'm going with this? We now have block level nested elements at the top and bottom of our document. This should look similar to the content div we styled earlier, and in fact we can style them in exactly the same way

div.heading {
    background:#fff url(img/top-left-border.png) top left repeat-y;
}

div.heading h1 {
    background:transparent url(img/top-right-border.png) top right repeat-y;
}

div.footer {
    background:#fff url(img/bottom-left-border.png) bottom left repeat-y;
}

div.footer p {
    background:transparent url(img/bottom-right-border.png) bottom right repeat-y;
}

The trick is to make the top-left-border.png and bottom-left-border.png images wider than they will ever have to be. The extra width will then hang out over the right edge of the heading and footer divs. Because they are background images we wont see these parts of the images. Our page should look something like this and we can visualise what we've done here like so:

Other uses for sliding doors.

There are a thousand and one uses for sliding doors. Originally they were used for creating tabs, and they work very well for this. I've used them when a client has requested a full width header image but still wanted a liquid layout. The client's logo slides over the top of a repeating background image which fills in any extra space.

Making sliding doors more (or less) evil

Because the sliding doors technique requires nested block level elements it sometimes requires the addition of extra non-semantic markup. We can avoid this by using existing elements on the page to hang out images on. an h1 or a paragraph works just fine, If these elements already exist we can use them to keep our markup from getting cluttered.

If we're not worried about this we can nest more than two elements. For example, with 4 nested elements we can dispense with the header and footer divs altogether and just use the 4 nested element to hang our images on. This is how the curved border option in Joomla works. I wouldn't recommend this approach though as it will turn your markup into spaghetti.

Another slightly dubious method is to use dom scripting to add the extra divs. This will keep your markup clean but will mean writing quite a complex javascript file. I've seen this used to good effect on a project where is was not practical to modify the html source and curved borders were required. This sort of behaviour is generally considered moraly dubious by many css developers though because it means using javascript for presentation, and so should be approached with caution if at all.