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.
44 Comments
- munikho, on 05/21/2009, -2/+15i love this, but when will we be able to use this without losing half of our audience because of a very slow adoption by microsoft
- therippa, on 05/21/2009, -1/+12Actually, creating a style like this...
.shadow {
box-shadow:-20px -20px 5px #000;
-webkit-box-shadow:-20px -20px 5px #000;
-moz-box-shadow: -20px -20px 5px #000;
}
and applying it to your images/elements is significantly easier - domfosnz, on 05/21/2009, -1/+10Border images look useful.
- Turkman182, on 05/21/2009, -2/+10Very informative stuff here.
- Rantipole, on 05/22/2009, -1/+9At the current rate of things, IE version 36.0 might have patchy CSS3 support.
- mistergoomba, on 05/21/2009, -0/+7I hate that it takes so long to adapt new front end coding technologies!
- geoken, on 05/21/2009, -0/+7For a blog post that just reposts a bunch of content from other sites you'd think they could at least get the links right. The first one I tried (multiple background images) incorrectly linked to a font face embedding post.
- DeathRay2K, on 05/21/2009, -1/+6And here's where they took a bunch of the content from:
http://www.css3.info - 7m7uf, on 05/21/2009, -0/+5How long have i been waiting for this to be standard, again? Seriously, browser makers -- just gimme the embedded font thing right now -- that'd satisfy me for awhile while you work out the rest of it.
PS: "You won’t believe that these button are created using CSS3 properties only without any images."
Yep, i don't -- there's an overlaying png. - estacado, on 05/22/2009, -0/+4If my website uses CSS3, but the visitor's browser doesn't support it, does it degrade back to CSS2 or it is just broken.
- Radan, on 05/22/2009, -1/+5Screw IE6! If people are that stubborn that they still use that piece of garbage browser, then they can live without my CSS animations and fancy rounded corners. If you use an outdated browser then you will have to accept that you will not have an as pleasant experience as someone who uses a modern browser.
- dygel, on 05/21/2009, -1/+4Not like it matters if they start adopting CSS3... IE6 is still the third most commonly used browser out there.
http://www.adtech.info/news/pr-04-01-2009_en.htm - atgmac, on 05/21/2009, -1/+4Rubbish. Doing it with CSS is much better:
+ Fewer images means faster loading times
+ Text which is rendered by the browser as opposed to in an image can be selected, copied, etc
+ Text rendered by the browser can take advantage of conditional fonts and the OS's/user's font smoothing settings so it will blend in better
+ Finding and changing a single value in a CSS file is almost always faster than changing a .psd, exporting to .png and uploading - svivian, on 05/22/2009, -0/+3Damn right, no more nesting 5 divs just to make a box with rounded corners, border and shadow.
- cJw314, on 05/22/2009, -0/+3What's your best guess?
- dygel, on 05/22/2009, -1/+4That sounds nice in theory, but practical people who spend money on web design in the real world don't give a damn about your zeal. They care about getting their message to their customers, which means not ignoring 18-20% of your audience.
- 2blathe, on 05/22/2009, -0/+2hoorah! only 2 more years until we can use them. wheeee....
- gemlarin, on 05/22/2009, -0/+2I'm going with broken, I doubt it has graceful degrading built in.
Going to be using a lot of "if IE" commenting. - Radan, on 05/22/2009, -0/+2I prefer using RGBa for drop shadows instead of regular HEX, though, since then you are also able to set the opacity (alpha) of the shadow. Hence, the correct code would be something in lines of
.shadow {
box-shadow : -20px -20px 5px rgba(0,0,0,0.7);
-webkit-box-shadow : -20px -20px 5px rgba(0,0,0,0.7);
-moz-box-shadow : -20px -20px 5px rgba(0,0,0,0.7);
} - DeathRay2K, on 05/21/2009, -1/+3box-shadow: [inset] left top [blur [spread]] colour, ...
It's not rocket science, and it actually works on the web, unlike Photoshop. - Lane, on 05/22/2009, -0/+2I hoped this would involve valve somehow
- BasharTeg, on 05/22/2009, -0/+2Yeah, this will be really useful when CSS3 becomes a completed standard.
- 2blathe, on 05/22/2009, -0/+2probably not as much the users fault as you might think -- corporations that employ millions typically are still running legacy internal apps that only run correctly on ie6, upgrading these systems is probably in the billions of dollars. ie6 will be around for 2 more years at the least.
joy. - svivian, on 05/22/2009, -0/+2"Degrading back to CSS2" is a nonsensical concept because CSS is backwards compatible. All the CSS2 rules still stand and don't change, so if a browser doesn't support a rule, whether it's CSS3 or CSS2, it just won't apply it.
- eh270, on 05/22/2009, -0/+2Die, IE, DIE!
- epalla, on 05/22/2009, -0/+2had me at multiple background images.
Too bad compatibility reasons will keep this on the back burner for most developers for years even after it's well-supported by browsers. - gemlarin, on 05/22/2009, -0/+1I never seemed to have problems with footers. Clear float usually takes care of 99% of footer issues unless your talking about something specific that I am not getting.
- loconet, on 05/22/2009, -0/+1As expected, all these include the obligatory.. "Except in version X or Y, or Z of IE. Or you need this hack to allow IE to work".
- cJw314, on 05/22/2009, -0/+1Yeah, but that's because you're a dork.
(I kid, I kid... put down the knife.) - 7m7uf, on 05/22/2009, -0/+1@2blathe
That's my situation. My place of work will not allow anyone to upgrade past 6 -- but i installed chrome, firefox and safari -- so far i'm using chrome a lot at work and firefox mostly at home. Safari i like to use when reviewing the webpages i make -- that text renderer they use is damn nice. - hackiavelli, on 05/22/2009, -0/+1A lot of interesting features (and some potentially problematic ones like font embedding) but unless CSS addresses its fundamental difficulty with layouts it feels like a lot of window dressing. Stuff that's trivially easy with tables (like footers) is a huge headache with the css box model.
- kateharp, on 05/22/2009, -0/+1great!
- spukeesan, on 05/22/2009, -0/+1That's entirely up to you, estacado. Progressive enhancement means getting your site to work on the lowest common denominator first (ie., IE6), then adding in the nifty CSS3 features for the browsers that support it.
- hackiavelli, on 05/22/2009, -0/+1Unless there's a method I don't know about getting sticky footers in CSS requires several lines of (incredibly unintuitive) code. You get bizarro stuff like body wrappers, negative margins, plus the usual IE hacks.
I remember when a method came out that required "only" 15 lines of code. That's CSS in a nutshell: developers having to use complex hacks to get simple things like sticky footers and vertical centering to work.
And I'm someone who actually believes in the idea of separating content from design and spent a lot of time moving a number of table layouts to CSS. The *idea* is sound. It's just the tools that are piss poor. CSS is great at styling but very lacking for layouts.
And I think the sooner developers acknowledge those shortcomings the sooner we can get something better to work with. - svivian, on 05/22/2009, -0/+1Opera 10 (currently in alpha) alreayd has this. I wish all the browser vendors would support the bigger CSS3 stuff (without the silly -moz/-webkit prefixes) like border radius, border images, fonts, multiple backgrounds and columns.
- mrsteveman1, on 05/22/2009, -3/+4I do web design for a few sites, and i just don't care if IE6 displays the site correctly, neither do the site owners. IE7 and IE8 are both out, if you're still using IE6 and can't see web pages, it's your problem.
- kierucom, on 05/22/2009, -0/+1For all the IE haters... yeah IE doesn't support all of this yet; but then in truth neither does Firefox, Chrome, or Safari. Those clever little things like -webkit and -moz ... those aren't 'true' CSS tags. Those are basically placeholder tags to allow developers to play with the technology before it becomes truly supported.
So when you see it say "Does not work in IE" that just means IE isn't using WebKit of Mozilla engines. No surprise there. - geoken, on 05/21/2009, -1/+2"Way more effective" as in your design breaks if you need to add more than x amount of text to an element?
- gemlarin, on 05/22/2009, -0/+1Oh, I agree with you 100% on the short coming in web design, but I have found that to be true of most design tools in general. Much of the issues with web design in general just boils down to the failure of browser standards, although that is slowly improving.
In the mean time, sticky footers will continue to be a pain in the ass.
Actually, I am surprised that sticky footers was not address so far in CSS3, nor tackled by the W3C, being how important an issue it is with web design. - SargoDarya, on 05/28/2009, -0/+0Alright. You know what I love about this? HOW MANY BROWSERS WILL BE ABLE TO DISPLAY THIS FULLY?!
- serif69, on 05/21/2009, -2/+2If you don't know what the drop shadow should look like by the time you start coding it, you need to take a look at your design process.
- inactive, on 05/21/2009, -1/+1I agree
- annjay, on 05/21/2009, -3/+2I must say its a wonderful collection of useful tutorials about CSS3...
- mapdesigns, on 05/21/2009, -14/+6I don't want to search through tons of code just to change a drop shadow. Double-clicking an icon in PS is way more effective and time saving.
© Digg Inc. 2009
— Content created and posted by Digg users is