Quarter circles
My aim is to create boxes with curved corners so i can insert text into them. I have trauled the web and found that you can do this variuos ways. The problem is that whichever way i choose requires me to create images of quarter circles (one for each corner), which i don't know how to do. I have limited experience of graphics programs (PSP8, etc), but im sure with good instruction i'll manage.
Thanks in advance.
ptpspptps0 posted this at 22:19 — 6th May 2006.
He has: 52 posts
Joined: Apr 2006
Sorry, circles were definately not accounted for when they were making HTML.
From what I know, yes, you will have to use images. I have somewhat of an idea on how to do this, and I can make a quick sketch of it for you, but I don't want to kill all my attachment space on here, so IM me if you have AIM, or just PM me.
Also, if you are as good of a Photoshop user as you say you are, you will know about 'slicing'.
Busy posted this at 23:24 — 6th May 2006.
He has: 6,151 posts
Joined: May 2001
CSS is also another option
http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/1/
No images were used, just CSS and Javascript. here is the result of the tutorial
If you want to use images, in any graphic program make a circle, then depending how good the graphics program is, either cut out one quater at a time or all four at once.
Ideally the images should be saved as .gif and the outer edges made transparent (so can be reuseable)
ptpspptps0 posted this at 01:18 — 7th May 2006.
He has: 52 posts
Joined: Apr 2006
That's pretty neat!
But...
StuPeas posted this at 11:12 — 7th May 2006.
They have: 36 posts
Joined: Oct 2004
Thanks for the replies everyone. Nifty corners is cool but seems there is a hell of a lot of extraneous markup ( at first glance anyhow, I've not yet studied it thoroughly). what i was realy after was some simple instructions on how to use an image editing program to get rid of 3 quarters of a circle and make any extra background left as transparent (thanks Busy), so that it will work with any BODY background colour.
I did say that i have LIMITED (very little) knowledge of image editing software, so i dont state that i am good (? Maxwell).
Thanx again.
ptpspptps0 posted this at 13:16 — 7th May 2006.
He has: 52 posts
Joined: Apr 2006
Google it, son!
Busy posted this at 23:56 — 7th May 2006.
He has: 6,151 posts
Joined: May 2001
Here are a couple of results from google when searching for rounded corner tutorial
http://www.htmlgoodies.com/tutorials/tables/article.php/3479841
http://www.webdevelopersnotes.com/tips/html/html_table_tutorial_rounded_corners.php3
http://www.freewebmasterhelp.com/tutorials/corners (has code error making result messed up, just ignore the '="25">' on the screen)
You could change the search term to include PSP (paint shop pro) if thats the image editing program you have, or PS (photoshop), or even Paint (microsoft) although I doubt you'd get many results.
Rounded corners are made to suit the space, not the other way around. A method to work out your corners is to make the table, fill it with the content you intend to have and turn table border on (border="1"), now depending on your cellpadding and cellspacing (if you don't use them add 3) measure down from top left corner, and across from top left corner, can use a screen ruler or even a normal ruler (although the numbers will be slightly off), do a diagonal at 5pixels, than at 10 pixels, 15 .... until the diagonal touches the text, subtract 5 pixels and thats the size of corner you need (width and height)
StuPeas posted this at 12:19 — 8th May 2006.
They have: 36 posts
Joined: Oct 2004
I think the title says it all. I spent hours googling and couldnt find anything. Posting a question should be a last resort and not an excuse for the lazy.
You are a STAR, Thanx Busy
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.