Round corners CSS/image generator (Full Version)

All Forums >> [Community] >> OutFront Discoveries



Message

Starhugger -> 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 [:D] 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 -> RE: Round corners CSS/image generator (5/11/2006 13:00:47)

funky!



rdouglass -> 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.



BeTheBall -> RE: Round corners CSS/image generator (5/11/2006 14:43:49)

That's a very nice look Roger.



jaybee -> 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. [:D]



d a v e -> RE: Round corners CSS/image generator (5/11/2006 15:25:37)

great find! was just thinking of using rounded corners for a site... :)



jaybee -> 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:


to 

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

div.rounded {
  background-color: #



jaybee -> 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.



jaybee -> 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.



womble -> RE: Round corners CSS/image generator (5/11/2006 16:14:12)

Nice find SH! [:)]



Starhugger -> 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



jaybee -> 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.



jaybee -> 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.



jaybee -> 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.



Starhugger -> 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



jaybee -> 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.



Tailslide -> 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.



jaybee -> 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.



jaybee -> 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.



Tailslide -> 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/?



jaybee -> 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.



jaybee -> 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.



rdouglass -> 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. [8|]



jaybee -> 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. [:D]

or.... not having any images at all, just all done with css.



rdouglass -> 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. [:D]



jaybee -> 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. [&o]



Starhugger -> 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. [:D]

Starhugger



jaybee -> 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???? [&o]

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.



Starhugger -> 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???? [&o]

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



jaybee -> 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. [:D]
I don't Reeeelly hate you. [8D]



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875