These Thesis borders are already created by an image, so half your work is already done.
Last week, I showed you a very simple way to generate a gradient image, as well as how to use it as a background for the different sections of your website. Today, I’ll show you how you can use gradients to make unusual borders on your site. Borders are usually made via CSS only — the CSS instructions for a site will tell the browser to “draw” borders between the different sections of your site in straight solid lines, or perhaps in dotted lines, as the ones here on ABDPBT tech do.
Example of pure CSS borders.
This is a neat and easy way to divide up the different sections of your site, but it is not the only way to do it. Some themes use an image file to generate a border: the image is loaded into the folder on your host where you keep default images (like the header, or any sidebar buttons you might have) and then the CSS command will tell it to render the image where the border is supposed to be, and then repeat it, either according to the X-axis (horizontally) or the Y-axis (vertically) or both, depending upon the type of image. In order to get rounded corners on your image, you need to create top and bottom images in Photoshop and create new divs to contain these images. This may seem like a lot of work, and it is, but the end effect is very cool. When CSS3 is finally implemented, we will be able to do this much more quickly with a new CSS property (border-image), but for now, here’s how you can get the same effect on your site.
These Thesis borders are already created by an image, so half your work is already done.
Take a look at the column_wrap on ABDPBT. Its border looks like it is made from CSS, but it’s actually already a repeating image. Let’s say I wanted to change that image to a gradient. First, I need to figure out what the CSS code is that creates it. If I use Firebug to figure it out, I’ll find that the columns are created by the following CSS:
#column_wrap {
background:transparent url(images/dot-ddd.gif) repeat-y scroll 21.2em 0;
}
If I change the code to a different image (a gradient), the code looks like this:
The borders are actually two different sections, so we have to alter the CSS for both sides.
As you can see, this only changed one side. To do the other, we have to figure out what CSS code is creating it. Using Firebug, we find that it is this code:
#content_box {
background:transparent url(images/dot-ddd.gif) repeat-y scroll 96.7em 0;
width:100%;
}
So we’re going to change that to point to a gradient image, but note that this time it’s a different image because we want the gradient to point outwards, the flip of the left side:
.custom #content_box {
background:transparent url(images/gallery_bg_right.gif) repeat-y scroll 96.7em 0;
width:100%;
}
And success:
We did it!
There are a bunch of other ways to make borders with images, and this is just the simplest way. Next time, borders that require you to make a box . . . [shiver.]
TWEET THIS
