Mobile Friendly Website

CSSPLAY

Doing it with style

Krazy Korners COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

call me al:-
Hi Stu
Again you amaze and inspire.
supoib!
`
(06.04.2005, 23:38)

Chris Hester:-
Superb! How did you do the barrel one?!
(07.04.2005, 13:02)

Stu:-
Chris, the barrel was done using Macromedia Fireworks to draw a curve 100px wide x 5px high to give me the percentages for the 5 margin widths. This also produces the antialiasing color for the borders.
(07.04.2005, 15:51)

marq:-
great job!
(13.04.2005, 08:01)

Mark:-
Stu. Krazy Korners are great! Your entire site is cool too. How can you expand the width of the boxes?
(15.04.2005, 15:51)

Jim Kay:-
does not work in IE5.0 or IE5.5
(16.04.2005, 13:49)

Stu:-
Works now Jim ;O) (MY mistake BTW)
(16.04.2005, 14:44)

Stu:-
Mark, to expand the width just change the 40% value to whatever you want (fixed pixel or fluid ems or percentage).
(16.04.2005, 14:46)

Mark:-
Stu, thanks for the info on the width. It works well. Thanks again!
(18.04.2005, 14:27)

Big John:-
Why can't I think of stuff like this? Stu, have you tried a % width on these boxes? When I tried that, Gecko showed side 1px rounding errors at some window widths.
(19.04.2005, 22:26)

Stu:-
Hi Big John, I can't duplicate this error in FF.
http://www.stunicholls.myby.co.uk/boxes/krazy_percent.html
is a 50% wide box that looks ok at all window widths. But I suppose the error may be possible with rounding although the margins are still in pixels.
(19.04.2005, 23:13)

Stu:-
BTW thanks for the site link Big John, much appreciated.
(23.04.2005, 11:27)

Stefan Ledin:-
Great site! Very informative treatise on CSS! It has given me lots of ideas. Many thanks.
(25.04.2005, 00:08)

Aaron Jones:-
Where does Krazy Corners originate from? Does it not require a JS like Nifty Corners?
(25.04.2005, 21:28)

Stu:-
Krazy corners is just an extension of snazzy borders and like everything on this site it is pure CSS. NO javascript required. The style and html is in the page source code.
Nifty corners was the inspiration for me to add borders (nifty corners has since extended itself to borders but does require js).
(25.04.2005, 21:55)

Tracy:-
Hi,
I'm looking for a way to add this effect to a <li> menu.

At the moment I'm using a background image, but of course, when you increase the text size, the menu text is overlapping the background image.

Is there anyway, I can use your method instead of using this:
http://www.vandevelde.co.uk/images/button.gif (delete /images/button.gif in the address bar to see it in action!)

Cheers, T.
(09.05.2005, 01:56)

Stu:-
Tracy, it should be possible to produce something similar to your image, but not with a graduated shading. All that would be possible is three colors per line.
(09.05.2005, 08:10)

Robert:-
In regard to your Krazy corners, you take a relativly complacated use of css and make it simple. This demonstrates a true grasp of css. Thanks
(17.05.2005, 15:36)

jazzle:-
awesome.
simple as that.
no idea how i've missed your site till now.
(27.05.2005, 16:11)

Renee:-
Hi Stu, How would you get a more rounded rectangle than your snazzy corners or Krazy corners? Basically something with more of a curve to the edge. Been trying to figure this one out because I would like something with a deeper curve. Awesome stuff. A friend found your site listed on Webmasterworld.com
(02.06.2005, 22:13)

Stu:-
Have a look at the tutorial on webreference.com. To make the corners more rounded you will need more <b></b> tags top and bottom. Draw the curve you want in a paint package and then copy it using margins and borders.
(02.06.2005, 22:40)

jazzle:-
awesome.
simple as that.
no idea how i've missed your site till now.
(27.05.2005, 16:11)

Renee:-
Hi Stu! Thanks for the help on this. The paint program help out and I was able to visualize the curve. It made the margins and borders simple! YAY! I look forward to your next experiment. :)
(10.06.2005, 22:18)

Stu:-
Glad it worked out Renee.
(10.06.2005, 22:38)

Richard Brown:-
Hi Stu

Is it possible to float two boxes within one box and sit the two side by side.
See http://resource.cregy.net/ to see what I mean.

Thanks

Rich
(30.09.2005, 12:20)

Stu:-
Richard, it is possible to do this, but be careful that text default margins /padding does not create horizontal gaps in your borders.
(30.09.2005, 13:20)

Richard Brown:-
Hi Stu

I posted a request to css-d and they suggested a float. See http://resource.cregy.net for an example of how I have used the boxes.

Be good to hear wht you think? Is it set up to fail?

Rich
(30.09.2005, 14:55)

Stu:-
Richard, just stick another <br /> after the <br style="clear:both;"> this will make the background stretch to full height in IE. Firefox by the way gets it right already.
(30.09.2005, 15:51)

Richard Brown:-
Thanks Stu.
(30.09.2005, 17:25)

Sandy:-
Stu- Is it possible to have a Krazy Korner box fluid vertical? -- I'm getting a gap.
(10.11.2005, 21:10)

Stu:-
Sandy, Krazy Korners are fluid in both directions. The usual reason for a bottom gap is the margin or padding of the bottom line of text is pushing the bottom korners away. You may have noticed I have used 'p {padding-bottom:0.5em;}' in several of the examples for this reason.
(10.11.2005, 21:30)

Sandy:-
Thanks Stu !! - I knew it was something simple, and THANKS for all of your contribution.
(10.11.2005, 21:38)

Phil:-
First of all : Congratulations.
About Krazy corners everything is perfect until you decide to put a form in it.
In this case the "frame" is broken left and right after the "submit" button of the form.
Thanks for your great job, for me you are the CSS reference.
(19.12.2005, 00:12)

Stu:-
Phil, forms should not break krazy korners. Check your padding and margins to see if this is the problem.
(19.12.2005, 19:42)

Rick:-
Hi Phil. I'm using similar code but found that the overflow:hidden was hiding parts of my menus in firefox, but was needed for IE. Here is what I ended up with (the colors are defined in the domain-specific style sheet).
.rtop,.rbot{display:block;font-size:1px}
.r1,.r2,.r3,.r4,.r5{display:block;overflow:hidden;height:1px;font-size:1px}
html>body b.rtop b,html>body b.rbot b{overflow:visible}
.r1{margin:0 6px}
.r2{margin:0 4px}
.r3{margin:0 3px}
.r4{margin:0 2px}
.r5{margin:0 1px;height:2px}
(20.12.2005, 03:09)

Richard V:-
Hi Stu,

IE5 for Mac balks at krazy corners until you 'mac hack' overflow:hidden from the styles.

Phil:

I noticed this too in certain browsers.I am assuming you are using a css structure rather than a tabular structure for your forms? If so the simple solution to correct this is to encapsulate your submit buttin within the fieldset and then put a <br /> after the submit button.
(05.01.2006, 12:26)

Peerless:-
Woot for all your hard work stu, but here is my problem: I need to be able to put an inset box around a single word simply by setting, for example, <span class="inset">the word(s)</span>. Is there any way to do this, or is it impossible?

e-mail at admin [aâ ] enterwiki [d0â ] ws - thanks for all your cool examples!
(19.02.2006, 04:17)

anyulled:-
have you guys ever heard of nifty corners?
they're a great solution for rounde corners....
(24.02.2006, 13:31)

anyulled:-
hey !!! look what i did with oyur borders
www.cclt.org.ve

they're just great.
(24.02.2006, 14:50)

Stu:-
anyulled, my previous example refers to nifty corners. Howevr, they make heavy use of javascript and that is not what this site is about.
(27.02.2006, 10:15)

Lasse:-
Hi Stu

I wonder if it would be possible to make a 3D Raised box with Curved cutout Border? I have tried at bit, but my skills a far from yours. Would you have the time to make it for me, or maybe another kind person could?
Btw, this site is amazing, I'm using this for inspiration. Fantastic job and skills. Will put a link for cssplay when I finish my website.
(30.03.2006, 01:02)

luix:-
Tienes un EXELENTE sitio y e podido estudiar de el, muchas gracias por publicarlo no dejes de desarroyar, gracias. :)
(06.04.2006, 17:07)

Fergal O'Hanlon:-
Stu, do you have an example with rollover and link on the site? Great piece of code, Thanks Fergal.
(04.05.2006, 21:28)

Stu:-
Fergal, there is a 'snazzy' menu here www.cssplay.co.uk/menus/snazzymenu.html (and the 'NEXT' menu). Is this the sort of thing you were after?
(04.05.2006, 21:40)

Larson:-
These demos are awesome. I work on a county government site (in the middle of no where) so more than 98% of our users are on Windows IE. As I re-design and re-build the sites (from html3.2 to xhtml1.0), I do my best to make the sites work in other browsers using complete CSS layouts.

But that was before I found your site and most of your examples work in all the current browsers (sweet) and validates.

U rock!
(06.06.2006, 13:13)

Rainer:-
Hello Stu,

thanks a lot for your wonderful and inspiring pieces of art!

Unfortunately my css understanding wont serve to implement shaded boxes instead of rounded ones without using tables and pictures.

Seems to me the difference lies within the nessecity of using more than 3 colors (border-left, background, border-right) to implement smooth shades.

You'll find an example of what I'm trying to do with css under:

www.rogatzki.de/wwwtest/musterlayout2
uid: test
pwd: test

I'd be most thankful, if you could give me a clue how to do this with pure css.

Best regards
Rainer Rogatzki
(muelheim, germany)
(09.07.2006, 13:23)

Stacey:-
library.law.olemiss.edu/test/2column_4.php
KK works great in Firefox in all resolutions. I have it working in IE as long as it's above 800x600...any idea why it's slightly off in 800x600 for IE?
(04.10.2006, 21:29)

Stacey:-
Never mind...I had to define a percentage width for one of the interior divs within the rounded corners.
(04.10.2006, 21:45)

Steve:-
hi u have to write a book. man u rock the world simply.

ur diehard fan
(13.10.2006, 05:28)

Evil oatmeal:-
Your examples and experiments are endlessly amdirable! I have learned a lot just browsing through your codes. But this one seems like it is a bit too much effort for what it does. Of course I understand the point, just to prove that it is possible with pure CSS. But in my case I only need one corner, so I shall go with a tiny .gif instead.
(18.11.2006, 22:55)

Mc:-
Awesome site Stu!

I think there is a bug though. If you embedd a curver into a round or a round into a curved box that will not work properly becase the b elements are overiding...

Am I wrong. I tried that round into curved and I got curved always...
(26.02.2007, 20:14)

niko:-
Hey Stu. Krazy korners rocks, but when I put them in div which is float: right, they just dont seem ok. How can I fix that?
Greetings
(20.08.2007, 00:48)

Stu:-
niko, the float of a containing div should not affect these krazy korners.
(20.08.2007, 08:33)

niko:-
Yeah, I'm dumb. I fixed it;) thanks again for sharing
(21.08.2007, 14:15)

Michael:-
Stu:-
I read through the comments and saw that you stated that forms should not break the boxes. Sadly, mine do. (v3.csea.org) I've tried all kinds of width definitions, but to no avail. Any ideas what is going on there?

Keep up the great work!
(02.10.2007, 20:10)

Michael:-
Stu:-

Well, I figured out the problem of the form components overlapping... sort of... see, the area they are in had a width set to 125px, and the form components were much wider, so that part of the layout expanded. Simple thing... increase the width, right? Well, I'd rather not have that area that wide all of the time, so any suggestions would be appreciated.
(02.10.2007, 22:31)

soren:-
Just a little contribution/payback - with thanks:
rounded border, 1px
rounded border, 2px
rounded border, 4px
www.maarbjerg.info/KrazyKorners_x3.htm
(it's in the detail you find the pleasure)
(06.01.2008, 18:14)

JB:-
I've got the boxes working, but they don't come out too well when printing. Especially chamfer. The top and bottom borders are missing. I'm getting this with both FF (3.0.4) and IE (6).

Any suggestions?

P.S. Love the site, very helpful!!
(24.11.2008, 14:56)

The Sozzled One:-
Hi,

On the Krazy Corners example is there a reason for using the b tag rather than span? Just curious!

Thanks
(18.03.2010, 12:17)

Adam:-
Stu,

Is there a way to draw a border around the Pillar example in a different colour? I've got the left and right working fine, plus the curves, but am struggling with the top and bottom!

Thanks
(18.03.2010, 17:47)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page