|
| |
|
|
funk theory
Posts: 44
Joined: 11/6/2006
From: Kent, UK
Status: offline
 |
CSS Rounded Corner Background - 10/20/2008 11:44:38
I have been playing with CSS and havent been able to do this yet so I just wondered how i would make a rounded rectangle for a background using CSS?
If i designed it in photoshop, do i need to make the image transparent intially and then draw the rounded rectangle shape, im a bit confused. Thanks.
|
|
|
|
womble
Posts: 6009
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: CSS Rounded Corner Background - 10/20/2008 18:18:11
You could try this one: http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en
(works okay as long as you don't mind using empty divs - some prefer the code more cleaner). There's a number of ways of using curved corner images to get the effect of a rounded rectangle (just search for something like "CSS rounded corners"), and many, like the preceding link will let you specify the foreground and background colour and generate the required images for you. As Tail says, it's a lot easier if you have the background of the image the background colour and your curved edge in the colour of your box.
You've not said what method you've tried, but the advantage of using 4 background images, one for each corner, rather than just one rectangle image with rounded corners is that with most techniques that use the 4 image method, the box will expand with the content and for example if the text is resized.
There's also this image-free javascript method I've used on a couple of sites which is an option (http://www.curvycorners.net/index.php) - without js it degrades to a plain box without the curvy corners.
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
funk theory
Posts: 44
Joined: 11/6/2006
From: Kent, UK
Status: offline
|
RE: CSS Rounded Corner Background - 10/21/2008 5:10:49
Thanks tailside, thats what i thought. Womble, at the moment, i am using one background image on my test site trying to get everything css as my site is so out of date in terms of techniques and looks old too so i am spending the next few months working on css and other techniques for it look more professional. The four images css sounds cool, i may go for that instead, with practice.
| |
|
|
|
womble
Posts: 6009
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: CSS Rounded Corner Background - 10/21/2008 17:25:29
quote:
ORIGINAL: funk theory
The four images css sounds cool, i may go for that instead, with practice.
Though it looks a little complicated when you first see the code, it's actually surprisingly easy to do as long as you put your content in the right div. The first time I used it, I thought "This is never going to work!", but it worked straight off. There's various minor variations online on how it's set up, but most of the examples online are fairly well commented so you can see what's going on with the code.
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
rdouglass
Posts: 9280
From: Biddeford, ME USA
Status: offline
|
RE: CSS Rounded Corner Background - 10/22/2008 10:44:53
<$.02>
I use the 4-corner-image method also and once you do 1 or 2, they're quite easy to bang out.
My one word of (what I consider) advice is to stay away from "padding" in the CSS for those nested DIV's. IE has such an issue with padding (even between it's own versions) that IMO you're better off to work just with margins. You'll have so much conditional code for different versions of IE that it'll frustrate the heck out of you.
Or at least it did me.
I try to stay away from "padding" anyways just because of that but be sure to test your code on various platforms with the 4-corner technique.
</$.02>
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
michaelea
Posts: 143
Joined: 11/9/2007
From: Cannon Beach, US West
Status: offline
|
RE: CSS Rounded Corner Background - 10/27/2008 12:44:53
It's Now Official.....
Square Corners are in!
*Phew* I knew that if I avoided those rounded corners long enough that things would turn out ok!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
)