digg

Join DiggAbout

The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.

Ultimate Imageless Rounded Corners with Anti-Aliasing

curvycorners.net — There are a lot of rounded corners scripts out there, but none of them really achieve image quality corners with borders. This script not only has full anti-aliasing but also supports background images which can then layer other background images and still AA. I don’t know of one other script that can do that.

show profanity settings
expand all
  • camsoft2000, on 10/12/2007, -35/+26What do you guys think of this script?
    • phpirate, on 10/12/2007, -3/+18It looks good, but its not a solution for people who don't have JS.
    • gatorsrule21, on 10/12/2007, -7/+11Does it validate? CSS Validation doesn't work because the HTML doesn't validate...
    • camsoft2000, on 10/12/2007, -8/+8It should validate, the validation errors are only to do with the site design.
    • camsoft2000, on 10/12/2007, -5/+17The script degrades nicely. If JavaScript is turned off or if the user is using a ancient browser (very ancient!) then the boxes will become square while still preserving the borders and background styles.

      Images have the same problem, what is the user has images turned off. I actually think it would look better sqaure then missing corners images?
    • panique, on 10/12/2007, -6/+31Ok, you asked. I can't download it since your site is completely overloaded, so I can't know for sure, but I'd hazard a guess that your script, which you found necessary to provide a compressed version of, is probably 10 times as large as any image file I might use to give the "curvy corner" effect on any of my webpages. Combine that with the requisite client-side processing, and I'd say using an image is a much better solution for my users as they will actually get to see it sooner than they would using your script.

      I might also point out that you chose not to use your script on your own site, which IMO speaks volumes about how you feel about it.

      Sorry if I'm brutally honest. You did ask. =) Have a nice day.
    • MattL920, on 10/12/2007, -57/+9(in reference to the first reply to the parent comment) maybe this isn't standards-compliant but if you're not using javascript and you want fancy looking web pages, tough. I can understand making sure a feature degrades to something readable if you're using a terminal browser, but if you turn off javascript you won't get the same experience as if you had it on, period.
    • brentzilla, on 10/12/2007, -8/+21MattL920: Wow do you have a lot to learn about the web. Please refer to http://www.csszengarden.com and note that NONE of those sites use JavaScript. Prepare to be modded down. Do not make comments like that when you don't know what you are talking about.
    • spdorsey, on 10/12/2007, -1/+7Honestly, I applaud the hard work, but I don;t think I'll use it because it involves JS and because the script is HUGE. I'd hate to make the client download that every time they view the site.

      Also, I'm personally not a fan of borders, so I probably wouldn't use it anyway, I'd use spiffycorners which is a bit tag heavy, but infinitely smaller than this solution.

      Your solution here will get used, and I hoep it does. It seems to work. But I don't see much use for it on my sites.
    • camsoft2000, on 10/12/2007, -10/+16Huge is a relative term, 20K we are talking, you only load it once for the entire site experience, and if it cached it even better.

      Its not hard to get over 20K of images to create the same effect.
      It would load in an instant on most internet connections, and its one file, not lots of images.
    • DanAtkinson, on 10/12/2007, -12/+9MattL920: Dear God, I seriously hope you're not a web designer for a living. You sound like you have no clue whatsoever. I'm guessing that you spend your time wrapped up in Dreamweaver and spacer gifs.

      I can only pray that you just pack groceries for a living and are here for a laugh.

      camsoft2000: Huge IS relative, you're right. But compared to 'tiny' scripts like jQuery, yours is a little too much for my liking. Excellent work though!

      Next week on Digg...

      'Ultimate Amazing rounded corners with no scripts whatsoever and completely CSS driven.'
    • cmw72, on 10/12/2007, -2/+17MattL92 is only a little misguided. Replace the word "fancy" with "interactive" and suddenly his point becomes valid.

      While I think javascript is overkill for rounded corners, one cannot deny in the age of AJAX that client-side scripting is here to stay.

      Disable javascript and go play with Digg Spy for a while. Not so much fun eh? One might even say it was a "different experience".
    • timdorr, on 10/12/2007, -4/+3All we need now is for an extension for CSS 3 to support AA rounded corners :P

      It's interesting how much debate this diggvertising is getting, though...
    • brentzilla, on 10/12/2007, -8/+0Too bad he didn't actually SAY interactive. He said fancy and he meant fancy. Shame.
    • quadvods, on 10/12/2007, -0/+14Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff....

      http://www.spiffycorners.com/

    • rasterbator, on 10/12/2007, -5/+1is this like building a better mousetrap? ;-)

      anyway, site is overloaded - i'll try to check it out tomorrow.
    • foobar5892, on 10/12/2007, -1/+3"The script degrades nicely. If JavaScript is turned off or if the user is using a ancient browser (very ancient!) then the boxes will become square while still preserving the borders and background styles."

      The real problem is not people using "ancient" browsers, but having JS turned off. If your site design relies on JS to work, then it's junk. I have a lot of JS blocked because some websites choose to lump their ad code with regular code within a single JS file.

      And finally, this solution isn't new at all. There are scripts that do the exact same thing in the hundreds at least. Also, there are a lot of solutions that don't require JS and are more elegant. Trading off a few bytes of bandwidth per visitor for images for accessibility is a better solution than using some obscure JS in the first place. JS has no place in the design of webpages (effects, etc. are a whole different matter).
    • panique, on 10/12/2007, -0/+1Huge is not an exaggeration. 20K is huge compared to around 300-500 bytes for an image. Any images of rounded corners will be cached as well, and will be rendered by a simple call to blast the bits onto the screen, rather than having to parse HTML to figure out that there is JavaScript to parse, then interpret.

      And for that all-important first time visit to a website, where you've basically go 6 seconds to get your page up and rendered (before the visitor clicks away), none of the files are cached. With nearly half of all people on dialup and sub-standard "broadband", load time is still an important design consideration.
  • film42, on 10/12/2007, -22/+2Its good, but no demo!
  • srg13, on 10/12/2007, -4/+5Thats awesome! I tried it in Firefox, Opera and IE7, and it worked perfectly. Does it work with IE6?

    Great stuff
    • camsoft2000, on 10/12/2007, -4/+7Yes, it works perfectly in IE6
    • Enitime, on 10/12/2007, -2/+3And it works for text-resizing, something most of these things don't.
    • camsoft2000, on 10/12/2007, -3/+5Yes it will handle fluid layouts. You don’t even have to specify height or width.
    • ragipy, on 10/12/2007, -1/+2works in IE7 beta too
  • Bara, on 10/12/2007, -10/+4Hmm... might be the solution I've been looking for... but I dont like Javascript too much

    Bara out
  • stoanhart, on 10/12/2007, -6/+4Very nice. Bookmarked for future use. Thanks a million!
  • jabab, on 10/12/2007, -2/+9I prefer http://www.spiffycorners.com/ , it might be tag soup, but there's no javascript or images, and the corners look good.
  • jo42, on 10/12/2007, -5/+1...and it's dying under the load...
  • therernospoons, on 10/12/2007, -5/+1would be nice if I could download it =(
  • fudgebrown, on 10/12/2007, -3/+5How many round-corner tutorials are there? Appears to be limitless, at least on digg.
    • Bara, on 10/12/2007, -1/+5Well seeing as how there hasnt been a "perfect" solution yet, then the more the merrier!

      Bara out
  • Flinty, on 10/12/2007, -3/+1dead....

    http://66.102.9.104/search?q=cache:YMrnzJDPX9YJ:curvycorners.net/ &hl=en&ct=clnk&cd=1&client=opera
  • jrooks, on 10/12/2007, -4/+2That's freakin sweet!...
  • TubaTechno, on 10/12/2007, -4/+1No mirror? Site is down.
    • BlueLaser, on 10/12/2007, -6/+1Confirmed from here in Texas, too. And probably not a "network problem" like digg faced this morning... :)
    • crawf061, on 10/12/2007, -3/+1the digg effect makes me laugh
  • flap, on 10/12/2007, -4/+1Damn!

    I was just clicking for the download and the server seems to have exploded.
  • David01, on 10/12/2007, -47/+2http://www.thehotfix.net/indexre.htm?david01
    • ApeWare, on 10/12/2007, -4/+6WHY?

      What does it have to do with this story?
    • TubaTechno, on 10/12/2007, -0/+11Please no one click his link....he's just spamming. Don't give him the please of the traffic increase.....unless of course he pays for extra bandwith thats over his limit.....
    • webcrumb, on 10/12/2007, -0/+2Hooray! The third person to deserve a nice blocking.
  • klevo, on 10/12/2007, -5/+1Oh no, the site is down :(
  • spxiii, on 10/12/2007, -0/+3I've used "Nifty Corners Cube" in the past because it's GPL. Anyone know the details on the curveyCorners license? The page is struggling to load and all I can find is the word "free".

    Also, if anyone knows why people come up with the worst names for these tools I would be interested in knowing. I guess it's just because they are so nifty, spiffy, and curvy!
    • onerob, on 10/12/2007, -0/+3It's LGPL - open source. You can use it as much as you like in whatever way you want.
    • bieber, on 10/12/2007, -0/+1Umm...have you _read_ the LGPL?

      Reciprocity requirement, anyone?
  • knaps, on 10/12/2007, -0/+2I've been using curvycorners for about a month now, and I have to say that I'm really impressed with it. It's really flexible, makes your markup super light (I hate having all those nested divs), and looks great. The only downside I have with it is that the first time someone loads your page, it takes a second or so to apply the corners. For those without javascript, your divs just look like a square-edged box, but otherwise the same.
  • zeeneo, on 10/12/2007, -7/+7does it really deserve its own domain name?!
    • kweee, on 10/12/2007, -1/+19No, it deserves its own TOP-LEVEL domain. .com, .net, .org, and .curvycorners
    • BlueLaser, on 10/12/2007, -0/+11why not? it'll be easier to find in the future instead of trying to remember some guys personal home page URL...
    • djdole, on 10/12/2007, -0/+4If the guy wants to doll out the cash to purchase the domain and to maintain the site, then why not?
      It's not like there is one guy out on the Internet handing out domains to only those WORTHY enough. :-\

      Besides, it's killing two (actually WAY more than two) birds with one stone; product delivery site, proof of concept and ease of use, scalability, a nice clean page for his resume, as well as giving generous people a opportunity to donate to his cause (via PayPal).
  • xutopia, on 10/12/2007, -3/+1Another site explaining the technique:

    http://www.html.it/articoli/nifty/index.html
  • camsoft2000, on 10/12/2007, -0/+3Mirror available here:
    http://rooney.ath.cx/curvycorners_net/
  • samdu, on 10/12/2007, -2/+3Are rounded corners really so big a thing that they make it to the front page of digg almost daily? I mean they're neat and all, but they're not all that. At least in my opinion.
    • ApeWare, on 10/12/2007, -2/+1It is just a matter of coming up with the most graceful way to do it. But no, I agree it is not a top digg every day.
  • bieber, on 10/12/2007, -1/+6Wonder how much longer his server would have held out if the site hadn't been so heavy with graphics...
  • rspeed, on 10/12/2007, -0/+5Sorry, but the ultimate rounded corners is to NOT have a script at all.

    Web browsers need to add support for CSS3 border-image ASAP. Safari has it (at least the WebKit nightly builds do) and I'd bet Opera does as well.

    Hopefully in a year or two scripts like this won't be necessary.
    • camsoft2000, on 10/12/2007, -0/+5Yes, I agree but they browsers don’t support it yet. This is here to fill a gap till ALL browsers support CSS border-radius.
    • bieber, on 10/12/2007, -0/+4Very true, but I'm expecting at least five years before a really good majority (like 90% or more) of people will be using CSS3 compliant browsers. In the meantime, there _are_ ways to do fluid rounded corners in CSS2, they're just a pain in the ass, so I usually find myself going with fixed width layouts...
  • kirkio, on 10/12/2007, -0/+4duggmirror:
    http://www.duggmirror.com/design/Ultimate_Imageless_Rounded_Corners_with_Anti-Aliasing_/
  • camsoft2000, on 10/12/2007, -1/+2Both demos show the DIVs floating on a graphical background (grass) and have per-pixel anti-alising.
    I dont know of any easy way to create this effect any other way.
  • kordless, on 10/12/2007, -0/+2Cameron, what on earth did you do to the formatting of your JS? I'm trying to dig through the code and it's pretty hideous in there! I could clean it up if you want.... If the rest of you are tired of waiting on his server, use http://www.geekceo.com/rounded_corners_lite.inc.js instead to see the original script.
    • camsoft2000, on 10/12/2007, -0/+3Hi, there are two versions in the download version. One completely formatted with comments and the lite version used in the examples.
  • in4mation, on 10/12/2007, -0/+2thumbs up ....uuhhh i mean dugg for ease of use. I just closed my eyes at the javascript file and played around in the html file.
  • seattle98104, on 10/12/2007, -0/+5errors:
    http://img437.imageshack.us/img437/2263/errors2gf.jpg
    • seattle98104, on 10/12/2007, -0/+3in other words if it doesn't work 100% all the time it can't be ULTIMATE.
    • camsoft2000, on 10/12/2007, -4/+2I've not seen this error before. I do constantly update it. Give me some credit.
  • djdole, on 10/12/2007, -0/+3What sucks about posting sites like this on Digg is that when the page loads slow you can't really tell if it's due to inefficient examples on the page, or server overload. :-\
    • Mac2492, on 10/12/2007, -0/+3I just bookmark them and view them later.
  • gfors, on 10/12/2007, -0/+2wow, as incredible a feat this is,i digg, but ill pass... mainly because of a bunch of small things that bug me about the implementation (browser specific js, excessive doc writes)... there is a sweet implementation of graphical/css rounded corners here http://www.hyatt.com/hyatt/features/camp/camp-hyatt-splash-central.jsp

    check the single gif that is used for all the diff boxes http://www.hyatt.com/hyatt/images/bg_corners.gif


    • eleven, on 10/12/2007, -0/+3That is a great use of the CSS sprite technique. I have used it for buttons and rollovers in the past, but it makes perfect sense for rounded corners too!
    • chadu, on 10/12/2007, -0/+1that is a great use of sprites... the server admin needs to turn off that white space on the jsp parsing though. hate that stuff!
  • eleven, on 10/12/2007, -0/+2Have to say this is one of the more elegent solutions - even if it is javascript. Not a fan of the other "tag soup" methods. Though I tend to use images when I need it to work all the time - I end up with a few more tags than I would prefer though.
  • natmaster, on 10/12/2007, -0/+2Firefox 3 currently supports anti-aliasing with the native CSS rounded-borders attributes.
  • GlassCasket, on 10/12/2007, -2/+1Very nice work.

    Once I get some time, I'll play arround with ti a bit.

    +Digg.
  • EntropyMan, on 10/12/2007, -1/+2It says "Error." I like how nicely the letters are rounded.
  • camsoft2000, on 10/12/2007, -2/+0SIte is back up for the moment!
  • washoetech, on 10/12/2007, -0/+2If spiffycorners is so good then why cant you change the size of the rounded corners? Quit crying everyone......It makes you look bad!!!
  • GrinningFool, on 10/12/2007, -0/+2Not bad, but a) HUGE and b) maybe it's just me, but trying to use a page generated with this makes my firefox CPU usage shoot way up there.
  • camsoft2000, on 10/12/2007, -0/+2Direct download: http://www.curvycorners.net/download.php?file=curvyCorners-v1-2-9-beta.zip
  • Majdaa, on 10/12/2007, -0/+8are you kidding me? get the web dev toolbar and see what html it generates, this is nuts

    Here's a copy:
    http://pastebin.com/754249

    absolutely insane, just get 4 nested divs with images...wtf is the problem with images?
    • tanker, on 10/12/2007, -0/+1wow. that's intense
    • Cameleopard, on 10/12/2007, -0/+1Damn, I like its flexibility, but that is a staggering amount of extra code!
    • pbjorge12, on 10/12/2007, -0/+1Holy Schmidt!
  • camsoft2000, on 10/12/2007, -1/+3I have to admit this was originally just an idea and a proof of concept.

    I did not realize how popular this would be, so when people started downloading it
    I kept updating, yeah it is a bit bloated. I think people just need to try it in their web scenario, if it
    works well then use it, if not don’t use it.
    • scottschiller, on 10/12/2007, -0/+0Well-said. This is really cool from a programming perspective, it's a rather technical accomplishment! ;) However, the performance hit is quite significant, the script appears to wait for window.onload and thus has "flicker" as the elements are created, and finally, there are tons (hundreds, thousands?) of extra elements created. While very cool, I would not recommend this technique for use on large-scale sites or where performance is a concern.

      I tried something like this (though just adding absolutely-positioned images or whatever) a few years back, and I can't even recommend that technique - it still felt too slow when compared to raw CSS, and will probably always be.

      (Someone recently dugg a newer approach I'm using. It's CSS-only and therefore faster to render, but there is additional markup for each dialog.)

      http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/

      I look forward to the day (in 2010, perhaps?) when we don't have to do this much work to get rounded corners. Of course by that time, it'll be some other crazy effect people want that we'll have to hack. ;)
  • camsoft2000, on 10/12/2007, -1/+3Your right. Its an amazing amount of HTML. It needed to be to support all the features I wanted.
    I has become very complex and honestly required that many DIVs.
  • magicjj, on 10/12/2007, -0/+0This is nice but I don't see any problems with the old method.
  • SpookyET, on 10/12/2007, -1/+3GOD. I wrote a script that requires 8 images and a one liner javascript, and you can have any shape and borders you like. it generates 8 divs. This thing generates a 100 divs. I didn't count, but it was a ton. Using this will make your page slow as hell to load.
    • camsoft2000, on 10/12/2007, -1/+1Wow, I would love to see your script. You telling me that what I did in like 1090 lines of code you did in just one?
      You're a genius!
    • camsoft2000, on 10/12/2007, -1/+1Also the number of div depends on the size of the radiuses and the width of the border if any and will dramatically reduced the number of divs if you turn anti-aliasing off.
  • netbear, on 10/12/2007, -0/+3Well done. This is the 3ed or 4th rounded corners item I've seen on Digg. I never knew there was such demand!
  • markupmonkey, on 10/12/2007, -0/+0The rendered source of the div (not the content, not even the js) seems to weigh in at 80k. I like the look of the results, and I think JS for non-essential design extras is cool, but this seems to be a bit too expensive.
    • camsoft2000, on 10/12/2007, -0/+1I actually agree. I’m not a stupid coder who has absolutely no idea about web design. To be honest it’s a hobby, I tried to improve it but it just grew and grew, the mark-up is required to create the amazing effect.

      I think it’s will be useful to some people, who what to use it sparingly.
      Also I think the JavaScript will be useful for people wanting to learn JS.
  • ibbumpin, on 10/12/2007, -1/+1Man I'm running on a dual core system at work and it took IE 10 seconds to draw it and added 200 MB of RAM usage...of course Firefox does it in less than a second and uses no memory! Where's the IE memory consumption complaint forum when you need it :-P Cool idea. Not sure it would be a good thing to implement a lot though.
    • camsoft2000, on 10/12/2007, -0/+0Thats strange because I have a 3.2Ghz Athlon 64bit, and it loads in a second on my IE 6 and uses about 10MB of extra ram. I tried the first example.
    • ibbumpin, on 10/12/2007, -1/+1Yea I tried both and I noticed that my RAM jumped huge in IE 6...that's odd
    • ibbumpin, on 10/12/2007, -1/+1Yea I tried both and I noticed that my RAM jumped huge in IE...that's od

      I think it might have something to do with screen resolution. I'm at 1272x808 internal window display size
  • dkedinger, on 10/12/2007, -0/+1wow...want instant user testing...post on Digg. Then thousands of people will let you know right away if you program is good or bad. applauds for the concept camsoft for someone not concerned with sleek code it is great.
  • taylorhayward, on 10/12/2007, -0/+1Is slowing down your page using this script really worth the effect? Think about it.
  • ipearx, on 10/12/2007, -0/+1Square corners - that's what's hip
    • tybris, on 10/12/2007, -0/+3apparently you haven't tried triangular corners
  • tybris, on 10/12/2007, -0/+2Round corner link #317... Are digg webdevelopers so uncreative? Sure, I've used my fair share of round corners but I can't seem to recall ever having any problems implementing them and certainly not using a pre-made complex script for it.

    but really, the mere thought of doing operations like anti-aliasing in JavaScript is mind boggelingly evil. Decent client-side image manipulation will arrive when SVG becomes mainstream. Untill then you are better off doing it server-side.
  • Fetching more discussions...
    Show 51 - 52 of 52 discussions
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.