digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

Powerful CSS-Techniques For Effective Coding

smashingmagazine.com — In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. Some technique is missing? L

Bury
show profanity settings
expand all
  • tablelegs, on 02/22/2008, -2/+3013. Rediscovering the Button Element
    Love this tip; not many people are aware of the power that css has over buttons. Great article, thanks.
  • Kinsbane, on 02/22/2008, -0/+19Styling the input file form was what did it for me. Dugg!
    • mitch37, on 02/22/2008, -0/+1Agree. Never knew this, file inputs were always the devil. I always wondered how GMail did it with no form.
    • Canute, on 02/22/2008, -0/+2Too bad it didn't work quite that well on opera though.
    • NovaPrime9, on 02/22/2008, -1/+12So then all nine of you that use Opera are out of luck.
      ;)
  • MrB398, on 02/22/2008, -5/+6Good find ... I don't think you can ever learn enough new things when it comes to CSS
  • mitch37, on 02/22/2008, -3/+101Great list. I have really missed articles like this on Digg.
    • Verdanic, on 02/22/2008, -2/+3That's Smashing Magazine for you. Beautiful.
    • fahrvergnuugen, on 02/22/2008, -0/+6I miss all the people bitching that there are too many CSS / AJAX articles on digg.
  • fxu1989, on 02/22/2008, -10/+19The obligated CSS-related story of the day.

    Now, where's the Mario and Scientology ? ... Probably a bit early.
  • timisondigglol, on 02/22/2008, -0/+6That CSS pre-processor is genius. (#3) The nested structure makes way more sense than the way CSS is structured today.
    • MagicBobert, on 02/22/2008, -1/+3To bad his site was ***** ugly.
      • ciphex, on 02/22/2008, -1/+3it's much better at different times... he has some kind of engine that drives the color variables. the site scheme evolves over time according to variables like season and time of day i believe. you're right though, that white on orange is def hard to read.

        Inman is a great coder though, read his stuff. You will learn. And If you haven't checked out Mint do so: www.haveamint.com
  • hadak, on 02/22/2008, -0/+2I tried adapting that CSS dock a while back. I wanted it to stay static at the bottom of the page as you scrolled down. I'm not wizard at CSS, and the problem I was having is that when you scroll down, the dock stays in place, but the target moved with the rest of the page. Essentially, when you scrolled down half way, the bounding box would be in the middle of the page. Very strange. I think that site is still up (albeit abandoned) here: http://www.anchorsciencefun.com/new_site/
    • darkmotion, on 02/22/2008, -0/+1Weird. Tried sitting it in a transparent div with a high z-index?
    • MalDON, on 02/22/2008, -0/+1Works fine in FF2
    • Firehed, on 02/22/2008, -0/+1So you wanted a frame, basically?

      You could always try an absolute positioned element and move it around with the top/bottom attributes, but just use a Sticky Footer (search for it, it's the first result).
    • actionscripted, on 02/24/2008, -0/+1Use the jQuery UI.
  • MagicBobert, on 02/22/2008, -0/+2#9 reminds me of the days when mystery-meat navigation was a problem. I'm not sure if we should be bringing that back...
  • Dunhamzzz, on 02/22/2008, -8/+5In related news, "Powerful Hosting-Techniques For Effecting Hosting"
  • ciphex, on 02/22/2008, -1/+22excellent list. lord how i wish more gems like this made it to the home page these days.
  • eightfivezero, on 02/22/2008, -0/+13I like how half of the techniques listed make use of javascript.
    • SlechtValk, on 02/23/2008, -0/+1using javascript is in some circumstances not so bad... if the result works without it... the first thing i do when i see a css tutorial is test it in opera with javascript disabled...
  • darkane, on 02/22/2008, -3/+4Normally I like Smashing Magazine articles, but some of these are the most obvious CSS solutions for everyday issues that have been written about and discussed endlessly for years, while others are just awful implementations of ideas that have no place on websites, period.
    • DarkDx, on 02/22/2008, -0/+1What are these "awful implementations" you're talking about (honest question).
    • HigherLogic, on 02/22/2008, -0/+1I dunno, I've been working with CSS for over 8 years and enjoyed the pre-processor bit at the top.
  • brocej, on 02/22/2008, -0/+7I can just see someone designing a site that uses all of these techniques at once and then wondering why it looks crap.
    • Firehed, on 02/22/2008, -1/+1<blink>I agree!</blink>
    • SlechtValk, on 02/23/2008, -0/+1i don't see that... that's like painting a picture with all possible painting techniques... and what website uses a dozen menu's...
  • Thex1138, on 02/22/2008, -3/+2brilliant
  • rikwakefield, on 02/22/2008, -3/+2Thank you! A list that doesn't profess to be the "BEST EVAH!".
  • kingo123, on 02/22/2008, -1/+2Nice one! I can use some of these techniques, many thanks!
  • treelovinhippie, on 02/22/2008, -7/+45The best technique would be to anal probe all of the developers behind all of the IE versions and attempt to find out what kind of incompetent douchebags could create such a painfully horrible piece of ***** with standards compliance comparable to that of George Bush and the American public.
  • ufia, on 02/22/2008, -7/+2I like coding in CSS regularly. But the fanboys urging us to avoid tables at all cost are like vegetarians telling us to stop eating meat. The table tag is still valid HTML, and is not going to be deprecated any time soon, so you bunch of CSS homos stop trying to be XML wannabes, you are not fooling anyone.
    • kohner86, on 02/22/2008, -2/+4I totally agree, there are some things tables are just easier to do with rather than using divs and css.
      • SlechtValk, on 02/23/2008, -0/+1tabular data maybe...
        and not only easier, but just better...
    • darkane, on 02/22/2008, -0/+8Nobody says avoid tables at all cost. They say to use tables for tabular data, which is what they were made for, and to use CSS for formatting, styling and layout. Also, CSS and XML are completely different things, and you can't "try" to be a wanna-be.
    • greeniemeani, on 02/22/2008, -1/+0Correlating CSS with XML? Fail.

      Divs are much cleaner than having to find where in the source a table ends amongst 5 closing td,tr,table tags all on one line.
  • talonstriker, on 02/22/2008, -1/+1dugg for mac-like dock.
    But why isn't digg allowing me to favorite this? *cries*
  • yivkX360, on 02/22/2008, -8/+2penis!
  • dyranios2, on 02/22/2008, -10/+3CSS? More like kiss my ASS
  • Jektal, on 02/22/2008, -4/+19The first 3 techniques are all inaccurate.

    1. This isn't 3D, and isn't anything that couldn't be accomplished easier and with less round-trip server fetches with 1 image. If the 3 images scrolled at different rates, then you'd have something.
    2. This has nothing to do with CSS and is just about using PNG's support for alpha-layer transparency and IE finally supporting rendering of it.
    3. Again, this isn't about CSS, it's about using server-side scripting, namely PHP.
    • animeguru, on 02/22/2008, -0/+6So I'm not the only one that was perplexed by some of these 'techniques.'

      I stared at the first one wondering why the ***** they didn't just make it one image. If they'd scrolled seperately with some JS, that would've been fantastic, but stacking three images together when one would do the exact same thing seems like a waste.
      • ecidnac, on 02/22/2008, -0/+1Maybe they expect the user to sit there and constantly adjust the width of their browser window? I stopped reading this article after checking out #1.
    • infiniteduck, on 02/22/2008, -1/+2Woot! Glad I'm also not the only one. I wouldn't call half of these css 'techniques' but more design 'techniques'.

      Also don't let your website depend fully on javascript. A lot of people like to turn it off. Seeing a site fudge up because the whole thing requires javascript is just bad programming IMO.

      Another point. Sure IE finally displays pngs correctly, but guess what? A lot of people don't like IE7 and still use IE6. I still have to design all the sites I work on fully compatible for IE7, IE6, Firefox and Safari, because our clients use any of the 4 browsers, and I don't like getting emails/phone calls about how the layout isn't displaying correctly.
    • cdfmrl, on 02/22/2008, -0/+1For #1: The three images repeat at different rates, and they're aligned in different ways. It looks cool if you resize your browser window, you should see the images moving. Other than that, you're right, because how often do you resize your browser window when you go to a new page? It's a neat idea, but a bit pointless.
    • SlechtValk, on 02/23/2008, -0/+1"The first 3 techniques are all inaccurate."
      That's not true... maybe the title is not accurate, and should read Design-Techniques instead of CSS-Techniques... but those techniques are accurate... and some are very good IMHO.
  • raymondgoho, on 02/22/2008, -1/+2Thanks smashingmagazine, your articles are worthy of being dugg
  • Metasquares, on 02/22/2008, -1/+4A bit of a misnomer, but this is an excellent guide. I had never even thought of using PNGs as image masks.
  • greeniemeani, on 02/22/2008, -4/+1Why don't we just make a list called "Top 1 Ways to go to google.com and find the same stuff yourself without having to scroll through 50 damn things".
    • serif69, on 02/22/2008, -2/+0Or "Top 1 Ways to Actually Practice Web Design And Have Seen All of These Already"
  • banderwocky, on 02/22/2008, -1/+2fantastic list. wait till css3 comes out (in like 10 years)
    • greeniemeani, on 02/22/2008, -1/+0Uhm...I think what you mean is till Internet Explorer properly and without bugs supports CSS (in like 10 years). Firefox already has support for it.
      • SlechtValk, on 02/23/2008, -0/+1Oh, that's why Fx passes the new acid3 test ( http://acid3.acidtests.org/ ) < / sarcasm >
        (i know you didn't say css3 but i couldn't resist ;) )
        and i agree with your comment that IE is slow in supporting standards...
  • rye134, on 02/22/2008, -0/+6Number 47, Eric Meyer’s CSS Reset should really be Number 1. That is the most important thing you can do when working with CSS.
    • animeguru, on 02/22/2008, -0/+2Agreed. I use that reset stylesheet all the time now. I've also got a 'reset' of my own to set my own default styles for everything once they've been reset.

      Saves tons of time when styling for cross browser support.
  • althanis, on 02/22/2008, -1/+2What do any of these links have to do with techniques for effective coding?
  • alt451, on 02/22/2008, -0/+2Lots of good stuff. - 13. Rediscovering the Button Element, 15. Hyperlink Cues with Favicons, 16. CSS Styled table Version 2, and 47. Eric Meyers CSS Reset - Like those the most though
  • skonda, on 02/22/2008, -0/+1Thanks for sharing.. really good techniques. At last some thing technical related on digg...
  • Brittania, on 02/22/2008, -0/+1I do love the scrollover linking. I think its classy.
  • macmichael01, on 02/22/2008, -0/+1Great articles and resources for the newbie front-end developer.
    • Tacobake, on 02/22/2008, -0/+1agreed. and thanks, to whoever is watching.
  • undetected, on 02/22/2008, -0/+2Smashingmagazine overloads you with so much information that should help you do better work, you can burn through your day going over what they present instead of actually getting your work done.
  • Brick86, on 02/22/2008, -0/+2Steve The Gorilla?
    images/steve-the-gorilla.png" alt="Gorilla"
  • redgopher, on 02/22/2008, -0/+1I'd say 60% of these are basic but effective manipulations of background images. The other 40% use Javascript and aren't really pure CSS implementations. Not that Javascript is bad, but... it's misleading to say something like the OS X style dock menu is a "CSS Dock Menu" when it's actually "JS Dock Menu"
  • pudly, on 02/22/2008, -0/+2maybe im just nitpicky as someone who's a web standards nazi, but a lot of these are pointless. cropping a content image by putting it as a background image of a div? how is that a good thing? content images should always be img tags...

    also that advanced menu ? asdf empty span tags in the markup?

    thats just a couple of examples as i only clicked on the first few .... i guess im just anal about it all
  • tony23, on 02/22/2008, -0/+2More nightmares for Jakob Nielsen !
  • controltheweb, on 02/22/2008, -1/+1The image copyright approach is a bit wrong-headed. People who save by right-click need to realize when they are copying that it is copyrighted, and those that want to go ahead anyway need to be deterred. What I've done for years is put a 1 px transparent gif in front of the background image named
    please-no-copying-copyrighted-image.gif
    If people go ahead and copy it anyway, all they get is the gif. They won't know until they open the file, and then they may thing they screwed something up and have to see the please-no-copying-copyrighted-image.gif "message" again. http://controltheweb.blogspot.com/
  • metalgel, on 02/22/2008, -2/+1dugg so that if the many more girls whom blog, create, and build websites more than boys are on digg, they will learn how to do it properly.
  • rusty_g, on 02/23/2008, -0/+1that copyright thing for his photos is still useless b/c u can still PRTSC and copy and paste it into Photoshop or Gimp or something like that...
  • ggolem, on 03/03/2008, -0/+1"You definitely know some of them, but definitely not all of them."

    You can't say anything DEFINITELY, because you don't know anything about me.
  •  

    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.