11 RE: Seems very similar to the ThrashBox...

Yes – part one of the article series was, which is also noted in the acknowledgement in said article, but not this one.
This article demonstrates how to work with gradient/patterned backgrounds – something that the Trashbox example cannot do.

posted at 01:28 pm on February 27, 2004 by Søren Madsen

12 RE: Customs Corners/Borders with only 1 image

Lim Chee Aun:

“So far I know PNG/GIF are raster formats, not vectors, so they cannot get infinite width/height, right?”

You are correct, but the “inifinite width/height” is referring to the potential sizes of the content box, not the images.

Because this technique positions the corner images at the edges of the content box, repeating them where necessary, not stretching them, the content can be as large as required and you still have your images in place.

Your single-image technique works perfectly well if you have a fixed size for your content box, but the 5-image technique is for fluid designs.

Any clearer?

posted at 02:01 pm on February 27, 2004 by Shakey

13 A simple question...

Perhaps I missed it, or don’t understand the concept fully, but wouldn’t creating a GIF as large as some of the ones discussed here cause problems with page loading times and all?

Also, I just want say thanks for all the great info here, from both the article authors and the other folks responding to them. I have learned more here than in any class or book!

Thanks.

posted at 02:06 pm on February 27, 2004 by Critter

14 good article

I’ve been playing around with custom background borders for a while now, there are a number of different techniques to achieve similar effects. Here’s one of my quick experiments: [url=“http://www.graphikjunkie.com/borders/”]Holepunched[/url]

posted at 03:41 pm on February 27, 2004 by Jim

15 Rock on!!!

Yet another informative and useful article. Thank you Mr. Madsen and ALA. You make my life easier.

posted at 04:38 pm on February 27, 2004 by JR

16 nice overview

I might just have to use this article to help me update my site. I think that Jakob Nielsen might even have a graphically fancier site than me right now :)

posted at 06:31 pm on February 27, 2004 by Andrew

17 RE: Customs Corners/Borders with only 1 image

Shakey:
“Because this technique positions the corner images at the edges of the content box, repeating them where necessary, not stretching them, the content can be as large as required and you still have your images in place.”

I see.. div.ArticleLongContent and div.ArticleBody accumulate the changing/expanding height of the container, with the repeating background images.

“Your single-image technique works perfectly well if you have a fixed size for your content box, but the 5-image technique is for fluid designs.”

well, my testcase is fluid too. You can try it by resizing the font sizes. By the way, I’ve also created another testcase, 99% replica of step2.4, still using only 1 image:
http://phoenity.com/tests/custom_corners_two.html

posted at 05:09 am on February 28, 2004 by Lim Chee Aun

18 What about the background?

I can’t seem to be able to figure out how to do that gradient background. Do I just apply the gradient bit (black->turquoise for example) and position it at the bottom, or am I just silly?

posted at 05:49 am on February 28, 2004 by Jay Hills

19 Tiny holes and 2 images

The holes shown in IE6 are coming from what is known as the IE peekaboo bug (http://www.positioniseverything.net/explorer/peekaboo.html). A manifestation of that particular bug. The good news is that there is now a little fix for it. It will show on anyones IE6 browser with XP, granted. You just have to scroll with the mouse will slowly up and down… you’ll end up seeing the gap (look at the bottom).

As to work with less images, you can with two, one holding the 4 corners and another one for the right-hand side shadow that will allow infinite length.

I’m at work right now, but the moment I get home I will post a link with a sample of how to modify the CSS in the article for the peekaboo bug and the alternative 2 images CSS. Give me a few hours ;)

posted at 06:08 am on February 28, 2004 by Jose Fandos

20 Tiny holes and 2 images (correction)

“with the mouse will slowly up” should be “with the mouse wheel slowly up”. Sorry for that :)

posted at 06:10 am on February 28, 2004 by Jose Fandos