Comments on: Auto-Cropping Rounded Corners

By: zara

zara — Tue, 05 Aug 2008 19:13:04 +0000

If you must use rounded corners, use jQuery to add that after the page is loaded.

the curvycorners-plugin does not work with “position:fixed”, you need to do it on your own… zara

By: Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design

Tue, 06 May 2008 08:13:33 +0000

[…] Auto-Cropping Rounded Corners- A newborn resolution for amygdaliform corners, what it does is: it crops the noesis beneath it, so that anything with a scenery colouration or ikon (headers, paragraphs, modify images) automatically intend the amygdaliform crossway communication with no player work. […]

By: Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design

Tue, 06 May 2008 08:13:33 +0000

By: Using CSS to Do Anything: 50+ Creative Examples and Tutorials

Using CSS to Do Anything: 50+ Creative Examples and Tutorials — Mon, 21 Apr 2008 22:36:26 +0000

[…] 3 Simple Steps in Coding a Rounded Corners Layout- A new solution for rounded corners, what it does is: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work. […]

By: Matt Hobbs

Matt Hobbs — Mon, 21 Apr 2008 16:32:47 +0000

@Eric: I attended a workshop of yours in London a couple of years back, i still use the method you describe for rounded corners, which is the one you have mentioned (i assume it is still the same one and hasn’t been modified). Having 1 image for all corners is great, and the slight added markup is fine 99% of the time.

I have to admit i didn’t even think of adding the corner markup using JS (been a little slow there, oops!). Using jQuerys $(document).ready() method would be perfect as users won’t see the corners flash into place. May just have to add a quick plug-in to do it as i seem to be using the method a few times a month.

Great article!

By: Dan

Dan — Thu, 03 Apr 2008 01:34:58 +0000

@Eric -
Re the write-up, I’d for sure be all for doing a joint article; for ALA or otherwise…I think that’d be great fun.

Re what to do about ie6, it’s always a toss up, isn’t it? One nice thing about going the direction you suggested is that we could use that chance to apply the css filter (for PNG-type transparency) manually, and throw out the script. I’ve already noticed delays running that script through each corner in ie6, so maybe that’d be the way to go. It also would make me feel a lot better to have just one image loading normally.

Anyway, maybe drop me an email (dan at this site) and we can talk about things some more.

By: Eric Meyer

Eric Meyer — Thu, 03 Apr 2008 01:12:04 +0000

Correct about the -1px solution! And yeah, the difference with the background image(s) is that I was using GIF89a instead of PNG, so I didn’t have to deploy any fixes for IE6. The various IE6 PNGfixes, like Angus’, kill ‘background-position’ values, which in turn kill the ability to use a single image.

I never did get around to writing up how I did my solution. Maybe we should do it jointly. I think a useful update would be to use CSS hacks (or a conditionally commented IE6-only stylesheet) to feed the sliced-up and fixed PNGs to IE6, while letting everyone else use a single PNG.

Of course, if IE8 supports rounded corners, the impetus for using this kind of solution will diminish, but it could still be very useful for the next couple of years.

So whaddya think? Should we write it up, maybe submit it to A List Apart?

By: Ralph

Ralph — Sun, 23 Mar 2008 10:25:52 +0000

Thank you for your idea and i will testing in my next days for my own websides. Ralph

By: Dan

Dan — Fri, 21 Mar 2008 14:22:17 +0000

@Eric - Thanks for stopping by. As far as using one image, my original version of this did, but i couldn’t get the ie6 transparent png filter to work with background-position, so i abandoned that (sadly) and moved to four images. If you know of a way to get that to work, i’d love to know.

As far as removing the inner container…you could probably set all of the positioning values to -1px and it would overlap the outer container borders. That indeed would make things more simple.

Perhaps I’ll do some more testing and update this solution to reflect those changes. It would be nice to cut it down a little. Plus, who doesn’t love a CSS puzzle? (;

By: Eric Meyer

Eric Meyer — Fri, 21 Mar 2008 04:56:49 +0000

I did something very, very similar for Technorati (which is a couple of designs past that one) a few years back, but with three differences. One’s minor, the second notable, and the third structural.

The minor one: I used bs instead of divs.

The notable one: I used one background image, not four.

The structural one: no “b_innerContainer” or other interior-wrapping div; just the element to be cornered and the bs to define the corners.

In exchange, the CSS was a little more complicated than yours, though not by much.

So, given those clues, can you work out how I did it? I promise to share the answer if nobody does (ping me by mail if needed).