What is Digg?Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
96 Comments
- CatfishJones, on 10/12/2007, -8/+40"CSS corners"? Oh, you mean the gif/png corners. Please. These aren't rounded "CSS corners" anymore than applying the same technique to tables makes them rounded "table corners". Call it CSS when you actually use CSS to round your corners, not images.
Marked inaccurate. The corners aren't being rounded "with CSS" but with images. - judgeFire, on 10/12/2007, -0/+21Rounded corners are so 1981:
http://www.folklore.org/StoryView.py?project=Macintosh&story=Round_Rects_Are_Everywhere.txt
J - inactive, on 10/12/2007, -0/+21my mom doesn't know it, my grandmother doesn't not it. heck, they don't eevn know wtf you're even talking about.
- chicken101, on 10/12/2007, -2/+14My mom will think I'm talking about naughty things if I mention nice rounded things. I think your imagination can do the rest.
- steger, on 10/12/2007, -1/+11a much cleaner rounded-corner box: http://www.modxcms.com/simple-rounded-corner-css-boxes.html
this is what i use. - alexandreracine, on 10/12/2007, -1/+10How about spiffy corners?
http://www.spiffycorners.com/
From the webpage : "Anti-aliased rounded corners using pure CSS. No Images. No Javascript. No fluff." - Moocat, on 10/12/2007, -0/+7I'd still go with javascript or images. Images are easiest on all and require no nasty tags and workarounds for multiple browser formats. Javascript is easy and quick but it's hard to get them "perfect" without causing multiple errors on different browsers. I vote we should just submit for a CSS3 corner: rounded 5px tag ;)
- jer.williams, on 10/12/2007, -1/+7I don't get it. The rounded corners are made using graphics.
http://www.schillmania.com/projects/dialog/ - icexe, on 10/12/2007, -1/+7let's say your boss came around and says we want our nav links to be on the right side of our pages instead of the left side. For a website with hundreds of pages, how easy would it be to do that with a table based layout? With divs and a linked style sheet you can do it in a couple of minutes.
- centinall, on 10/12/2007, -0/+6I think that he expects that when the title says "corners with CSS" that the link would have corners with CSS. I don't get it either.
- lancefisher, on 10/12/2007, -1/+7Tables are bad, and so are all divs ( http://en.wikipedia.org/wiki/Divitis ). The idea is for the source code to have semantic meaning. So lists of things should be put in ol or li elements, tabular data in tables, etc. This improves browsing for blind people and blind robots (e.g. search engines). Also maintenance is much nicer.
- heymark, on 10/12/2007, -2/+8This is out of control. Please vote this article Lame.
- gamerscalling, on 10/12/2007, -1/+7Tables were made for tabular data, not to keep content separate. When you use a table it also will make it weird for a text-reader were they don't see the images being separated by it. There are some other reasons too.
Also you can make a much better and easier to update layout with divs and etc. - fingiecrookie, on 10/12/2007, -3/+8@ CatfishJones: "Marked inaccurate. The corners aren't being rounded "with CSS" but with images."
Technically, the rounded images are defined inside the CSS file, as opposed to including them in the HTML markup. That's the whole point of this technique; writing semantic and lean markup, without using inline presentational images. You can argue that the extra divs screw up what purists consider to be "clean markup", but still, he has every right to call them "rounded corners with CSS" or "rounded CSS corners". - TheBurt, on 10/12/2007, -0/+5It has ajax three times and web 2.0 twice. Automatic front page.
- scottschiller, on 10/12/2007, -1/+5Thank-you for the comments, critiques, death threats and general flaming. OK, so it's not all that bad, really. ;)
Kudos to the poster who mentioned the Apple "Rounded Rects" story, that's a great one - I was actually reminded of it when working on this; I've read "Revolution In The Valley," which includes that story.. It's a great read for anyone interested in the history of the Mac, and some stories about and from the people who worked on it.
In a lot of ways, "Revolution In the Valley" has stories, discussions and decisions that relate to work going on the web these days - we're trying to build more "rich" desktop-like interfaces, changing interaction expectations, making the web feel like an application. Is it the right way to go? .. I'm not sure, but I can tell you that I think rounded corners are going to be around for a while. This is just another attempt at implementing them using CSS, trying to provide a more elegant design without excess/extraneous markup and/or script. It's been done a million times before, but we haven't got it right. Simple, reusable rounded corner dialogs are probably one of numerous "holy grails" of web development.
To try to answer some questions/criticism:
These are "with CSS" in the sense of applying background images. We don't have "native," CSS-only rounded corner borders save for specific implementations like -moz-border-radius. When you need consistent design while using standards, you have to use what's supported across the board.
Re: "keyword stuffing", no. I am ranting/complaining and lightly mocking the buzzwords used (web 2.0, ajax, etc.) for the "new generation" web. Ajax has nothing to do with rounded-corner dialogs, nor javascript animation, etc., and yet it gets tied up in this kind of stuff all the time. A personal pet peeve of mine. I've written previously about this - http://www.schillmania.com/content/opinion/2005/10/dont-believe-the-web-20-hype/ .. my apologies if it was throwing off your feed search, I never even considered that as a factor when writing! :)
Also re: markup weight, number of nested elements: I am using an extra nested element or two for the gradient in the "body", which could be left out - you could have only two extra "corner" elements (ie. Sliding Doors method) just for the header and footer elements, leaving the body with just a solid background color border on left and right.
Thanks again for the comments etc. - noahhoward, on 10/12/2007, -0/+4Tables create a massive amount of overhead. So does this layout. You are supposed to be moving away from tables in order to create more semantic pages with faster load times. Unfortunately people are using layouts such as the example here in a quest to make a box which will expand but not use table layout but end up defeating the purpose of a CSS based layout.
The other drawbacks of making complex nested tables for a layout... the table structure has to render before any of the content begins to load. On a page that takes say 2 seconds to load if the first 1.5 second is a blank screen users will leave.
There is a CSS property to round corners it just isn't well supported yet. - tizz66, on 10/12/2007, -1/+4How would the top and corners be combined, and still allow it to stretch to content? The background is an image because it has a gradient on it. If you were going for a flat look, then yes you could just use a colour background.
- sapped, on 10/12/2007, -0/+3@david76
Here's what jer, and I, don't get. The title of the article says "More Rounded Corners with ***CSS***".
The execution and the title don't appear to match up. I think we were expecting some neato CSS only hack which would not require images or scripting. - MacHarborGuy, on 10/12/2007, -0/+3CSS3 can already do rounded corners.
Currently only supported by Mozilla based browsers and WebKit (safari nightly builds). Once it is a full spec, I believe that the -moz-/-webkit- will be removed from the final code.
It works, not antialiased and no drop shadow, but it works. - tybris, on 10/12/2007, -1/+4I enjoy having to write only 30 lines of XHTML instead of 200. CSS is so much easier to maintain.
- uptown, on 10/12/2007, -2/+5"let's say your boss came around and says we want our nav links to be on the right side of our pages instead of the left side."
Some people need to learn to tell their boss "no". - Junto, on 10/12/2007, -0/+3These kind of techniques are purely of what I term "square peg, round hole CSS". Instead of fiddling with your CSS hacks, do something productive with your time and wait until support for the CSS3 border-radius property is widely supported...
http://digg.com/design/Rounded_corners_without_CSS_Hacks_or_Images - jmadigan, on 10/12/2007, -0/+3>>Do you know of an example out there comparing them?
Do a google search on "tables versus CSS" or "tables vs. CSS" and you'll find a ton. This one seems pretty detailed:
http://www.sitepoint.com/article/tables-vs-css/2 - DrGamez, on 10/12/2007, -0/+3-moz-border-radius
- jmadigan, on 10/12/2007, -0/+2You also can't do things like absolute and relative positioning of individual page elements that easily. Like having a certain box always appear at certain pixel coordinates or have elements overlap with each other. Or maybe you could do it with tables, but it would be really tricky and break easily. Using CSS makes controling the layout of a page much easier and more flexible. For complex pages, it also means that your page contains less code and thus renders faster than a page with lots and lots of nested tables, background images, etc.
For really simple pages, tables are probably fine for layouts if you don't mind a bit of scorn from the purists. But CSS is much more flexible, faster, and quicker. - veritech, on 10/12/2007, -0/+2Ponies!!!!
- pacmanfever, on 10/12/2007, -3/+5So this involves 7 divs and images for the corners...
Who the hell is digging this? - Otto, on 10/12/2007, -3/+5Holy crap people. It's amazing the amount of effort people go to to round corners.
Just use -moz-border-radius and border-radius in your CSS and be done with it. Yes, it don't work in IE. But it's only a look thing, it's not functional. Screw IE. They can add support for it in IE7 or whenever IE starts to support CSS3. - ZergyPoo, on 10/12/2007, -3/+5"let's say your boss came around and says we want our nav links to be on the right side of our pages instead of the left side. For a website with hundreds of pages, how easy would it be to do that with a table based layout? With divs and a linked style sheet you can do it in a couple of minutes."
If you've got a site with hundreds of pages, programmed in flat html, then you've made things difficult for yourself. - MacHarborGuy, on 10/12/2007, -0/+2whoops, code didn't paste.
-mox-border-radius: 5px;
-webkit-border-radius: 5px; - d3m3, on 10/12/2007, -0/+2This reads like a fairy tale.
- sandrat44, on 10/12/2007, -0/+1Now that was awesome. I remember those... nice story.
- fingiecrookie, on 10/12/2007, -0/+1That's why it's folklore. ;)
- icexe, on 10/12/2007, -0/+1yes, that works, but the corners are not anti-aliased, so the resutls are not very pretty.
- steger, on 10/12/2007, -0/+1try p {display:inline;}
- inactive, on 10/12/2007, -0/+1The individuals responsible for this incident have been sacked.
- xotx69, on 10/12/2007, -1/+2If you only want rounded corners, just use this for most HTML elements in your CSS file:
elementName {
border-radius: 1em;
}
border-radius is CSS3. This attribute is supported by Firefox. But not by Safari, and IE6. Unsure about IE7.
http://www.w3.org/TR/css3-background/#the-border-radius
Enjoy. - kaidadragonfly, on 10/12/2007, -0/+1-moz-border-radius isn't an implimentation of the CSS 3 rounded corners, it's just code they invented so that they could use it with XUL.
(For things like rounding the tops of the tabs.)
Or at least, that's what I've been lead to believe. - sandrat44, on 10/12/2007, -0/+1I think, you are the first source I've seen who's come to explain themselves about their content that got posted in digg. Not a bad write up, and it sure brought a lot of other folks in with lots of other ideas. Just for that I'll give you digg. Between your write up and all the discussion going on here, I think 45 minutes reading everything and following links was worth it.
- gorndog, on 10/12/2007, -0/+1In Schill's blog, http://www.schillmania.com/?theme=2005
"I tried this [this digg submission] in 2003, and I don't recommend it; I have since moved on."
"Elements could be dynamically added, but that introduces external dependencies (Javascript) and potential performance issues." - nitsuj, on 10/12/2007, -0/+1The management would like to apologise for this brief outburst of idiocy.
- noahhoward, on 10/12/2007, -0/+1Just remember if it wasn't for twits who had no idea why doing things a certain way is useful or important there wouldn't be a need for us. Twits no matter how annoying keep me in business.
- JasonPrini, on 10/12/2007, -0/+1I like Spiffy corners : http://www.spiffycorners.com/
Anti-aliased rounded boxes with CSS and NO images or JS!
and if you don't mind the JS, here's another: http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/1/
and here's another based on the previous, that adds variable radii: http://www.acko.net/anti-aliased-nifty-corners - fingiecrookie, on 10/12/2007, -0/+1@ wicketr: "'I've heard it over and over again about not using Tables, but haven't ever ventured out of my comfy table box to explore the diverent world yet. If anyone's got some concrete examples I'm all ears."
A List Apart should be a good start: http://search.atomz.com/search/?sp-q=web+standards&x=0&y=0&sp-a=sp1002d27b&sp-f=ISO-8859-1&sp-p=All&sp-k=All - xotx69, on 10/12/2007, -0/+1Yup. There's also:
-khtml-border-radius
-o-border-radius
The poor W3C validator pukes when it sees anything to do with radius though :-S
And yeah, no anti-aliasing, but it's good enough for me :) - coolbru, on 10/12/2007, -0/+1No-one seems to have mentioned another CSS3 way that's in the pipeline: multiple background images. Safari nightly builds have had it for quite a while now. It allows you to do "sliding doors" style rounded corners, but without any additional XHTML markup at all, just CSS.
- Dracos, on 10/12/2007, -0/+1Unless "border-radius" appears in your CSS, you're not doing rounded corners with CSS, you're doing it with *images*.
While I applaud all the designers who have caught a clue in the last two years, here's my advice to you: keep your glove on, you ain't done yet. - spyres, on 10/12/2007, -0/+1Here's a way of getting the rounded corners that truly doesn't use any images or java.
I'm not sure I'm crazy about it, but this guy is pretty clever.
http://www.cssplay.co.uk/boxes/snazzy.html - ozskier, on 10/12/2007, -1/+2Little known fact, Scott Schiller's brother is a professional skier. Both of them rock.
-
Show 51 - 96 of 96 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is