1 Clever, but . .

clever, i’ve always tried to do it the other way round, with the transparent pixels on the outside of the shape. However, your exmaples don’t allow for a background that may change colour/pattern if the user scrolls the page? they would just get ugly corners. But its still a good technique for use with solid backgrounds

posted at 03:09 pm on April 30, 2004 by Vladamir

2 Example images

I think your final example image has the transparency inverted. The Mountain should be transparent, and the sky should be solid.

posted at 04:00 pm on April 30, 2004 by Andrew

3 How about other boxes?

This works great with definition lists, unordered lists with anchors in them, or anything else with more than one element. But, how can we maintain the semantic markup and round all 4 corners of a <div> box? I run into this problem often with containing boxes. Anyone?

posted at 04:03 pm on April 30, 2004 by Pete Stuart

4 Fluid widths

This technique bascially requires minimum of two block elements to position the top and bottom background images. So, this technique must have specific width (in pixels) apllied.

posted at 04:31 pm on April 30, 2004 by Lim Chee Aun

5 Awaiting CSS 3

Pete: you can either use Javascript, or you can wait for CSS 3. With Javascript you can build a script that finds divs with a certain class and dynamically add three more nested divs around that div using the DOM – these can then be used to apply background images to each corner in turn. This isn’t ideal, but it’s not really a huge upset if people without Javascript enabled browser don’t get to see a decorative part of your design and at least it keeps your underlying markup clean.

CSS3 introduces the ::outside pseudo-element, which lets you apply as many background images(and other effects) to a single div as you like: http://blog.tom.me.uk/2003/07/14/looking_ahead_to_css3_part_1_the_outside_pseudoelement.php

posted at 04:55 pm on April 30, 2004 by Simon Willison

6 PNGs Anyone?

If you use PNGs, this technique has the potential for greatness in visual effects. No offense to Mr. Cederholm, but the lack of anti-aliasing in the images was extremely noticiable, especially in the last Everest background image. This has nothing to do with his image-manipulating capibilites, but with the GIF format’s 1-bit transparency problem. If you used PNGs, the mountain would have looked stunning.
Of course, thanks to one major browser make (no names, of course), we can’t use transparent PNGs without some hackery. Yet. Michael Lovitt’s article anyone? These two techniques together would be great.

posted at 05:47 pm on April 30, 2004 by Rajeev

7 Javascript

Simon, could you (pretty please) make such a Javascript to achieve the effect that you described? I’ve also been struggling with giving content boxes four rounded corners, and if you could make that script, it’d make my life so much better. I’m sure it’d be a huge hit with hundreds of other CSS geeks too. :-)

posted at 06:00 pm on April 30, 2004 by Sage

8 Similar to the "Thrash box"

A very cool alternative to to Ryan Thrash’s ThrashBox. It definitely has a place being used. Thanks

posted at 06:07 pm on April 30, 2004 by Harry

9 Four Corners On Divs

Pete, I’ve run into the situation you describe. I think of the problem in terms of requiring a div to have 2 or more background images applied to it (and in your case 4). So essentially, I’ve used one div for each background element. And nested them. For the visual folks like me it looks something like this:
<div class=“TopLeftCorner”> <div class=“TopRightCorner”> <div class=“BottomLeftCorner”> <div class=“BottomRightCorner”> Your content goes here. </div> </div> </div>
</div>
You position the background element of each corner to it’s respective corner of it’s div.
It’s a big mess but it get’s the job done. Simon is describing a simlar solution above but using an automated process (javascipt) to generate all this code—if I understood it right.
Thanks to A List Apart for an interesting article.

posted at 06:34 pm on April 30, 2004 by Chris

10 Semi-transparent ???

A little offtopic question here,

Is there something as semi-transparent images. I’ve seen them being used as backgrounds on Divs so as to get a translucent (partially visible)?

posted at 07:24 pm on April 30, 2004 by Abhi Malani

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)