What is Digg?Sponsored by Dragon Age: Origins
Can't get enough Dragon Age: Origins? Play the flash game. view!
DragonAgeJourneys.com - Play the free companion flash game to Dragon Age: Origins.
116 Comments
- Greg-J, on 10/12/2007, -7/+114It hasn't been submitted before. I just finished writing it a few hours ago.
And when you are serving hundreds of thousands of pages a day, those extra calls to external image files and .js libs add up. Fast.
And as for the code being heavy, even formatted the way it is, it's only about 1KB.
I realise it's not for everyone though. I just thought I'd share it for those who would find it useful. - inactive, on 10/12/2007, -0/+26I find that there is some irony in the fact that people are now writing a bunch of special code to do layout with CSS. CSS was made to avoid having to do special table code for layouts. Now look at what we're doing, a bunch of bold tags.
- jonrad, on 10/12/2007, -2/+17The bold tags are the first thing that caught my eye as well. What is the point of them?
Personally, I think that if I had thousands of users visiting my site, I would rather try to optimize other things first. Maybe check the database calls, how optimized my code is, etc. After that I'd try to degrade my images (reasonably) to make them smaller. I don't think I would even consider the rounded corner images, each being very, very small (2k?). With caching and all the other optimizations that browsers have made, I'm sure that it wouldn't make that much of a difference. Though, some statistics would be interesting to look at. - ronaldpoi, on 10/12/2007, -2/+15Well i always hated those "rounded-corners-on-css" 'cause all of them got pixeled corners. This one, anyway, looks pretty good. The code, of course, isn't easy at all and it's very heavy for just that effect. Digg for the sake of css evolution.
- runningnick, on 10/12/2007, -1/+11I agree. Imagine if you, for some reason in the future, had to navigate this document via the DOM. The bold tags make no sense.
Rounded corners are a perfect example of something that shouldn't be hacked up via weird markup and bizarre CSS. Use JavaScript to first test for a CSS3 rounded corners property; if not present, then manipulate the document to add these weird bold tags on page load. If JavaScript is disabled, then they get square corners, but the site is still accessible. At least you don't have to maintain bizarre looking markup that will confuse screen readers and other accessibility software.
JavaScript is not bad, people. Just use it judiciously such that when it doesn't run, it's not the end of the world. - ivachen, on 10/12/2007, -1/+11Dugg for the effort, it's not an elegant in a programming perspective. The HTML code is messy, and the worse thing is that you alised the corner by using blended colors at the left and right boarder, and when you wanted to change color, you are going to take some time to change all of the blending colors in between, and all those work for the little corner that can be done with a 5x5 gif...
- prockcore, on 10/12/2007, -0/+9What's with the non-standard unicode tags in your post? Is your browser retarded or is it digg?
- allthewhile, on 10/12/2007, -1/+8okay finally a way that is straightforward. All we ever want is copy and paste! geesh!
- vh1`, on 10/12/2007, -2/+9"On the other hand, putting the code in-line like this means that every time users visit a page that has rounded corners on it you need to send all the code over again"
ummm, there's nothing stopping you from putting this code in an external css file - smhill, on 10/12/2007, -0/+6You hit the nail on the head. Exactly the problem with things like this.
- MrDiaz, on 10/12/2007, -0/+5there is a problem though. if you use tags on the content the whole thing is messed up. I hope you can fix this later on in the future.
- TheD, on 10/12/2007, -6/+11Yeah! well teach you to try and do something! how dare you!
I know very little about the programming involved, but my god does everyone have to be verbally raped for attemting to do something other than make ***** comments on other peoples actual life activities.
cant wait for the first "I'll stick with..." idiot to post. - MrDiaz, on 10/12/2007, -2/+6excellent way of doing this. I will use this for sure, thanks :)
- joelhardi, on 10/12/2007, -0/+4Yes, plus the same example has been floating around for a couple of years now. Pretty sad when you can get rounded corners AND use semantic markup on any fixed-width box like this:
<div class="box">
<h1>Box Title</h1>
... paragraphs, whatever ...
</div>
div.box { width: XXXpx; background: bgcolor url("rounded_bottom_corners.png") no-repeat left bottom; }
div.box h1 { background: url("rounded_top_corners.png") no-repeat; }
Or just Google "sliding doors css" for the original ... - smhill, on 10/12/2007, -8/+12This has been around forever and still is pretty lame. Deprecated tags, non-semantic markup and code bloat.
- olegk, on 10/12/2007, -1/+5So instead of using 4 GIF images, 90 bytes each, you will write 2000-3000 bytes of totally unreadable HTML/CSS. Why? (and btw, 4 GIF images would work in almost any browser, unlike your crazy code)
- deepsub, on 10/12/2007, -1/+5[homer]CSS... is there anything it can't do?[/homer]
- Greg-J, on 10/12/2007, -4/+8
Good God people.
It's amazing how many people will trash on something you've done. But to those who appreciate the effort I put in to this, Cheers. - Shinglor, on 10/12/2007, -1/+5There is nothing evolutionary about this solution, it's a kludge. The evolution of CSS would be border-radius in version 3 which is way off considering the terrible state of CSS2 support on the web's lowest common denominator (IE 6).
- cryonix, on 10/12/2007, -8/+12What%u2019s with this whole rounded Corner thing? Obviously nearly everyone has rounded corners (even digg) so why not try something else; maybe something creative? (Not bashing the corners just its overuse) Sure I%u2019m not a web designer but I made a conscious decision to avoid rounded corners on my website, people aren%u2019t going to look at the page and say "Oh wow how did they do that!? Rounded corners!? My mind is blown. I wonder if they used Java/css/ajax/gif/or whatever to make them". It%u2019s like "Emo" for WebPages. All you need to finish it off is a photo of you looking sad from a high angle and your hair combed over your left eye.
oh and the edit doesn%u2019t work too well it removed most of my apostrophes. :) - jflint, on 10/12/2007, -0/+3no digg. bloated code. non-semantic. each of those characters is essentially a byte. why not just set a background color then use an image with the corner colored white and the rest transparent (for instance, dan cedarholm's mountain top method). a small png or gif that is one color is probably about the same size byte-wise as the code used in this.
- mephitix, on 10/12/2007, -1/+4Good idea, but not so good implementation. Granted, this is a consequence of CSS's non-intelligence (i.e. you can't identify a single color with a variable and have selectors use that) and the inability to manipulate the shape of DIVs and such. I agree, it's too much bloat on the HTML code. A CSS solution would be perfect because (a) that's exactly what CSS is designed for -- the style. It doesn't make much semantic sense to use 5x5 images and stick them in the corners (although that's the typical way of doing it) and (b) people can turn off javascript.
- inactive, on 10/12/2007, -0/+3Hey Greg, I was trying to use your code in one of my projects and I found some issues in I.E (works fine in FireFox) check the screen shot.
http://www.flickr.com/photo_zoom.gne?id=117972489&size=o - dtfinch, on 10/12/2007, -0/+3There's a lot of ugly use of html needed for those corners. If you have to do all that before and after each rounded box, it's not really any cleaner than most other methods. If it was "100% CSS", then you wouldn't need 8 B tags before and after each rounded box.
- MellerTime, on 10/12/2007, -2/+5I'll digg it just for the name. Spiffy!
- SuperSloth, on 10/12/2007, -0/+3Don't like the bold tags, guys? Guess what? USE SPAN TAGS! Cripes.
That said, there are 4 extra bold tags in the code that serve no purpose AFAICT, and the blending formula is a bit hard coded for many people's tastes. And it is bulky. Still, if you stick the style sheet in an external file you can probably use it ona web site with some bandwidth savings (mitagated by using span tags). - Izzie, on 10/12/2007, -0/+3Too bad, it doesn't not work inside IE 5.x
- navvvv, on 10/12/2007, -1/+4I wonder how many gig's of traffic this could waste on a site like msn or google...
thumbs down for code bloat.
thumbs up for CSS, just not this example... - nucleocide, on 10/12/2007, -0/+3I'm going to have to put this in the category of 'awesome css tricks that defeats the purpose of css'. +digg for being cool although I'll never implement it.
- Dracos, on 10/12/2007, -2/+5Lots of bloated markup.
No digg. - BluParadox, on 10/12/2007, -3/+5Well you have to put all the bold tags in the html...
- thewise1, on 10/12/2007, -1/+3try clicking on "show me the code"
- soupisgoodfood, on 10/12/2007, -0/+2Always good to see people come up with new ways do doing stuff like this. But unfortunatly it's not an elegant solution. I think I'd prefer Javascript and images. They may be bigger, but at least they get cached and the content stays content.
- inactive, on 10/12/2007, -4/+6It's nice, but http://www.cssplay.co.uk/boxes/krazy.html still is a lot better. :x
- smhill, on 10/12/2007, -0/+2But there is a CSS solution already. It is called background-image. And of course CSS3 will support these types of thing.
NiftyCorners is exactly the same solution, just uses javascript to get there. - blueigloo, on 10/12/2007, -1/+3this is basically the same thing as nifty corners. The JS in nifty corners is optional, and allows you to write cleaner HTML other then 5 nested elements for a rounded corner.
- MRSA, on 10/12/2007, -0/+2The rounded corners thing either with or without javascript actually handles traffic much better than I expected. I am seeing a bunch of sites that are popping up using it.
http://www.bringr.com which is basically a digg for chicks uses one of these methods and appears very busy.
This technique actually has not been posted before. I think the similiar named nifty corners has... it uses javascript:
http://pro.html.it/esempio/nifty/nifty8js.html - inactive, on 10/12/2007, -0/+2Nice implementation.
But a largish (600x80) .png with a gradient and rounded corners is only ~700 bytes.
If you split it up to make it modular, it retains the small size. - inactive, on 10/12/2007, -0/+2Great tip, too bad it doesn't work right in IE 6 :(
- cryonix, on 10/12/2007, -0/+2I used “edit” to fix some typos. Then it removed all my apostrophes and replaced them with the non-standard unicode. It looked fine in the edit window, and after submit, it looked like that. I tried to go back and fix it but it kept replacing them. First time that’s happened. I use firefox, and haven’t had this edit problem before, maybe a random bug in digg? Not sure.
- steve01syd, on 10/12/2007, -1/+3Hey, I wouldn't use it over simple images but here's my simpler, cleaner method...
http://stevefarrugia.net/lab/rounded-corners.html - dccrowley, on 10/12/2007, -0/+2Valid HTML. Semantic disaster. Use span tags then instead of b tags. But you don't need to do so difficult. We had a similar problem here in the last two weeks. My boss did a writeup on how to get it done properly without any extra tags (except maybe on span tag then) and it is semantically correct. The secret is you need four tags and you stick the 'one' image in the corner of each. By creating a list you could use a ul, li, h3 and one extraneous span tag and no javascript. You can read this writeup from Stephen Hay at http://www.the-haystack.com/2006/03/16/rounded-corners/
- JeremyCade, on 10/12/2007, -2/+4dugg for effort.. but like most people have said,, I'll never use it.... But still good effort.
- sheepcentral, on 10/12/2007, -0/+2I did a test, and you can achieve exactly the same effect with span tags rather than b tags which are pretty much obsolete. I would change them, there is no point in using bold tags. Nice idea but as someone picked up it isn't cross browser compatible and is very "messy" and someone else said it would be extremely complicated to use with the DOM. Personally I would use Javascript to see if the user has the moz-radius (or whatever it is) or the IE equivalent enabled and if so use them, then if not apply this hack. Can someone explain to me how this works.
- aura, on 10/12/2007, -0/+1I'm in need of some decent code for rounded corners in CSS. Yes, this solution will work, but it's not very accessible, and the semantics do need work.
If you don't expect to have visitors who will view your code, or will not be using assistive technologies (i.e. screen readers) to view your pages, it's fine, if not, then I'd keep looking. - MrKite, on 10/12/2007, -0/+1yet another rounded corners in CSS example. Seems like a lot of people are trying to do the impossible. :)
The way I see it, use CSS3 if available, if not, use images. Keep the code clean. - yourmanstan, on 10/10/2007, -0/+1yes...perhaps if you've ever worked on a site bigger than your personal blog you would realize how time consuming it is to create a few hundred box corners.
- Drgn547, on 10/12/2007, -1/+2why the bold tags? what's the advantage?
- yourmanstan, on 10/10/2007, -0/+1which doesn't work in ie...so the design will look terrible to most every visitor
- DocCali, on 10/12/2007, -0/+1varkalav
try adding 's between the bold tags, I've had that problem with nifty corners occasionally and I think that fixed it. Also, try having all your bold tags on one line with no spaces, the problem's from IE adding white space. -
Show 51 - 100 of 116 discussions
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2009
— Content created and posted by Digg users is