SitePoint.com

AlexW · Apr 13, 2006, 02:04

Hi Guys,

If you got the April Design View you might have seen the new CSS rounded corners tutorial I ran -- known affectionately as 'Spanky Corners' -- and the link to the Automatic Code Generator that we're working on to make it simple to implement the technique.

It's definitely a work in progress, and has problems in IE at larger corner radius' but should still be fun to play with as we work to finish it.

Have a play and see what you think.

**Sarah** · Apr 13, 2006, 05:07

wow haven't read the design view yet - still in my inbox though - but this looks good - will take a peek now!!

Manna · Apr 13, 2006, 10:07

I am so new at positioning with CSS - only used it for one site so far. I tried the generator and it did not work for me. My page was already set up in a similar format ( div-h1-p) so I changed the div.rounded to div.center (what I already had). I only wanted the top corners rounded so I only put in the code section dealing with the tops. Had no rounded result but it did change my existing formating. Did I need to add another div to my html instead of integrating them together? I guess I will wait a few days and try again.

Dot

iTechno · Apr 13, 2006, 10:23

Very nice... the corners... there so spanky :d.

AlexW · Apr 13, 2006, 16:02

Quote:

Originally Posted by Manna

I am so new at positioning with CSS - only used it for one site so far. I tried the generator and it did not work for me. My page was already set up in a similar format ( div-h1-p) so I changed the div.rounded to div.center (what I already had). I only wanted the top corners rounded so I only put in the code section dealing with the tops. Had no rounded result but it did change my existing formating. Did I need to add another div to my html instead of integrating them together? I guess I will wait a few days and try again.

Dot

Sorry, Dot. The explanation of how to use the generator isn't particularly in-depth if your newish to CSS layout. Are you right-clicking and saving the four images to a local folder that also contains the CSS and the HTML file?

asp_funda · Apr 14, 2006, 06:06

Quote:

Originally Posted by Sarah

wow haven't read the design view yet - still in my inbox though - but this looks good - will take a peek now!!

yeah, its indeed good, a must checkout!!

cindypsych · Apr 14, 2006, 15:42

I'm seeing some less-than-fantasticness on the upper left-hand corner when looking at the generator page in IE 6 at 1440 x 900 (widescreen laptop). The image seems to jut above the top line of the box by a pixel or two instead of rounding off smoothly the way it does on the other 3 corners. It looks ok in Firefox.
- CindyPsych

AlexW · Apr 15, 2006, 02:39

Update: 15 April, 2006: Updated the way the images are generated and the code algorithms. Should work reliably in IE6-IE7 on most settings -- with the exception of very large or very small curves. However manual tinkering with the code should get virtually any setting to work.

Be aware that if you're seeing slight rendering issues it's probably because you're viewing cached versions of your corner images -- try a couple of variations on a color to see if this is the problem.

james_lee · Apr 15, 2006, 05:00

its a bit messed up in both IE and FF.

or maybe its just me?

Dark Tranquility · Apr 16, 2006, 06:37

Nice! this is very useful! I really like it

kyds3k · Apr 18, 2006, 14:13

i'm trying to create a SpankyBox (you like the designation?), but the thing is, I don't need any headers in it - it's just going to contain an image. what do you suggest i do? i've tried various combinations of blank h6 tags and paragraph tags, with no joy . . .

-ad

AlexW · Apr 18, 2006, 17:58

SpankyBox - I like

Certainly wouldn't add empty tags. The whole point is to make the document make sense.

It's really set up to have some kind of heading at the top -- you could apply the h4 style to the IMG tag and set it to 'display:block', but without knowing a consistent height for the image, it's going to be very hard to position the top left corner.

I think it will be easier to just add a heading - 'Your Image'.

montymaverick · May 31, 2006, 04:19

Hi Guys,

I just want to have a rounded content layer (a colored frame).

Is there some way to center this layer?

Something like this (it is made with a table, though):

http://www.shirttrek.com/

Can someone help?

Thanks,

Monty

schrade · Sep 25, 2006, 14:58

Hey Alex,

Not sure if you are monitoring this thread any longer... but I have a couple of questions/needs.

1) I would like to use this approach to do navigation tabs. Is there a clear version of the technique wittled down for just that purpose? I would need a "current tab" one color, and a "default" tab for all others that weren't current.

2) Requirements handed to me include a solid line bordered effect on the "current" tab, which would seem to be a perfect candidate for the bordered box effect that you hinted at for Spanky v2.

I am working on a subset of your technique for the tabs myself already, but would prefer to get it right than live with the hack I would end up creating in trying to extract relevant portions from your examples.

Thanks in advance -- even if this effort has been mothballed, I am still learning from it.

Apr 13, 2006, 02:04	#1
AlexW Team SitePoint Join Date: Apr 2000 Location: Melbourne Posts: 1,004	New Tool from SitePoint: Spanky Corners Hi Guys, If you got the April Design View you might have seen the new CSS rounded corners tutorial I ran -- known affectionately as 'Spanky Corners' -- and the link to the Automatic Code Generator that we're working on to make it simple to implement the technique. It's definitely a work in progress, and has problems in IE at larger corner radius' but should still be fun to play with as we work to finish it. Have a play and see what you think.

Apr 13, 2006, 10:07	#3
Manna SitePoint Addict Join Date: Apr 2006 Location: Vancouver, WA Posts: 302	Rounded Corners I am so new at positioning with CSS - only used it for one site so far. I tried the generator and it did not work for me. My page was already set up in a similar format ( div-h1-p) so I changed the div.rounded to div.center (what I already had). I only wanted the top corners rounded so I only put in the code section dealing with the tops. Had no rounded result but it did change my existing formating. Did I need to add another div to my html instead of integrating them together? I guess I will wait a few days and try again. Dot

Apr 14, 2006, 15:42	#7
cindypsych SitePoint Member Join Date: Mar 2006 Posts: 4	Upper left-hand corner? I'm seeing some less-than-fantasticness on the upper left-hand corner when looking at the generator page in IE 6 at 1440 x 900 (widescreen laptop). The image seems to jut above the top line of the box by a pixel or two instead of rounding off smoothly the way it does on the other 3 corners. It looks ok in Firefox. - CindyPsych

Apr 18, 2006, 14:13	#11
kyds3k SitePoint Member Join Date: Apr 2006 Posts: 3	no header content? i'm trying to create a SpankyBox (you like the designation?), but the thing is, I don't need any headers in it - it's just going to contain an image. what do you suggest i do? i've tried various combinations of blank h6 tags and paragraph tags, with no joy . . . -ad

May 31, 2006, 04:19	#13
montymaverick SitePoint Member Join Date: May 2006 Posts: 1	Spanky as Content Layer Hi Guys, I just want to have a rounded content layer (a colored frame). Is there some way to center this layer? Something like this (it is made with a table, though): http://www.shirttrek.com/ Can someone help? Thanks, Monty

Apr 13, 2006, 05:07	#2
Sarah blonde.... Join Date: Jul 2001 Location: Berkshire, UK Posts: 9,551	wow haven't read the design view yet - still in my inbox though - but this looks good - will take a peek now!!

Apr 13, 2006, 10:23	#4
iTechno The I's for intelligent Join Date: Jan 2006 Location: Yorkshire, UK Posts: 1,909	Very nice... the corners... there so spanky :d.

Apr 15, 2006, 02:39	#8
AlexW Team SitePoint Join Date: Apr 2000 Location: Melbourne Posts: 1,004	Update: 15 April, 2006: Updated the way the images are generated and the code algorithms. Should work reliably in IE6-IE7 on most settings -- with the exception of very large or very small curves. However manual tinkering with the code should get virtually any setting to work. Be aware that if you're seeing slight rendering issues it's probably because you're viewing cached versions of your corner images -- try a couple of variations on a color to see if this is the problem.

Apr 15, 2006, 05:00	#9
james_lee SitePoint Zealot Join Date: Jan 2006 Posts: 125	its a bit messed up in both IE and FF. or maybe its just me?

Apr 16, 2006, 06:37	#10
Dark Tranquility The Mind's I ® Join Date: Sep 2003 Location: Mediterranean (TN-FR-IT-ML-MR) Posts: 8,734	Nice! this is very useful! I really like it

Apr 18, 2006, 17:58	#12
AlexW Team SitePoint Join Date: Apr 2000 Location: Melbourne Posts: 1,004	SpankyBox - I like Certainly wouldn't add empty tags. The whole point is to make the document make sense. It's really set up to have some kind of heading at the top -- you could apply the h4 style to the IMG tag and set it to 'display:block', but without knowing a consistent height for the image, it's going to be very hard to position the top left corner. I think it will be easier to just add a heading - 'Your Image'.

Sep 25, 2006, 14:58	#14
schrade SitePoint Member Join Date: Sep 2006 Posts: 1	Hey Alex, Not sure if you are monitoring this thread any longer... but I have a couple of questions/needs. 1) I would like to use this approach to do navigation tabs. Is there a clear version of the technique wittled down for just that purpose? I would need a "current tab" one color, and a "default" tab for all others that weren't current. 2) Requirements handed to me include a solid line bordered effect on the "current" tab, which would seem to be a perfect candidate for the bordered box effect that you hinted at for Spanky v2. I am working on a subset of your technique for the tabs myself already, but would prefer to get it right than live with the hack I would end up creating in trying to extract relevant portions from your examples. Thanks in advance -- even if this effort has been mothballed, I am still learning from it.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode