Discover the best of the web!
Learn more about Digg by taking the tour.
30 Exceptional CSS Techniques and Examples
sixrevisions.com — Excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You ’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more - all using only CSS and HTML.
chris1234- 1853 diggs
- digg it
- blazingbunny, on 04/25/2008, -11/+5Cool! Thanks for sharing, I'm always looking for good designs sites. Drop shadows with css only is so nice....
- boobyman, on 04/26/2008, -1/+6Instead of coding, why not putting a drop shadow in photoshop?
- BlueCadenza, on 04/26/2008, -1/+2Because IE 6, which many basic users still have, does not support PNG transparency. And I KNOW you're not suggesting using a jpeg page element with a pre-made dropshadow.
- phpchris, on 04/26/2008, -0/+2It uses a PNG image.
- Pherdnut, on 04/27/2008, -0/+2Why use an image when all you're loading is a few lines of text?
- BlueCadenza, on 04/26/2008, -1/+2Because IE 6, which many basic users still have, does not support PNG transparency. And I KNOW you're not suggesting using a jpeg page element with a pre-made dropshadow.
- boobyman, on 04/26/2008, -1/+6Instead of coding, why not putting a drop shadow in photoshop?
- thoatt, on 04/25/2008, -17/+1Oh *****....... I lost the game.
- Lyk4n, on 04/25/2008, -6/+1What the hell?! CSS makes you lose the game? My friends and I lose the game whenever someone does something gay..
- metalgel, on 04/26/2008, -0/+1damnit now i just lost the game!
- McDiggity, on 04/25/2008, -7/+4good stuff
- farkis, on 04/25/2008, -32/+3I love this technique:
http://www.youtube.com/watch?v=oHg5SJYRHA0
It's a good place to start.- Lyk4n, on 04/25/2008, -0/+31Every time one of you tards does this, I know it's a roll and I click and watch it anyway. Because I love Rick THAT much..
- PolishLogic, on 04/25/2008, -3/+1You could always counter with meatspin or fingerslam.
- ElBeh, on 04/25/2008, -2/+3Fingerslam?
Wait, no, nevermind, I don't want to know...- PolishLogic, on 04/25/2008, -0/+4You'd never look at humanity the same way again.
- Lyk4n, on 04/26/2008, -0/+4Oh my god! can I die now please?!
- PolishLogic, on 04/27/2008, -0/+1It's nice to see a rickroll devolve into mayhem.
- ElBeh, on 04/25/2008, -2/+3Fingerslam?
- PolishLogic, on 04/25/2008, -3/+1You could always counter with meatspin or fingerslam.
- RevoFM, on 04/25/2008, -0/+4Never gonna run aRHA0nd and desert you
- Asianwaste, on 04/26/2008, -0/+1Man if it's a youtube link, it's a dead giveaway. At least look outside of youtube to be more believable.
- aristideau, on 04/26/2008, -0/+3HUH? your should double check the link farkis, the one you posted is a link to a Rick Astley video clip
- farkis, on 04/27/2008, -1/+1Whoopsie, my mistake, I meant this one:
http://www.youtube.com/watch?v=Yu_moia-oVI- aristideau, on 04/27/2008, -0/+2OHH, I get it, make out you are linking to something, then trick the person into watching a Rick Astely video clip
It will never catch on
- aristideau, on 04/27/2008, -0/+2OHH, I get it, make out you are linking to something, then trick the person into watching a Rick Astely video clip
- farkis, on 04/27/2008, -1/+1Whoopsie, my mistake, I meant this one:
- Lyk4n, on 04/25/2008, -0/+31Every time one of you tards does this, I know it's a roll and I click and watch it anyway. Because I love Rick THAT much..
- UGM2099, on 04/25/2008, -9/+2fugly
- ChiffX, on 04/25/2008, -15/+5So wait, this isn't about Counter-Strike: Source?
I need to brush up on my acronyms!- Asianwaste, on 04/26/2008, -0/+5STFU GTFO
- ElBeh, on 04/25/2008, -4/+56I'm not a site designer, but I'm digging this because I hate looking at ugly websites.
- Mootabolife, on 04/26/2008, -2/+2The best tip they forgot to mention. Make sure to aim at the waist, that damn ak recoil is tough to master. Oh.. cascading style sheet.. whoops.
- djambo, on 04/25/2008, -9/+2Old news. :)
- ngageguy, on 04/25/2008, -7/+1247 diggs and the site was down.
- Daniel591992, on 04/26/2008, -0/+2That's a lot of diggs.
- bobbygreer, on 04/26/2008, -2/+0Yea looks like their host just can't take the load, the slashdot effect but from digg....
- talonstriker, on 04/25/2008, -8/+5To be honest, I found most of the CSS techniques annoying. Most of them don't transition, e.g. the image hover one immediately gets bigger when you mouseover. When that happens it usually takes a me few millisecs to figure out WTF happened...which is annoying. If the image got gradually bigger, the esthetics would be better and the annoyance factor would go way down.
- killfish, on 04/25/2008, -2/+10well they are poorly written javascript/css plugins. not css techniques.
Download jquery, learn it, use it, and read up on some solid css tutorials. In a couple of months you will be able to write your own annoying plugin. - Asianwaste, on 04/26/2008, -2/+1You just gotta get used to it. It takes a while to get used to it and yea CSS is definitely not going to be the end all be all to design solutions on the web. But it's better than most solutions for layout designs.
- killfish, on 04/25/2008, -2/+10well they are poorly written javascript/css plugins. not css techniques.
- pika2, on 04/25/2008, -3/+14http://duggmirror.com/
- RevoFM, on 04/25/2008, -1/+12Holy crap, they actually got it?
- talonstriker, on 04/25/2008, -4/+14miror: http://64.233.169.104/search?q=cache:http%3A%2F%2F ...
also may I suggest: https://addons.mozilla.org/en-US/firefox/addon/257 ...- debuggercll, on 04/25/2008, -0/+1Thank you.
- YourSexyMama, on 04/26/2008, -1/+3I appreciate it, but who is still using a FF2 and below?
- Owwmykneecap, on 04/25/2008, -8/+231. Make Love and Listen to Death From Above. (1979)
http://www.youtube.com/watch?v=nYRAvNp_Llw - macplenty, on 04/25/2008, -5/+6Are there any CSS techniques to keep their server up?
- ahawks, on 04/25/2008, -0/+6#32. Make sure your server can handle the load before getting it on digg
- Frozenfuryblade, on 04/25/2008, -0/+17And 1 bad example of web hosting...
- spectecjr, on 04/26/2008, -24/+2CSS is still a badly specified, lousily designed, obtuse piece of crap. It's not useful for layout - tables work better.
- dyranios2, on 04/26/2008, -1/+5wait what
- depape0, on 04/26/2008, -1/+6thanks for the info 1999!
- aywwts4, on 04/26/2008, -1/+11I like to think I have a pretty good sarcasm detector, good range, high accuracy, with a great high gain antenna and preamp...
Are you being ***** serious?- spectecjr, on 04/26/2008, -4/+3Yep. I can get a layout going in a few seconds using a table. With CSS, not only is there a good chance that it won't handle resizing the page correctly (unless I force the content to fixed-width), but modifying the layout later becomes a total chore. Never mind ensuring that it all works fine in different browsers.
Who designed the DIV layout algorithm with its horrible float: implementation? They could have taken a page from the DTP guys who've been doing this for the last... oh... 24 years or so, or even done something quite simple which would have handled 90% of the cases people want to use CSS for, and done a tic-tac-toe grid layout. (3x3; corners don't stretch, top, bottom, left & right only stretch along their axes, center fills to fit content or fixed size). Heck, combine the two, and you have an intelligent, easy to understand layout model, not the crap that was foisted on us with CSS's DIV support.- visionaryIX, on 04/26/2008, -1/+3Holy crap. He is serious.
Minor problem. Tables aren't designed for layouts.- spectecjr, on 04/26/2008, -2/+1They're more effective than the CSS equivalent, which isn't designed for serious layout tasks either.
Look, I'm not the only one who believes this - Jon Nagle (you know, one of the forefathers of the Internet) also believes this. Do a web search.
- spectecjr, on 04/26/2008, -2/+1They're more effective than the CSS equivalent, which isn't designed for serious layout tasks either.
- moresheth, on 04/26/2008, -0/+3You're being buried because you're speaking an unpopular opinion, and I disagree with what you are saying, but I dugg you up because you presented your argument well.
I've been doing CSS-only layouts for close to 4 years now (and table-only layouts for 6 years before that), and I have all sorts of battlescars from the long fight with browser support, non-standard hacks, and random, unexplainable bugs. I'm confident to say that I've mastered my CSS skills and there isn't much I haven't seen before. I'm only mentioning this because it may lend credence to my opinion on the subject.
Everything you said about using tables for layouts is correct. It can be very quick and easy to make columns and sidebars, and format information with a specific precision. When combined with regular CSS techniques, nearly every classical layout (like in print) is possible. Depending on how you write the structure, it can even be less markup.
However, the ease of coding is only a small part of why not using tables for layouts is a good thing. There are quite a few other reasons not to do so.
One of the oldest arguments against it is maintainability. It's easier to update one external file than hunt down code changes in your template files. This applies in most cases, but since a lot of sites are template-driven dynamic sites, changing out a bit of markup is just as easy as adjusting a stylesheet. But if there are static pages anywhere in your site, it is huge mistake not to be using an external CSS file for positioning and styling. You'd just be asking for trouble.
Flexibility is the next biggest reason for using CSS-based layouts. The beauty of external CSS is that you can switch out stylesheets at any time to present the information in a completely different way. This may sound entirely useless, since very few sites would want to completely change their layouts rapidly, but the real value in it comes from media type switching. You can have a stylesheet for the screen, which is how most people will see it, and then one for handhelds, like PDAs, and then one for print, which has useless links and needless information removed.
Third reason is DOM scripting, as in Javascript. There's not much to say other than if you plan on having a lot of Ajax, you better learn to accept CSS layouts. I don't think this point's up for debate.
Fourth reason is interaction with third-parties, whether through mashups, widgets, or cobranded pages. I know the benefit of this as I've been working on a cobranded page for the last 2 weeks. Using a CSS-based layouts has allowed me complete control over less-than-perfect third party code.
Fifth reason is semantics, which I guess every argument about the web boils down to ("It's all semantics"). You mentioned that Jon Nagle believes table layouts are good. Well I can probably find you entire papers written by Tim Berners-Lee (you know, the guy that invented the World Wide Web and is the bossman for the W3C) which contradict Nagle's position. I don't have references included, but I know I've read lots of stuff he's written or said and there's no doubt about it. Semantics are (finally) becoming more and more relevant and not using semantic markup is just plain silly for a new website in 2008.
I know there were one or two other reasons that I've thought of or used when talking with clients or coworkers, but I can't recall them now. I've written too much as it is, anyway.
- visionaryIX, on 04/26/2008, -1/+3Holy crap. He is serious.
- iammatt00, on 04/26/2008, -0/+0While I'll agree that handling of float does leave a good bit to be desired, you're whole argument of modifying a CSS based layout being a chore is laughable to say the least. Furthermore, quicker to code a tabular layout which requires 400% more code, I don't think so.... but anywho, carry on!
- spectecjr, on 04/26/2008, -4/+3Yep. I can get a layout going in a few seconds using a table. With CSS, not only is there a good chance that it won't handle resizing the page correctly (unless I force the content to fixed-width), but modifying the layout later becomes a total chore. Never mind ensuring that it all works fine in different browsers.
- jtbandes, on 04/26/2008, -0/+4TABLES ARE FOR TABULAR DATA
RRAAAAAAAAAHHHHHHHHHHHHHHHHHHGGHHHH - Spuy767, on 04/26/2008, -2/+2Tables actually work quite well for layouts. CSS is better, but if you know what size your page will be viewes in, tables are boss.
- Asianwaste, on 04/26/2008, -1/+1If you know what you are doing with CSS, you have far more control over layouts than nested tables. Tables can be a garbled up mess and aren't very accessible with screen readers. CSS and Divs offer cleaner code, control, and consistency.
- spectecjr, on 04/26/2008, -1/+1I'd love to not have to use Tables, but CSS and DIVs really are not a good solution either. They're more error prone than the equivalent table solution, ignoring the accessibility issues - which, unfortunately, CSS and DIVs don't solve either because you end up rearranging your content into a somewhat illogical order the moment you try to do anything more complex - like an adjustable 3 column layout.
What I'd like to see is something like this:
#define box.main {
size: tocontent;
top-left: image="tlcorner.png" align="bottom-right";
top: image="tltop.png" align="bottom";
top-right: image="trcorner.png" align="bottom-left";
left: image="leftside.png" align="right";
right: image="rightside.png" align="left";
... and so on.
In the page code, you'd have:
This is my content... it fits the space, and look, it has drop-shadows on the bottom right, etc.
Think of it as a recursive space-slicing algorithm, with a 3x3 grid with cells that can be merged. With a little bit more thought, you could even split the page into styles, layout and content, and truly have the page content independent of the layout information.
- spectecjr, on 04/26/2008, -1/+1I'd love to not have to use Tables, but CSS and DIVs really are not a good solution either. They're more error prone than the equivalent table solution, ignoring the accessibility issues - which, unfortunately, CSS and DIVs don't solve either because you end up rearranging your content into a somewhat illogical order the moment you try to do anything more complex - like an adjustable 3 column layout.
- Ender0910, on 04/26/2008, -1/+2Some neat stuff in there but a lot of repetition (we get it, you can change styles on hover). Plus, some are sacrificing ease of developement and use just to be "pure css!"... like the percentage bar graphs. I don't think it's ideal or very reusable to create a new stylesheet class every single time you need a new percent value displayed...
But it's always nice to check out some other people's code. - ChunkyLover36, on 04/26/2008, -1/+8I still see references to IE 5 on the Mac and all the hoops web designers have to jump through just to play nice with it. Doesn't seem worth the pain for remaining three users that still use it.
- ChaosKing, on 04/26/2008, -2/+3Good collection. Very interesting and neat things done here.
- sheebz, on 04/26/2008, -4/+4Meh, pretty basic stuff there, not really that applicable for most web sites.
- benbfree, on 04/26/2008, -1/+3I'm glad this made the front page, it hasn't been on the front page of Digg for a few months, I was starting to lose faith in Digg's repetition.
- knight666, on 04/26/2008, -6/+5www.csszengarden.com
First you think: "Man, that's pretty. I should start using div's too."
Then you think: "***** this is hard."
Finally you think: "***** div's, I'll just go back to tables."- Adys, on 04/26/2008, -2/+7Divs are easier than tables :/
- killfish, on 04/26/2008, -1/+1everything you learn, you learn on a curve. css takes a little bit to get under control but once you master it you'll say, "***** tables I can't believe I used these to layout my webpages."
Check out http://www.digital-web.com/topics/css they have really well written tutorials/learnings to help you jump from table layout to div layout.
Cheers- Pherdnut, on 04/27/2008, -0/+1Too many people try to figure out how CSS positioning works without understanding normal flow (the way it all works with straight HTML). I can't believe how long it took to find a reasonable description of block vs. inline elements when I was sorting it out for myself. The best any designer who is struggling with the coding aspect of web design can do is put away Dreamweaver and learn to code by hand, IMO.
- Pherdnut, on 04/27/2008, -0/+1Not a lot of new stuff but I liked the graphing ideas.
- gkriv, on 04/27/2008, -0/+0Very useful CSS examples. These techniques extend the use of good design. Keep up the good work.
- monalisaa, on 04/28/2008, -0/+1er ... the bar chart dosn't work for me. The 80% and 100% both go right up to the end, and 40% looks like more than half to me ....
- smthomas2008, on 04/29/2008, -0/+0Thanks dude, its really good & appropriate stuff for new comers. I can imply for my site. :-)
http://www.semaphore-software.com - sleekdraft, on 05/02/2008, -0/+1great stuff! =)
- giantkicks, 6 hr 32 min ago, -0/+1This is a great link. Thanks for posting it!
© Digg Inc. 2008 —
Content posted by