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.
54 Comments
- markchadwick, on 10/12/2007, -0/+1This is a terrible mockery of CSS. CSS should be used to style clean markup. Here's a snippit of their "drop shadows"
Content...
Just because you don't see the table tag, doesn't mean you're being accessable/content lean/Web 2.0/buzz-de-jour. If you're going to get that sloppy, and tie your markup so tightly to your design, just start with tables! - puggy, on 10/12/2007, -0/+1That's too much markup for a nice little effect.
- inactive, on 10/12/2007, -0/+1Way too much clutter for both the XHTML and the CSS sheet. Does it validate? Cross browser?
- silent1, on 10/12/2007, -0/+1Good point about using tables. I wondered the same thing when guiltily applying a similar technique to my sidebar boxes. My biggest reasons for moving to XHTML/CSS is for accessibility. I decided "cluttering" my markup with the divs for this effect was fine because screen readers / other assistive devices rely on the "title", "accesskey", and "tabindex" attributes. Therefore, the extra divs will be "invisible" to most assistive devices, which will not get in the way for disabled visitors.
I don't mind my document's contents being encapsulated in div tags ... - v3xt0r, on 10/12/2007, -0/+1n00b action here, no digg
- woodwater, on 10/12/2007, -0/+0Looks good in IE and Firefox for windows...Good enough for me.
Dugg! - silent1, on 10/12/2007, -0/+0mjar81 - looks fine in FireFox 1.5 to me on OS X 10.4.4. Since the engine should function exactly the same in 10.3 (since it's not part of the OS), I couldn't tell you why it doesn't work.
- mjar81, on 10/12/2007, -0/+0the demos they provide look like crap... all broken in FF 1.5, osX.3.9
for anything to be truly great, it must be corss platform/corss browser. this is crap.
no digg. - legbend, on 10/12/2007, -0/+0Nearly eberybody knows it can be done that way... it's nothing innovative. Give me the same effect with 2 lines of code... then I'd be impressed.
- Mooseknuckle, on 10/12/2007, -0/+0I'm using the latest version of FF, and they look fine here, but they display using gifs, which I suppose may be the only way to do the shadowing.
Nothing really new here though.
I'm a big fan of the CSS rounded rectangles that can be made. They might be a little harder to conceptually grasp, but they sure do cut down on your server load since you dont have to load any images... - ElectricGrandpa, on 10/12/2007, -0/+0Macromedia's name for this technique is 9 Slice Scaling, octopus is just silly.
- riczho, on 10/12/2007, -0/+0Wow, yet another horrible CSS article.
This "engine" uses an outrageously unnecessary amount of markup to create the effect (and won't even work in IE. Perhaps the fact that the author is using XHTML 1.1 (and incorrectly sending it as text/html, of course) shows how little attention they pay to cross-browser development (I hate IE too, but you can't advertise an "engine" if it can't even work in the most popular browser at the moment). The site doesn't even validate... I'd never recommend this ugly technique to anybody.
Another issue, perhaps, is the submitters that seem to not know good CSS/HTML. It'd be really nice to cut down on the template sites and perhaps-- read the source/check browser compatibility, maybe even validate any interesting tutorials or techniques out there... - MannaPC, on 10/12/2007, -0/+0Screwed up... Only new people would use this and even to them I would reccomend learning how to do it on their own first.
- markchadwick, on 10/12/2007, -0/+0Well, I guess digg doesn't like tags. Imagine lots of them in all that blank space.
- TWhid, on 10/12/2007, -0/+0The markup is totally ridiculous, so much clutter. no digg.
- sw96, on 10/12/2007, -0/+0No worse than regular tables. . .
- agarc, on 10/12/2007, -0/+0Hmmm... I cannot understand what is so special about this tutorial... How is it an "engine?"
I found the demo pages to load pretty slowly, too. This is not a great place to start learning about CSS techniques. : (
[sarc]Besides. Shadows were SO two years ago. Nobody's doing that anymore.[/sarc] - yayson, on 10/12/2007, -0/+0rounded corners and rop shadows etc are fine but there's no need for this convoluted approach, too may extra divs in the markup.
rounded corners and drop shadows are always going to require extra divs with the current state of css but no *that* many! This can be done with half the extra div-age - SilentBobSC, on 10/12/2007, -0/+0+ Decent look
- Adds too much bulk
- Only displays properly in FF, and while it's a better browser... it's still only ~15% out there, and I have to design with the majority in mind
- PNGs are bulky
No Digg - Hergio, on 10/12/2007, -0/+0"Give me the same effect with 2 lines of code... then I'd be impressed."
Well, its pretty difficult otherwise. Wait for CSS3 and you'll get what you want. - Kinsbane, on 10/12/2007, -0/+0Weak. No digg.
- ekstasis16, on 10/12/2007, -0/+0This is not a quality solution, but we're getting there.....slowly. I hope. Maybe IE7 is taking so long to release because they're secretly adding support for CSS3 to be able to do this kind of stuff natively....
Ha! Boy, I crack myself up. - dkarlson, on 10/12/2007, -0/+0yeah, I don't get the whole "engine" thing either.
- pinballkid, on 10/12/2007, -0/+0I'm not sure that I like all those divs
- Waffles, on 10/12/2007, -0/+0Why do css drop shadow articles always get posted to digg? are drop shadows really that interesting?
- sergio, on 10/12/2007, -0/+0Too much useless HTML to achieve this.
- Reliant, on 10/12/2007, -0/+0Yes. Good and easy instructions. Nice Digg.
- oni0n56, on 10/12/2007, -0/+0UPDATE: there is now javascript support for all of you who don't like the non-semantic divs (myself included). Sorry I didn't have it for you all earlier, I honestly never thought it'd be this big.
Cheers! - bloodyValentine, on 10/12/2007, -0/+0I'm interested in why they used a single graphic http://dragon-labs.com/lib/i/atlantis.png backgound image with css positioning for their menus. Having one image is nice, I wonder how one larger image called repeatedly compares to 5 images called individually 1/5 the time (w/regards to page rendering and server load). Also, the menu hover backgound is a 13 frame gif animation. While that "softens" the transition, I tend not to hover long before I click, and this effect appears unnecessarily sluggish.
wrinkles posted by wrinkles (0) at 11:35 AM 1/16/06
They do that to prevent blinking rollovers, its a method of preloading. - legbend, on 10/12/2007, -0/+0Even javascript solutions are iffy... seems like a nice solution would be a PHP GD library solution w/ some dynamic sized backgrounds and an image replacement technique. Anybody have one?
- bloodyValentine, on 10/12/2007, -0/+0this is bad CSS no digg!
- wrinkles, on 10/12/2007, -0/+0I'm interested in why they used a single graphic http://dragon-labs.com/lib/i/atlantis.png backgound image with css positioning for their menus. Having one image is nice, I wonder how one larger image called repeatedly compares to 5 images called individually 1/5 the time (w/regards to page rendering and server load). Also, the menu hover backgound is a 13 frame gif animation. While that "softens" the transition, I tend not to hover long before I click, and this effect appears unnecessarily sluggish.
- andreizilla, on 10/12/2007, -0/+0Dude, this isn't anything new. I saw this on AListPart.com a long time ago.
The best way to drop that shadow, for me, is to use Javascript +CSS, so I can still do clean markup and let Javascript put the needed markup in the DOM. - riczho, on 10/12/2007, -0/+0legbend: That solution would probably be too slow for any larger site-- I think it's better to spend our time finding a clean way to it without fixed size images. (or wait for better CSS support in IE and use the :before/:after psuedoclasses or something)
- oni0n56, on 10/12/2007, -0/+0Honestly, the article isn't exactly complete. I mean to have the second part out soon, which will use javascript to hide all the extra divs.
As for the compatability issues, I've tested FFX 1.5, Opera, IE6 and IE5 and it works fine now... - andreizilla, on 10/12/2007, -0/+0http://www.google.com/search?hs=MjZ&hl=en&lr=&safe=off&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&q=css+javascript+shadow&btnG=Search ^^^
- webmaniac, on 10/12/2007, -0/+0A better version *without* the additional markup (with some javascript) can be found here:
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/ - maverick3x6, on 10/12/2007, -0/+0If you guys like things like this pick up "Bullet Proof Web Design" by Dan Cederholm, it's a must buy for Web Developers.
- thoand, on 10/12/2007, -0/+0++digg. I was going to build something similar tomorrow. Time saved :)
- riczho, on 10/12/2007, -0/+0Sourcer: As any more knowledgeable web developer would know, proper web design isn't about avoiding tables more than using semantic markup (using the most appropriate tags for their contents). What's wrong with those extra div tags is that aren't descriptive of their content, and are there for purely presentational purposes (CSS is for presentation, HTML/XHTML is for structure). This disgustingly unsemantic usage of div tags is pretty much just as bad as using tables (it isn't proper semantic markup).
- Sourcer, on 10/12/2007, -1/+1I think some of you are just completly ***** stupid....if you look at the code of the "octopus" engine you wont see a single table in there. Sure you might see a ***** ton of div's but guess what....the guy is CSS to completey render the page...unlike 95% of the sites you see today. So please tell me what the hell is wrong with DIV tags...
- thoand, on 10/12/2007, -0/+0The java script solutions are bad. They have to execute the scripts when the page is fully loaded. It looks odd when the borders are added after page load.
- nlogax, on 10/12/2007, -0/+0worst code i've seen in a while..
- oni0n56, on 10/12/2007, -0/+0Riczho: if you go there now, you'll see that there are no more extra divs! they're gone! its like magic! I was working on it when the digg hit... Anyways, sorry for all the hard feelings, it should be better now.
- inactive, on 10/12/2007, -0/+0Nothings wrong with divs, just that this isn't too practical. If you use tables to lay a site out nowadays, stop making sites.
- cavicster, on 10/12/2007, -0/+0I can't say that I like how it renders. It looks like the box is putting itself together.
- GLSmyth, on 10/12/2007, -0/+0"worst code i've seen in a while.."
No reason given.
"n00b action here, no digg"
Geez, you're far above everyone else here.
Dugg because of the idiot comments. - robche, on 10/12/2007, -0/+0anyone else see something funny when trying this link in Opera?
- recursive, on 10/12/2007, -0/+0oni, did you write that? If so, add a background color to the main page. It looks pretty nasty depending on your color settings. If you set a foreground color, (you did) you should also set a background color.
-
Show 51 - 55 of 55 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is 