Round corners CSS/image generator

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Free FrontPage Templates

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Round corners CSS/image generator

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Community >> OutFront Discoveries >> Round corners CSS/image generator

Page: [1] 2 next > >>


Starhugger Posts: 534 Joined: 4/12/2005 Status: offline	Round corners CSS/image generator - 5/11/2006 12:49:01 http://tools.sitepoint.com/spanky/ This seems like it would be a very useful tool! It generates CSS code and images to create rounded corners on blocked areas of your web page. You specify the radius size of the curve in pixels, the H-tags that will be used with it, and the foreground and background colours. Click the "Spank Me!" button and away you go! It generates all the CSS code, the round corner graphic images to be used with it, and even some additional code to beat IE into submission (although makes no claims to tame IE5). Requires no extra HTML and no Javascript -- just a div declaration. Have fun! Starhugger


Taz Posts: 2895 Joined: 7/6/2004 From: U.K (Formerly outer space.) Status: offline	RE: Round corners CSS/image generator - 5/11/2006 13:00:47 funky! _____________________________ Smiley T-Shirts and other Geeky fun stuff, Smileys and phpbb Smiley paks. (in reply to Starhugger)


rdouglass Posts: 9280 From: Biddeford, ME USA Status: offline	RE: Round corners CSS/image generator - 5/11/2006 14:02:17 Interesting CSS. I've been 'playing' with round corners recently on a page here: http://www.rogerdouglass.com/rhino/default2.asp but my CSS uses 4 nested div's for my corners. I think I'll give that technique a whirl. Thanks. _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to Taz)


BeTheBall Posts: 6381 Joined: 6/21/2002 From: West Point Utah USA Status: offline	RE: Round corners CSS/image generator - 5/11/2006 14:43:49 That's a very nice look Roger. _____________________________ Duane Some people are like Slinkies . . . Not really good for anything . . . . . But they still bring a smile to your face when you push them down a flight of stairs. (in reply to rdouglass)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/11/2006 14:54:45 I've used this one before but you can't specify radius which meant that the corners sometimes looked a bit odd. There's also http://www.redmelon.net/tstme/4corners/ if you need an explanation of how it works. Nice find SH. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to BeTheBall)


d a v e Posts: 4179 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Round corners CSS/image generator - 5/11/2006 15:25:37 great find! was just thinking of using rounded corners for a site... :) _____________________________ David Prescott Gekko web design (in reply to jaybee)

jaybee

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

RE: Round corners CSS/image generator - 5/11/2006 15:46:28

Just a quick warning, I tried the box generator and it does a good job but if you're trying to bolt a rounded box into an existing page, then you need to do a tweak to the css it gives you.

Change the body tag to the div name otherwise the style will override what you already have

So change

 * Auto generated code
 * Details @ http://tools.sitepoint.com/spanky/
 * @version 1.1b
 */

body {
  background-color:

 * Auto generated code
 * Details @ http://tools.sitepoint.com/spanky/
 * @version 1.1b
 */

div.rounded {
  background-color: #

_____________________________

If it ain't broke..... fix it until it is.

GAWDS
Now where did I put that Doctype?

(in reply to d a v e)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/11/2006 15:57:50 And there's another possible problem, you have to use a header which is fine if you want it as a text box but not if you want it as a blurb box elsewhere on your page. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/11/2006 16:07:41 Ummm and finally, because they're applying the rounded corners to the heading, if a visitor increases or decreases their font size, the box breaks. Darn and that looked so promising. Use it to generate but be aware you need to check it carefully and tweak bits. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)


womble Posts: 5702 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: Round corners CSS/image generator - 5/11/2006 16:14:12 Nice find SH! _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to jaybee)


Starhugger Posts: 534 Joined: 4/12/2005 Status: offline	RE: Round corners CSS/image generator - 5/11/2006 16:18:11 You're right Jaybee. I'm getting some weird glitches when I view their page. Using IE, if I have the Favorites sidebar on, it seems to mess with the width of the box. And depending on what browser font size I use (smallest to largest), I don't get a break in the box, as such, but I do get a weird strip of the box's colour going down the right hand side of the left column boxes (if that makes sense). The strip has hard corners, so it ruins the effect. And sometimes I get some weird horizontal lines going out from the rounded corners. It probably works best if you hardcode the heading font sizes, but it might get messed up in FF anyway. Thanks for putting it through its paces. Starhugger (in reply to jaybee)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/11/2006 18:01:19 I've used a different one on this page, scroll down, it's orange and you can't miss it. The advantage of it is no graphics involved. I've had to play around with settings because of the IE box model error and I don't like using hacks. It breaks in FF at increased text size, but it seems to work OK in IE. In FF you can grab the code and the stylesheet if you want or I can let you have it. Otherwise, try playing with one of the ones I mentioned above. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Starhugger)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/11/2006 18:08:22 quote: ORIGINAL: Starhugger And sometimes I get some weird horizontal lines going out from the rounded corners. Starhugger That's down to the IE box model error. Basically IE can't add up. if you just have a box it's fine but as soon as you specify padding and width it just can't cope and gets it wrong. The other browsers get it right so if you tweak the settings for IE they look wrong. There are two ways round it. Insert a hack for IE into your css but I don't like using hacks unless absolutely necessary so what I've done in this case is inserted an inner div and applied a margin to it. I really need to spend some more time with it to work out a fix for larger text but it'll have to wait. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Starhugger)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/11/2006 18:25:00 http://tutorials.alsacreations.com/cadre/ the second version halfway down seems to work at all sizes in all browsers. My problem with it though is that he's using a definition list to do it so it's not really practical for a whole page just maybe news items. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)


Starhugger Posts: 534 Joined: 4/12/2005 Status: offline	RE: Round corners CSS/image generator - 5/11/2006 18:45:27 Thanks Jaybee. Sorry to say this but I'm also getting those weird lines on the bottom curves of your block. I get them when I set IE6 to the largest or smallest font size. IE quirks are hard to work around, it seems. Just thought you might want to know...or not. SH (in reply to jaybee)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/11/2006 18:56:42 I'm not surprised. I put it on there as a test and it's like most of them, fine in one thing and not others. Strangely I only get the lines in IE at the smallest. Largest it's fine. WOnder if you have a different font set up to me. If you check that one above though that uses the Def lists you should find that renders in all of them at all sizes. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Starhugger)


Tailslide Posts: 6296 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Round corners CSS/image generator - 5/12/2006 2:44:28 I've never had much luck with those rounded corner generator things. Only way I've ever found is to attach each different corner to some tangible part of the markup (heading or span or whatever). IE also has rounding issues (it can't add up properly) which is probably why you get the lines showing under the curve - it isn't calculating the size of the box properly. _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to jaybee)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/12/2006 6:38:21 This method seems to work in everything except IE5. The only problem I've found is with the floated boxes but that's down to IEs rendering of floats. They still work but because of the way he's laid them out the text wrap goes funny. Not a major problem as it's unlikely you'll want two floated divs so close together with text wrap. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Tailslide)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/12/2006 8:33:07 Ok I implemented the method above. It's quite a bit more fiddly than the others but once you have one sorted, the rest should be fine. you need to set yourself up 4 corner graphics 14x14. I used it for the box on this page again so all comments above about it are now superceded. Try it out. The only break I've managed is in Firefox at HUGE text size and even then it's just a very thin line at the top. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)


Tailslide Posts: 6296 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Round corners CSS/image generator - 5/12/2006 8:44:48 It's breaking on the second text-size increase in FF for me Jaybee. Anyone tried this yet: http://www.spiffycorners.com/? _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to jaybee)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/12/2006 9:08:39 Yes, sorry, still playing and I think I know why but real work beckons so it'll have to wait. Not tried that one but the other thing I have to check out which looks very good is NiftyCorners which uses js but seems to be valid html. There's a download with all his samples in. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Tailslide)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/12/2006 9:12:42 Oh rats! I shouldn't have looked, now I'll have to check out spiffy as well. Work can wait. [edit] Right, he's using <b> tags to set it all up which is a problem and it's fine as long as all you put in it is text. As soon as you try and put a paragraph in, it breaks. I need to spend time playing with it. < Message edited by jaybee -- 5/12/2006 9:21:39 > _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to jaybee)


rdouglass Posts: 9280 From: Biddeford, ME USA Status: offline	RE: Round corners CSS/image generator - 5/12/2006 9:17:46 To be honest I've never found a generator of anything to put out the code I really wanted to use. And really folks, I haven't been doing CSS for all that long at all and to me, this code is not a complicated thing: .bl { position: absolute; background: #3399CC url(images/bl.gif) 0 100% no-repeat; top: 0px; } .br { background: url(images/br.gif) 100% 100% no-repeat; } .tl { background: url(images/tl.gif) 0 0 no-repeat; } .tr { background: url(images/tr.gif) 100% 0 no-repeat; padding: 0px; top: 0px; } and this: <div class="bl"><div class="br"><div class="tl"><div class="tr"> Content Here </div></div></div></div> and works quite well for me. I really don't see why I'd need a generator for that. _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to Tailslide)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/12/2006 9:24:02 It's the holy grail of press a button, have your graphics generated for you, all the code generated and then find it doesn't break in any browser at any text size. or.... not having any images at all, just all done with css. < Message edited by jaybee -- 5/12/2006 9:40:35 > _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to rdouglass)


rdouglass Posts: 9280 From: Biddeford, ME USA Status: offline	RE: Round corners CSS/image generator - 5/12/2006 9:55:59 quote: It's the holy grail of press a button, have your graphics generated for you, all the code generated and then find it doesn't break in any browser at any text size. Isn't that what all us coders want? Some one/thing to do the work for us and have it bullet proof. I guess that is why we still are employed; 'cause those generators haven't been perfected yet. It's either that or it's because Word still makes a crappy web page. _____________________________ Don't take you're eye off your final destination. ASP Checkbox Function Tutorial. (in reply to jaybee)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/12/2006 11:00:33 What I really want is the imageless rounded box. Tried out both of the options above, nifty and spiffy and they're not as nifty or spiffy as they think. As soon as you start putting padding in they all go nuts in IE. Ahhh well. One day maybe. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to rdouglass)


Starhugger Posts: 534 Joined: 4/12/2005 Status: offline	RE: Round corners CSS/image generator - 5/12/2006 11:10:54 The "nifty corners" solution also messes up at the "larger" and "largest" font sizes in IE6. Just like the sitepoint solution, I get a squared rectangle stripe jutting out from the right-hand side of the box. Guess we'll have to keep looking for the Da Vinci "code" to find the Holy Grail of rounded corners. Starhugger (in reply to jaybee)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/12/2006 11:23:44 Do you know I've gone right off you. Do you know how many hours I've spent playing when I should have been working???? Use Roger's box. It works, doesn't break as it stands. It depends on the rest of your css as to whether you'll have problems. Padding will be the culprit though so look there first. I'm off to put my page back. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Starhugger)


Starhugger Posts: 534 Joined: 4/12/2005 Status: offline	RE: Round corners CSS/image generator - 5/12/2006 11:33:32 quote: ORIGINAL: jaybee Do you know I've gone right off you. Do you know how many hours I've spent playing when I should have been working???? Use Roger's box. It works, doesn't break as it stands. It depends on the rest of your css as to whether you'll have problems. Padding will be the culprit though so look there first. I'm off to put my page back. Um, for whatever it's worth, I'm not seeing those lines or stripes on the box on your page now. I was referring to the Nifty Corners example page about the font resizing problems. Thanks for taking the time, Jaybee. Starhugger (in reply to jaybee)


jaybee Posts: 14191 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Round corners CSS/image generator - 5/12/2006 11:36:40 I put it back to what worked before which is basically what Roger uses. Like I say though you need to be careful if you use that as to where your padding goes. I use another inner box with a margin to push it all into place but other things will work, depends on the rest of your page. I was joking. I don't Reeeelly hate you. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Starhugger)