What is Digg?63 Comments
- seventoes, on 10/12/2007, -13/+60No, CSS only works on EVERY OTHER SITE ON THE INTERNET!
- nubnub, on 10/12/2007, -1/+38Javascript :(
- djrtitan, on 10/12/2007, -0/+23I don't see the problem with using Javascript as long as it degrades nicely. The title is deceiving though, when you say "CSS Speech Bubbles" that should be an all CSS solution to speech bubbles WITHOUT Javascript.
- utcursch, on 10/12/2007, -2/+20Demo:
http://www.willmayo.com/journal/projects/07/bubbles/ - Valacar, on 10/12/2007, -3/+20Anyone check out the generated html code? There's like 50 DIV tags with long style attributes for each of those bubble comments! o_O
- soogy, on 10/12/2007, -2/+16We went from using tables for design, to JAVASCRIPT?
Come on. You can easily do this without JavaScript. Plus, if you turn off JS, it looks stupid as hell.
Watch me come up with this right here and now, this is fixed width:
...Whatever you want...
With this CSS:
.bubble {
padding-top: 10px;
width: 500px;
background: transparent url("path_to_your_top_image.gif") no-repeat 0 0;
}
.bubblecontent {
border: 2px solid #fff;
border-width: 0 2px;
background-color: #9cf;
color: #000;
}
.bubblebottom {
height: 15px;
background: transparent url("path_to_your_bottom_image.gif") no-repeat 0 0;
}
You could easily get a little more fancy by using more wrapper elements to make it horizontally resizable as well.
Edit: Dammit, I forgot Digg filters out HTML. - headzoo, on 10/12/2007, -1/+15Maybe it's just me, but when I saw CSS in the title I figured this was going to be an all CSS solution.
- mstar, on 10/12/2007, -1/+14Nice corners yes - but loading 32K of Javascript.... ? Not worth it... There are better solutions out there.
- rsky, on 10/12/2007, -1/+1325KB of extra javascript to load for some silly bubbles. No thanks.
- isdereks, on 10/12/2007, -0/+10Rounded corners at the cost of an additional JavaScript solution? No thanks. Misleading.
- soogy, on 10/12/2007, -2/+11This is the HTML to go with my above comment:
<div class="bubble">
<div class="bubblecontent">
...Whatever you want...
</div>
<div class="bubblebottom"></div>
</div> - crawfishsoul, on 10/12/2007, -0/+8Please make sure you are banning these eefoof *****. If you click on their links, locusts, beetles and crabs will infest your pubic hair.
- appletalk, on 10/12/2007, -1/+8The problem is not the use of Javascript itself, because Javascript helps you keep your code clean,
and not use an unnecessary number of tags that don't have any semantic role.
With the limited support of CSS by Internet Explorer, there's no good cross browser solution for
rounded borders without adding extra markup.
For example, right now, without Javascript, this would be impossible for IE.
[div class="rounded"]
Hi, this is rounded.
[/div]
The problem here is not the use of Javascript, but the guy not adding the extra markup,
( [div class rounded], [span class rounded] ), from Javascript as well.
PS: What the hell is wrong with digg commenting? I respond to a comment, and it goes all the way up in a position where my reply doesn't make sense ! - DankLogic, on 10/12/2007, -1/+8http://www.willmayo.com/journal/projects/07/bubbles/rounded_corners.inc.js
looks nice but examine the java-script code, it is one of the nastiest things I have ever seen. There has got to be at least a hundred more efficient ways to do this and achieve the same result. - Valacar, on 10/12/2007, -1/+7I was refering to the demo that utcursch posted above. If you use something like the Web Developer extension for Firefox to view the generated html source, you'll see (scroll right) there's a *ton* of DIV elements for each of those 3 comment bubbles.
- phjr, on 10/12/2007, -2/+8Didn't test, but looks nice.
- aloser, on 10/12/2007, -0/+6Who? Must have already blocked him..
- barbarac, on 10/12/2007, -4/+9Yeah dude it will. You just need to access your style sheet info for blogger to make it work.
- HollisJamison, on 10/12/2007, -0/+5Very good looking actually. Nice and customizable. +Digg.
- zzz@tkz, on 10/12/2007, -0/+5I'd digg you up, but that is one massive post, so I'm digging you down.
Yes, images are the way to go if you want clean (X)HTML. - dosx2, on 10/12/2007, -24/+28@seventoes: Don't be such a dick.
- rspeed, on 10/12/2007, -0/+4Because it's JS it won't use much bandwidth... however.
That's an absolute NIGHTMARE for rendering. Both the javascript going nuts with the DOM and the rendering engine being bogged down by hundreds of these 1x1 divs. That's absolutely terrible. A page with just one of these bubbles would take twice as long to render, and that would scale upwards with each additional bubble.
DO NOT USE THIS! - Tippis, on 10/12/2007, -0/+4...and with an abysmally messy DOM-spaghetti structure as a result.
It could be done using 1/10th the size, without the semantic mess, and without the extra load on the Browser. - 4hero, on 10/12/2007, -0/+3this could be achieved with pure css and much less code. Give me 5 minutes...
- ArielMT, on 10/12/2007, -0/+3Buried as inaccurate. Would've been dugg if the title and article had JavaScript in them, since it's required for the demonstrated effects. The rounded speech bubbles are nice, but it's at best very bad form to leave it to a pseudonymous commenter on your own blog to disclose the JavaScript requirement.
- smhill, on 10/12/2007, -0/+3@Appletalk
"That is code generated by Javascript, not actually sent to the browser."
Really, wow thanks for the insight. I believe I actually pointed that out, but thanks for restating it. - soogy, on 10/12/2007, -1/+4@Appletalk
What the hell? It isn't "limited support" by Internet Explorer. There is NO SUCH THING as rounded borders in CSS2.1. It's part of the CSS3 draft spec.
Mozilla uses a non-standard -moz-border-radius to do it. While there are many other IE flaws for you to pick, this is not one of them. - benlong, on 10/12/2007, -2/+4It should work if you can include javascript in your Blogger source... I'm not sure how Blogger works. Don't be mislead and think this will get you more comments =o)
- ArielMT, on 10/12/2007, -1/+3I await your demonstration. The only ways I know how to do this in pure CSS with only the one "tip" image are using the CSS 3 draft recommendation and the proprietary Mozilla CSS extensions: the border-radius and -moz-border-radius properties respectively for rounding the corners.
- kenmantx, on 10/12/2007, -0/+2The Fine Print: requires a 25kb javascript file.
- lifenstein, on 05/30/2009, -0/+1There is a better way demonstrated at http://cssplay.co.uk/boxes/three_cornered.html and http://cssplay.co.uk/boxes/curves.html - No JavaScript. The site is a great source for much more CSS tricks.
- sickanimations, on 10/12/2007, -0/+1Buried as 'lame' but i would have buried as 'excessive' if the option was there. Raw CSS could do this better.
Edit: Why has this post got so many diggs? : - clesch, on 10/12/2007, -1/+2The 5 minutes are over! :/
- masterkenobi, on 10/12/2007, -0/+1I got excited when I first saw the title, but once I started looking at the 25k of spaghetti JS code (obfuscated to hell, might I add), I am passing on my digg for this post.
If it were true opensource, the developer of this package would have included a non-obfuscated JS file for other developers to perhaps take a stab at it and make any improvements. - sensibledriver, on 10/12/2007, -0/+1FAIL.
Exra mark-up/Javascript to achieve a layout.
Nice try, though. - spliffy, on 10/12/2007, -0/+1i'd be digging this if they were actually diagonal like in the picture. all javascripted out and cross browser tested and stuff.
but this is lame. who couldn't do this in five minutes themselves? - BevansDesign, on 10/12/2007, -0/+1Just mentioning this: in the third one (black box with thick borders) the down-point is just slightly off in IE7. I only mention it so designers know it when they start incorporating this into their sites.
- benlong, on 10/12/2007, -0/+1I checked out curvycorners (the script that creates the rounded corners progmatically) and my understanding is the script is processor intensive and slow if handling more than a couple 'curved boxes'.
Curvycorners is quite impressive for what it does, but I don't think it's practical for comments. The script attaches 100 divs (or more) to each div that requires rounded corners. It's pretty neat, but you don't want 10,000 divs in your dom just for rounded corners in a thread with 100 comments. - 4hero, on 10/12/2007, -0/+1ok, this is not perfect, it doesn't working in IE "surprisingly", and it took a bit longer than 5 minutes, but it's a start.. I'll get back to it at some point to finish it!
http://freespace.virgin.net/neil.paterson2/speech-bubble-rounded-corners-css/ - smhill, on 10/12/2007, -2/+3@KyleMistry
So, you posted it...why?
So people could actually see the crap that is generated. "Simple" (easy to implement with no actual knowledge) scripts like this plague sites. $10 says it will be a wordpress plug-in with in a month (if it is not already). To often people blindly put crap on their sites without actually looking into it.
Showing the results was intended to be helpful, and hopefully steer people clear of this kind of crap. - ray73864, on 10/12/2007, -0/+0Odd, it looks fine for me and i use IE7 too
- appletalk, on 10/12/2007, -1/+1@soogy:
http://www.w3.org/Style/Examples/007/roundshadow.html
Learn CSS before butting in in a CSS conversation. The radius property isn't the only way to get rounded corners.
Then is when ::after and ::before come in handy. You don't add extra, unnecessary, markup.
Yes, the answer is a bit late, I know. - fribirdz, on 10/12/2007, -0/+0what a wonderful!
- jake3988, on 10/12/2007, -0/+0Tons of javascript and it doesn't work with nearly every single browser out there. I tested on both the newest Opera and the newest Firefox and it doesn't work.
There's much easier ways and more compatible ways to do it I'm sure. - sockpuppets, on 10/12/2007, -2/+2Tick, tock... I'm a sock.
- Sammy20, on 10/12/2007, -1/+1so like, how do I add this to my own web site, and let people add comments to it?
- swhite1987, on 10/12/2007, -3/+3-1, but only because you told me to.
Besides, spamming is a sign of weakness. - Tippis, on 10/12/2007, -2/+1...if only more browsers supported (CSS-)generated content :(
- benlong, on 10/12/2007, -2/+1Let's see it!
-
Show 51 - 64 of 64 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