Page 1 of 1

Fluid Rounded Corners in CSS w/ Gradients/Drop Shadows?

Posted: Wed Jun 28, 2006 11:22 am
by jayshields
Hi all.

I've been thinking about this for a while now, so today I checked out some tutorials.

I want to create some rounded boxes in CSS (duh), but I don't want to specify the width. I can't get my head around it.

I'm presuming I can't have a vertical gradient without just putting a high res image in the background. I'm also presuming I can't use drop shadows on the box without knowing what the background colour of the page will be - since black to transparant gradients don't do well in gifs, but I'm not sure about pngs.

I want to get cracking making one of my own but I don't know where to start, and the online tutorials seem very long winded - in a perfect world I just want to create a div, apply the style and put my content in it and it's job done.

Has anyone had a good crack at this before and can show me some easy to follow example?

Thanks a million.

Posted: Wed Jun 28, 2006 11:33 am
by RobertGonzalez
Rounded corners using CSS div's is a loaded issue. There are all sorts of tutorials on this subject at A List Apart and various other sites. Some have managed to do it using only a handful of divs. Others have done combining divs JS. It is easy to do, but not simple. For that reason (especially using the drop shadow effect) I have tended to stay away from rounded corners because the code just looks cluttered in my opinion.

Posted: Wed Jun 28, 2006 12:53 pm
by Oren

Posted: Wed Jun 28, 2006 2:29 pm
by pickle
It's dang easy for Mozilla based browsers:

Code: Select all

-moz-border-radius: 10px;
Of course, this only works with Mozilla & FF. The good news is this has been adopted by CSS3 so it'll become much easier to implement once that becomes prevalent.

Posted: Wed Jun 28, 2006 3:08 pm
by RobertGonzalez
But that element does make the CSS2- validators go wonky.

Posted: Wed Jun 28, 2006 3:10 pm
by Benjamin
Another good method is to create them using transparent gif's so that you can change the background color as you please without recreating all the corners.

Posted: Wed Jun 28, 2006 4:15 pm
by jayshields
I've given up. It's more hassle than it's worth to me - but thanks for the input.

I'll stick with my square pointy boxes for now :)

Posted: Wed Jun 28, 2006 5:03 pm
by RobertGonzalez
Dude, there was no harm in trying. Just about all of my designs have square cornered boxes because the code used to develop the rounded corner effect is semantically inappropriate and absolutely code-cluttered.

Posted: Thu Jun 29, 2006 6:12 am
by freefall
just use these js libraries. Painless and awesome and god no images, images to do rounded corners is well....laughable.

Posted: Thu Jun 29, 2006 6:56 am
by Chris Corbyn
When the heck are going to see css3 in all major browsers? :( I'm too impatient. Opera's latest release has parts of it in place afaik.

Posted: Thu Jun 29, 2006 8:02 am
by Roja
d11wtq wrote:When the heck are going to see css3 in all major browsers? :( I'm too impatient. Opera's latest release has parts of it in place afaik.
By way of clarification, *none* of the current browsers - including Opera - completely support CSS2, which went final years ago.

Even if you want to take the optimistic view that the alternative browsers support "a lot" of CSS2, then you have to consider IE. IE7 has taken 5 years, and doesn't support CSS2 fully - and its not even out yet. Once it is out, estimates are that it will take over 3 years for it to overtake the dominant position from IE6. If thats true, even if IE8 comes out in a year (and they've made no announcements about doing so), AND it takes only two years to overtake IE7, we're looking at at least six years.

And thats assuming that they release a new version of the browser faster than they have ever done before, with better standards support than ANY other browser on the market, AND convince customers to switch to it faster than any other OS they've ever released. I call that highly optimistic.

A decade from now, CSS3 might be a reasonable design platform.

Posted: Thu Jun 29, 2006 9:23 am
by matthijs
And the question remains IF microsoft even WANTS to support css fully:

from slashdots "interview" with HÃ¥kon Wium Lie, who in 1994 proposed the concept of CSS

Question:
With MS's next browser release (IE 7), you mentioned in other
> interviews that their decision to not supprt CSS2 was more a political
> decision than a mechanical one. Aside from their obvious desire to
> dominate the world, what politics do you think are in play that make
> them not want to conform to the standard, and what do you think would
> change that landscape so that they would have some initiative to
> fully support it?
His answer:
Great question. It's quite clear that Microsoft has the resources and talent to support CSS2 fully in IE and that plenty of people have reminded them why this is important. So, why don't they do it? The fundamental reason, I believe, is that standards don't benefit monopolists. Accepted, well-functioning, standards lower the barrier of entry to a market, and is therefore a threat to a monopolist.

From that perspective, it makes sense to leave CSS2 half-implemented. You can claim support (and many journalists will believe you), and you also ensure that no-one can use the unimplemented (or worse: buggily implemented) features of the standard. The only way to change the equation is to remind Microsoft how embarrassing it is to offer a sub-standard browser. And to use better browsers.

Another reason for not making a IE too good is that it will compete with Windows. A modern browser is an application platform; the combination of HTML, JavaScript, CSS and DOM allows developers to target the web instead of Windows, Linux, or Mac.

Posted: Thu Jun 29, 2006 10:09 am
by RobertGonzalez
Man, that was a good answer. Wish I could talk like that.