Fluid Rounded Corners in CSS w/ Gradients/Drop Shadows?
Moderator: General Moderators
- 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?
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.
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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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.
It's dang easy for Mozilla based browsers:
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.
Code: Select all
-moz-border-radius: 10px;Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- jayshields
- DevNet Resident
- Posts: 1912
- Joined: Mon Aug 22, 2005 12:11 pm
- Location: Leeds/Manchester, England
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
By way of clarification, *none* of the current browsers - including Opera - completely support CSS2, which went final years ago.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.
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.
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:
from slashdots "interview" with Håkon Wium Lie, who in 1994 proposed the concept of CSS
Question:
His answer: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?
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.
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA