Part I showed how to apply customized borders and corners to liquid CSS layouts. The technique works well, as long as your design uses solid background colors. But what if you want to use patterned or gradient backgrounds? In Part II, we’ll extend the technique so you can do just that.
A design problem#section2
We’ve received another directive from our hypothetical graphic designer of Part I. Encouraged by the results of our previous collaboration, he has attached a new sketch he wants us to incorporate. (That’s it on the left. Four rounded corners against a tall, gradient background.)
“It’s easy to change, right?” he asks.
“Piece of cake,” is our initial response.
We’ll start off by slicing up the new sketch, and deal with technicalities later.
See Step 2.1 — the sliced-up sketch.
Why it doesn’t work#section3
The styles for our previous attempt at customized borders and
corners looked like this:
div.Article {
background:
url(images/custom_corners_topleft.gif)
top left no-repeat;
width:35%;
}
div.Article h2 {
background:
url(images/custom_corners_topright.gif)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
}
div.ArticleBody {
background:
url(images/custom_corners_rightborder.gif)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
This technique works by placing
background images in elements that follow each other
in a document structure. These elements are marked up in
the same stacking level, but will display stacked on
top of each other in the order in which they appear in the
document.
The first element to occur
is placed “under” any following element
unless a specific z-index
value tells
the user agent to do otherwise.
In our example,
the large top left
background
image is placed within the first element to appear
in our box, which means that our <h2>
and all following elements with background images
will appear on top of it, thereby hiding the
right and bottom corners (and sides) of the top
background image.
left
So if we’re going to use borders and corners that
require transparency — like a rounded corner box
that floats freely on a gradient background — our technique will prove inadequate.
Let’s see what it looks like.
See Step 2.2 — The new graphics applied to the old CSS
How to make it work#section4
The fix is easy. We’ll use relative positioning
to nudge around the boxes that contain the background
images.
In this illustration, we’ve outlined
our div.Article
with a solid black,
and our
div.Article h2
with a solid red to show
the technique we’re using. We’ve moved the div.Article
block
h2
containing our top right
background image
14px to the right by giving it a right:-14px
value and positioning it relative to its parent
element. (14px is
the width of the top right
background
image.)
We’ll simply apply the same principle to all other
elements we need to move, using the width or height
of the background image we want to reposition to determine how much to move each element.
div.Article h2 {
background:
url(images/custom_corners_topright.gif)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
position:relative;
right:-14px;
padding-left:0;
/* Compensation for the
repositioned box */
}
div.ArticleBody {
background:
url(images/custom_corners_right.gif)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
position:relative;
right:-14px;
padding-left:0;
}
div.ArticleFooter {
background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
position:relative;
top:12px;
}
div.ArticleFooter p {
background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
padding:15px;
display:block;
margin:-2em 0 0 0;
position:relative;
right:-14px;
padding-left:0;
}
See Step 2.3 — Now we’re really getting there
We’ll have to compensate for the repositioned
elements in our final layout calculation, but this
really is all there is to it.
The grand finale#section5
Now we’ll apply our technique to a more complex layout.
This time we’re demonstrating it on a three-column layout with a header from Owen
Briggs. We’ve included three alternate stylesheets for browsers that support style switching (like
Mozilla Firebirdfox),
to demonstrate the drastic design impact that customized borders and corners can have
on your next project.
We’ve also added
a fresh new div
to the long center
column, and given it the class name, ArticleLongContent
.
We use this div
to wrap our ArticleBody
if the contents of the article grow too long for our top left
background image to cover.
The class contains the following style:
div.ArticleLongContent {
background: url
(../images/custom_corners_leftborder.gif)
top left repeat-y;
}
See step 2.4 — Our technique applied to a layout with 3 columns and header
Acknowledgements#section6
Thanks to Inge Jørgensen and
Stephen Paul for alternate graphical examples, Brian Alvey for letting me abuse his Browsercam account, and all the people who brought up interesting points in the discussion of Part I of this article.
Can you make a custom corner print? isn’t the default in most browser set to print without background colors and images?
This doesn’t seem to take into account a large display size. My 1600×1200 monitor shows a gap between the end of the top left image and the right borders. Perhapse just making that image bigger would help, but I don’t think that’s the best solution.
This solution will definately work, though, for cells with a fixed width.
Im working on this site and Im using this method to create a ouline around tables. It looks great in everything for mac, but IE on PC looks really messed up. Here is the url: http://www.designsequence.net/mead/index.php?id=people . The CSS file is here: http://www.designsequence.net/mead/mead_css.css . Anyone know how to fix this?
I have noticed that if you add quite abit of text in the Article box then it seem to break at the bottom ????.
Cant See why
its not really that great –
i could work out wether it was a tutorial or not?
could be good to be ‘custom’ border, not rounded
Just like Dave said it’s fixed and can not be used in case of serious projects where you need to have dynamic width.
Unfortunately adjusting the background size for a particular project is not the solution to go with, it’s a hack.