Grow your CSS skills. Land your dream job.

Links of Interest

Published by Chris Coyier

If you come from a print background at all, one of the things you might sorely miss is the concept of "tabs". For example, think of a restaurant menu where the title of the dish is on the left, then a series of dots, then the price on the right. This is an age-old design technique used for leading the eye. It is accomplished in layout programs by setting up tabs and leaders quite easily. In web design....not so easily. Search-This has an absolutely fantastic article on how to achieve this look with pure CSS.

You've probably seen comment sections on blogs before where the author comments look different than all the other comments. I've always kind of liked that, since when skimming comments, it's always nice to make sure and read those. I randomly left a comment over at Charity Ondriezek's blog Design Adaptations pondering how such a thing might be done. And by gone, it took her just a couple of hours to have a tutorial posted on how to do it! You rock Charity! The answer is a clever little conditional PHP statement which checks an email address against the administrators email address and then applies a class to the list item if it matches. Then you can style your little heart out. Be sure to read her tutorial though, it's very well done.

I enjoyed this recent article at Smiley Cat Web Design Blog about Future-Proofing your web site by planning your CSS in advance.

The power of CSS positioning lends itself pretty well to the concept of a Post-It note.

Get your web design game-face on and see how many HTML elements you can name in 5 minutes. First time through I thought I was absolutely rocking and got like half. I even got <optgroup>. That's right baby, I remembered optgroup, how nerdy-awesome is that?

There is a pretty interesting article up at Koew.net on "The Unescapeable Link". Sounds pretty ominous eh? If you have an anchor element setup as a block-level element with a background image and overflow set to hidden, you can click inside the link, hold down, move your mouse outside the link, and it won't release the link. Even outside the browser window, you can't escape, it will load the link no matter what upon release of the mouse. If you don't set overflow, you can escape just fine. Kind of interesting little CSS weirdness.

I pretty much worship Wufoo's amazing web service for creating web forms. Even though I'm plenty versed on the subject, I'll probably never create one again while Wufoo is around. To showcase just how awesome of forms you can make with Wufoo, they have released a Form Gallery.

Comments

  1. If you think the HTML elements quiz puts you in your place, try taking the CSS quiz from the same site:

    http://www.justsayhi.com/bb/css_quiz

    How many of the 122 possible CSS properties can you name in 7 minutes? :)

    For me, it turns out that years of using shortcut properties (i.e., ‘border’ instead of ‘border-top-width’ and so on) have dulled my memory a bit.

  2. Permalink to comment#

    Hey Chris, thanks for the plug. I took the HTML quiz. I’m so embarrassed that I only named 29 elements! How sad is that? LOL. It was fun though. Gonna take the CSS quiz that Rob pointed out next. :)

  3. Chris, thanks for the link on planning your CSS in advance. I can’t stress the importance of doing so. A lot of web designers grunt having to do this but it saves so much time in the long run.

  4. thanks

  5. thanks

  6. Permalink to comment#

    thnks

  7. thnks

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".