What is Digg?74 Comments
- spect3r, on 10/12/2007, -3/+19The CSS is much lighter in weight.
- olegk, on 10/12/2007, -0/+16Cmon. This was posted at least 10 times.
http://digg.com/design/100_CSS_Rounded_Corners_WITH_anti-aliasing._No_images._No_JavaScript.
http://digg.com/design/Ultimate_Imageless_Rounded_Corners_with_Anti-Aliasing_
http://digg.com/programming/CSS_rounded_corners_without_images
http://digg.com/design/CSS_Rounded_Corners_WITHOUT_using_images_-_tutorial
http://digg.com/design/Rounded_Corners_for_your_webpage_without_images
http://digg.com/design/Rounded_corners_in_IE_without_images.
http://digg.com/videos_educational/VIDEO_Rounded_Corners_Without_Images._No_CSS!_No_JavaScript!
http://digg.com/design/Rounded_corners_without_CSS_Hacks_or_Images
http://digg.com/design/Nifty_Corners_Cube:_rounded_corners_without_images
http://digg.com/design/Get_Rounded_Corners_Without_Images_using_CSS
http://digg.com/design/List_of_amazing_tutorials::_Cool_rounded_Corners_using_CSS_without_images
http://digg.com/tech_news/Nifty_Corners:_rounded_corners_without_images - Casedot, on 10/12/2007, -3/+18who hasn't seen nifty corners yet? for better use and examples, check out CSSplay.
http://www.cssplay.co.uk/boxes/snazzy.html - wicketr, on 10/12/2007, -4/+16Are 4KB images so bad that there needs to be "hundreds of articles" done to avoid them? Plus this method does use extra CSS which the description says it doesn't.
- takamalak, on 10/12/2007, -2/+13This is the oldest trick in the book. Looks good and loads fast though.
Here are some other CSS trick pages:
http://positioniseverything.net/
http://www.cssplay.co.uk/ Everyone should know about this one
http://www.bluevertigo.com.ar/ cool links page
And for patterns:
http://squidfingers.com/
http://www.k10k.net/
http://fractured-sanity.org/index.php?navi=3&site=pattern
http://www.portfelia.com/patterns.asp
http://www.1greeneye.net/index.html
http://www.kollermedia.at/index.php/pattern4u/ - cresswga, on 10/12/2007, -0/+10Correction: Hundreds of articles submitted hundreds of times...
- Zipp425, on 10/12/2007, -1/+10cool site that will generate the css method for you...
http://spiffycorners.com/ - hotpepper, on 10/12/2007, -0/+8It would be so much easier if browser makers simply supported border-radius.
http://www.w3.org/TR/css3-background/#the-border-radius - Chewie67, on 10/12/2007, -2/+9Attention MOZILLA, MICROSOFT, APPLE and OPERA SOFTWARE:
Please, please, please just implement TRUE, ANTI-ALIASED, rounded corners in your CSS support. Then we can do away with all these hacks and hassle. - invader, on 10/12/2007, -0/+6"This page is intended to present the solution I came up"
*****. i remember seeing the same css code almost a year ago, and dozens of times since then. at least change the name of the classes you're using if you're going to claim it as your own!
plus, for those that haven't seen this months or years ago, it doesn't take long to change it to add borders. change the background-color of the one with the biggest margin to the color of your border. then on the rest, do this:
border-right: solid 1px #yourcolor;
border-left: solid 1px #yourcolor;
easy.
edit: just read the article more closely... it says he posted it last year, which makes more sense, but why would that person NOW submit it to digg? - nanomaton, on 10/12/2007, -0/+5Am I the only person that read the first paragraph?
"This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube."
http://www.html.it/articoli/niftycube/index.html
So to all the people who commented "this is old news", you're correct... and the author agrees that it's old news within the linked article. - vuke69, on 10/12/2007, -0/+5Depends on if you ever want to change colors, or have a patterned/gradient background. Makes those 4KB images start becoming a real pain in the ass.
- 022A, on 10/12/2007, -1/+5I give rounded corners till spring '07.
After that they will joint Lens Flare, Blink Tag, Image Flip, Drop Shadow and Hirosh Font in the overexposed web design retirement home. - Cojawfee, on 10/12/2007, -1/+5Isn't the point of web development to take design out of the markup?
- ampledismantle, on 10/12/2007, -0/+4Rounded corners is one of those things that just shouldn't be this big of a deal.
But I guess it gives people something to work on in their spare time. - TenebrousX, on 10/12/2007, -0/+4"the new iteration of CSS will be able to do it, but until then you have to use a different way."
But Internet Explorer most likely won't, so we will have to wait longer :( - coolbru, on 10/12/2007, -0/+4It's been in Safari nightly builds for a year or so, been working right for the last few months. http://webkit.org/blog/
- exobyte, on 10/12/2007, -4/+8seriously. I don't know CSS and I knew this could be done.
- bleaknik, on 10/12/2007, -1/+5... [last comment was truncated]
Anyone have any examples that don't use JavaScript?
Anyone have any examples without superfluous tags?
Anyone have any examples without images?
Is it still XHTML compliant?... - vuke69, on 10/12/2007, -0/+3"Yeah, and where are the borders? haven't seen javascript based corners that have borders yet."
like this?
http://www.cssplay.co.uk/boxes/snazzy.html - wozley, on 10/12/2007, -1/+4All we need now are shadows.
- kendawg, on 10/12/2007, -1/+4You just have to look at one article to save the time of making your images. You don't have to look at hundreds of them.
- judofyr, on 10/12/2007, -1/+4"that [...] extra markup nor CSS"
O rly?
HTML:
< div id="container">
< b class="rtop">
< b class="r1">< /b> < b class="r2">< /b> < b class="r3">< /b> < b class="r4">< /b>
< /b>
< b class="rbottom">
< b class="r4">< /b> < b class="r3">< /b> < b class="r2">< /b> < /b>
< /b>
< /div>
CSS:
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px} - hotpepper, on 10/12/2007, -0/+3Voila, too, I imagine.
- inactive, on 10/12/2007, -0/+3I think the point is that the user generated markup does not need all that extra crap. It is inserted dynamically by javascript. If js is disabled you just get a regular box.
- EricAnderton, on 10/12/2007, -0/+3I'm with Chewie67 here. We don't need 100% of CSS3, but including these parts would be very, very nice:
http://www.w3.org/TR/css3-background/ - Zipp425, on 10/12/2007, -1/+4yup. this really isnt that great of a solution... so much extra markup just for rounded corners...
- trylleklovn, on 10/12/2007, -3/+5This is so old i think my grand mom has heard of it.
The problem though about Niftycorners is that it takes just a second to load, which makes the page "jump" when visited. Also it is of course javascript, which is never good for important stuff :P
I have gone from using niftycorners to using images, as it is far better on most browsers. - bleaknik, on 10/12/2007, -1/+3I'd love it if someone show me an example that's done using only 1 div... without any images, javascript, or superfluous tags... Snazzy corners looks nice...
But it's lame to have to code this whenever we want pretty corners... - litolist, on 10/12/2007, -1/+3Images are a bit of a hacky way to do things, and depending on size and color of corners, you'll need different images if you want to keep things looking perfectly.
With this, you can at least encapsulate the functionality in a method that adapts to your needs. - Zipp425, on 10/12/2007, -2/+4yup... to bad its only firefox at the moment...
- hotpepper, on 10/12/2007, -0/+2The only point to be using a strong tag would be to add strong emphasis to the content between the tags. Obviously, this isn't the purpose of the example. A more semantic tag would be a span tag. That's what they're for.
- FTLJohnson, on 10/12/2007, -1/+3Yeah, and where are the borders? haven't seen javascript based corners that have borders yet.
- Dracos, on 10/12/2007, -0/+2Use the border-radius property. Every other technique is a hack.
You could even use this to get people off of IE. "Want to see rounded corners? Get a browser that doesn't suck." - soupisgoodfood, on 10/12/2007, -0/+2No digg. This uses heaps of frivolous tags. I'd rather just use images. It looks better and is much better from an accessability point of view, too, ironicly.
- steger, on 10/12/2007, -0/+2My mind went blank and i forgot about the span tag. That would be better than depreciated b tags.
- Eddible, on 10/12/2007, -0/+2@hotpepper
Haha you joker you. - coolbru, on 10/12/2007, -0/+2(for the second time) It's been in Safari nightly builds for a year or so, been working right for the last few months. http://webkit.org/blog/
Firefox uses a proprietary tag (quite rightly, because CSS3 is not final). Safari nightlies use the CSS3 syntax, but then it's not released yet, so both browsers are playing by the rules. - jon3k, on 10/12/2007, -0/+1Not to defend the submitter (because he should have read it), but the article itself clearly states that it doesn't require CSS, then goes on to show the required CSS code.
- jon3k, on 10/12/2007, -0/+1"This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS."
then down about half a page ...
"And here's it the basic CSS:"
Yeah, so it doesn't require CSS but it does. Marked inaccurate. - theadvinci, on 07/01/2008, -0/+1Rounded corners - so you wouldn't hurt yourself.
- davidod87, on 10/12/2007, -2/+3Awesome. This saves an insane amount of time.
- ChippyLasticko, on 10/12/2007, -0/+1Wow, it still is a nice effect.
- makingme, on 10/12/2007, -0/+1seriously, old news.
- Eddible, on 10/12/2007, -0/+1Cheers for the patterns links, I needed a few decent sites.
- plasticmind, on 10/12/2007, -0/+1"...that doesn't requires images, extra markup nor CSS..."
Who the heck diggs articles like this? The description is a blatant lie, especially since above the fold on the NiftyCorners page has tons of extra markup and the css you need to impliment to use it. The Digg front page is starting to look more like the Daily Sun than an online knowledge base... - idiggmacs, on 06/11/2009, -0/+1I've used this technique. It's a PITA! The result is great. But in a very dynamic code base (weekly launches and every changing features and code), this takes too much time to maintain. It's also difficult to get all the designers and developers to do it consistently. I now prefer just creating rounded corner background images like Apple does on their site. It's faster, less problematic and much less time consuming.
- Eddible, on 10/12/2007, -0/+1No. MySpace doesn't allow javascript to be ran on your profile. Only hope for rounded corners (as far as I can tell) is to wait for CSS3 to become mainstream, but saying that, I bet it would still be hard to achieve on a MySpace profile because it's all tables rather than div tags. Eugh, lovely ay?
- nathanchase, on 05/06/2009, -0/+1RUZEE.Borders FTW!
From the feature list:
* Border style definition via CSS and CSS-like JavaScript
* Anti-aliased rounded corners similar to the successors of Nifty Corners
* A symmetric shadow similar to the ones of Mac OS X
* Configurable border widths
* Outside as well as inside background image support (gradients)
* A kind of glow which is based on the shadow feature with a configurable color
* A fade effect which lets the border color fade into the background color
* All that at every edge/corner or only at some of them
* Works on all modern browsers, even Opera and Konqueror
* Colors and layout of the borders are defined in the CSS - if JavaScript is disabled your web site looks like its cubistic twin
http://www.ruzee.com/blog/ruzeeborders/ - themulf, on 10/12/2007, -2/+3Thanks!
-
Show 51 - 74 of 74 discussions
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official 
© Digg Inc. 2009
— Content created and posted by Digg users is