digg

Join DiggAbout

The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.

10 Challenging But Awesome CSS Techniques

nettuts.com — In this post we're going to outline 10 awesome CSS techniques for web developers who know their stuff.

show profanity settings
expand all
  • BorsKaegel, on 09/02/2008, -5/+3Very awesome tips! I am going to work on storyboarding utilizing that blur effect for my next site design.
    • TheKingInYellow, on 09/02/2008, -1/+4i'm so glad to know what you're doing...thanks for sharing.
  • ChestRockwell, on 09/02/2008, -0/+10Some of these were pretty interesting (#4), but I wouldn't call them challanging, they are just different from what we normally do, which is great.

    On a side node: I went to An Event Apart in NYC a year or two ago and Eric Meyer showed off using turning tables into bar graphs with CSS only and we collectively ***** our pants in awe.
    • bobpotter, on 09/02/2008, -0/+1Do you have an example of what Eric showed you? I'd be very interested in seeing it. Thanks in advance!
      • ChestRockwell, on 09/02/2008, -0/+2I can't specifically give you that code, it was in the slides that we were given at AEA and I don't believe they wanted us to make those public, BUT he did post a couple examples to his website that you can use:
        - Demo: http://meyerweb.com/eric/css/edge/bargraph/demo.ht ...
        - Article: http://meyerweb.com/eric/thoughts/2005/12/20/bar-g ...
        Edit: it's the exact same code
      • pfranz, on 09/02/2008, -0/+1Using the same examples listed in the article as a reference, I implimented something like this, but with a little more complex of a layout for an internal project a year or two ago. It was a huge pain to get it working even in our one browser. Anything except the most basic of graphs are better suited for something like SVG, flash, or a dynamically created image.
  • bobpotter, on 09/02/2008, -5/+0As someone who is constantly seeking to learn new things, this is great!
  • Whitey07, on 09/02/2008, -4/+19Dugg for CSS.
    • FUR10N, on 09/03/2008, -1/+2CSS as in cascading style sheets, or CSS as in Counter Strike: Source?
  • tweetsa, on 09/02/2008, -8/+3one thing i like to do in CSS is bunny hop. You don't see many bunny hoppers in CSS because the timing is so hard, that's why i use an autoit script to spam the jump command. With a ramp, I can get up to 10x the normal running speed.
  • DrenT, on 09/02/2008, -2/+9Already down... That sucks lol
  • mctom987, on 09/02/2008, -1/+6Challenging generally means it doesn't work the same in all browsers. Mostly just IE.
    • FUR10N, on 09/03/2008, -3/+1i bet it works in Google Chrome.

      w00t! google chrome for the win
    • DragoonWraith, on 09/03/2008, -0/+1No, the 'innovation' is getting it to work in something (pretty much anything) that's NOT IE, and then the 'challenge' is getting it to work in IE.

      IE is just terrible. Maybe IE8 will be better, but I remain skeptical.
  • Condemned, on 09/02/2008, -1/+3Anyone have a mirror?
  • Zaneris, on 09/02/2008, -0/+5Mirror: http://nettuts.com.nyud.net/html-css-techniques/10 ...

    Slow... but works.
  • nmnnotmyname, on 09/02/2008, -2/+13I love CSS development...
    It's refreshing, though I do get those ugly urges to do tables for some reason.

    Now if only this page would load. :\
    • AngelaQ, on 09/02/2008, -4/+1It looks better without the stylesheet.
  • MrCobaltBlue, on 09/02/2008, -7/+4I can dance all day! I can dance all day! just try hittin' me! just try hittin' me! BOOM Headshot!

    Oh wrong CSS...
  • phocis850, on 09/02/2008, -1/+19#3 - that is not a reflection. Try again.
  • Aidanjalali, on 09/02/2008, -0/+1'As someone who is constantly seeking to learn new things, this is great!'....

    FYI, the people that just interviewed you probably won't be checking your Digg account.
  • Paranoidmarvin, on 09/02/2008, -0/+1Some pretty interesting stuff there, I wonder what I can apply to my own blog without it becoming overblown with pointless eyecandy!
  • dropbox, on 09/02/2008, -0/+1Be aware that "document.write" is no longer available when using XHTML, as it can introduce non-well formatted code into the page. So a couple of these tricks may not work for long, if at all.
  • kru1e, on 09/02/2008, -0/+8This was pretty stupid. Most of this stuff is simply changing the background position on hover, nothing really challenging. And #3 isn't a reflection.
  • darkane, on 09/02/2008, -0/+13I'm getting tired of seeing that blurry menu on "zOMG RLY OSSOM CSS" lists. Under no circumstances should you make it difficult for the user to read the rest of the navigation menu.

    Using PHP to dynamically produce content is not CSS.

    Aside from having some different styles, changing your layout based on the time of day or weather has nothing to do with CSS.

    A simple bar graph using CSS and background images is not new or challenging.
  • silviupostavaru, on 09/02/2008, -1/+1Are these supposed to be challenging and awesome? Weak attempt.
  • timeisapear, on 09/02/2008, -0/+5more like "use dynamic languages to output one word of css"
  • derble, on 09/02/2008, -0/+2Neither challenging, nor awesome. Discuss.
  • lulzitsadigg, on 09/02/2008, -4/+2CSS? What is this, Digg circa 2004? GIVE ME MORE ***** PALIN STORIES
  • TyrantJoe, on 09/02/2008, -0/+1Damn, I thought this would help me get better at Counter Strike...
  • cgrado, on 09/02/2008, -0/+1Awww.. I thought I was going to get tips for low grav super jumping...
  • Phoetality, on 09/02/2008, -2/+41. Make use of the radar, see where your teammates are dying and take that into account in your movement.

    2. If you run out of ammo in your primary, switch to your pistol until such times as you can reload and be safe doing so.

    3. Flashes and smokes are very effective in breaking eye flashpoints on maps.

    4. When aiming with most of the weapons, it is is best to aim high-chest region and fire a burst of 3-4, the first 2 will hit top chest and the last bullet will almost certainly be a headshot.

    5. You should try all the weapons, but you'll find that you'll either be most proficient with the AK, M4 or AWP. Therefore these are the weapons you should train with the most.

    6. Don't just play the 1 map. Playing a range of maps improves your overall awareness, and will help you adapt to difficult circumstances even in maps you know very well.

    7. If you can afford to walk, do so. However remember that a moving target is also harder to hit. Try and find the right balance.

    8. Communicate with your team. The team who is better organised is always the one who wins.

    9. Defusal kits are only $200, and WILL make the difference between winning and losing sometimes. You can always afford at least 1 in your team.

    10. Don't spend ridiculous amounts of time and money getting gaming mice and keyboards, or using "pro" autoexecutables. If you don't have the underlying ability, then they won't make much of a difference. No matter how much you practice, 95% of you will never turn pro.

    Hang on a minute, what CSS are you guys talking about?
  • dogshaft, on 09/02/2008, -0/+2Jeez, how old is this? I seem to remember maybe this exact same list showing up on digg over a year or two ago.
  • aptiva, on 09/03/2008, -0/+2Talk about disappointment...
  • Knowltey, on 09/03/2008, -0/+1Nice techniques, too bad the way they did most of them isn't able to be validated as CSS of any level. Pop a couple of those into the CSS validator and see what comes out.
  • kien64, on 09/03/2008, -0/+0Awesome. Always nice to find new css tricks.
  • theadvinci, on 09/03/2008, -0/+1As far as I know some of them don't work in most browsers. Better stick to the old boring CSS that still works and looks as good or even better than this.
  • PaleoDigger, on 09/03/2008, -0/+0Nobody to even mentioned how BAD it is to put your text into images. Afterall, not everyone in the world speaks English (or wishes to). When you have to do real apps, that span international boundaries...like....i dunno, the WEB, you learn how bad embedding text within images becomes.
  • worldnick, on 09/03/2008, -1/+1I make whatever I need with CSS on the fly because I understand it. Isn't that the point to make it easier to code what you want? If a technique is too difficult then don't use it. It will break easier in the future. The more I see stuff like this the more I smell old school tables and alignment complexities.
  • padiq, on 09/03/2008, -0/+1WTF!? ... Why are people digging this? I swear there are just a bunch of noobs who digg something within seconds if it has the "CSS" in the title! Grow up! - These techniques are nothing new!
  • WebmastersHelp, on 09/03/2008, -0/+0Good article on CSS. Especially enjoyed reading more about "Illustration-based layouts".
  • socme, on 09/04/2008, -0/+1Rounded corners is always something I've wanted to accomplish - maybe now
  • corporatebee, on 09/05/2008, -0/+2nice, now if only I could get a handle on HTML and a trick for rounded corners YAAY
  • campodiez, on 09/05/2008, -0/+0Looks great, I'm certainly going to pick some to try!
  • simplyarun, on 09/16/2008, -0/+1If it can't handle IE6 it ain't no CSS. Half the world uses IE6.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.