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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

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

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

But that element does make the CSS2- validators go wonky.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post 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 :)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
freefall
Forum Commoner
Posts: 48
Joined: Sun Jun 18, 2006 3:55 am

Post by freefall »

just use these js libraries. Painless and awesome and god no images, images to do rounded corners is well....laughable.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Man, that was a good answer. Wish I could talk like that.
Post Reply