CSS-Tricks

Links of Interest

*   September 23rd, 2008   *

by: Chris Coyier

Test Your Color IQ

I would think designers would be better at this than most folks. You can test your color IQ by arranging blocks of color into hue order. There are 20 blocks per row and the hue change isn’t that dramatic, so it’s a bit tricky!

 

Contextual Form Highlighting with Pure CSS

The best kind of highlighting on forms is where not only the input field gets highlighted but also the corresponding label. We have the :focus pseudo class in CSS, but that can only affect the input itself, not both the input and label. There are JavaScript solutions, but I just ran across a darn clever way to do it with pure CSS. Basic theory: give the input a really wide left border on focus, that goes underneath the label!

 

Status + Twitter


We have released a new feature of Status which allows you to cross-post your Status check ins to Twitter! Simply include your Twitter username and password in your account details (there is a tab for it now, as this whole area got a bit of a refresh), and you’ll get a checkbox in the check in area asking if you’d like this update to be posted to Twitter. I am loving this, because many of my group updates are for stuff things that would be great tweets too, and are appropriate for my public Twitter account.

 

Custom Values in WordPress RSS Feeds

Me and David both have an area in our sidebars which display recent content from Script & Style. This isn’t just a cheap ploy for more pageviews, we are really trying to highlight great content from the community. So, we really needed a way to get direct links to the articles, not just permalinks to the articles on Script & Style where you’d have to click again to read the real article. Fortunately, the direct URL’s are stored in the database along with each post, so David hacked up the RSS feed to include them, so we could parse them out and use them on our own sites.


Bookmark at Delicious Digg this! Stumble this! Submit to DesignFloat Submit to DZone

Responses


  1. Gravatar

    Daniel K
    September 23, 2008
    [ permalink ]

    The highlighting does work in Safari. Only t hing is though you get Safari’s blue border highlight along with it so the effect looses something.

  2. Gravatar

    Nathan Chase
    September 23, 2008
    [ permalink ]

    scored a 20 on that Color IQ test (0=Perfect, 100=Fail). Pretty interesting.

  3. Gravatar

    ben jamieson
    September 23, 2008
    [ permalink ]

    While I normally don’t like getting the lowest score, I just managed a perfect ‘0′ on Color IQ test!

    Sorry, I just wanted the world to know! grin

  4. Gravatar

    lossy
    September 23, 2008
    [ permalink ]

    I did 4 on the IS test

  5. Gravatar

    Ben
    September 23, 2008
    [ permalink ]

    @ Daniel K

    That highlight is easily removed from the box,

    input[type=text]:focus,
    input[type=password]:focus,
    select:focus {outline: 0 none;}

    and your good

  6. Gravatar

    Brian
    September 23, 2008
    [ permalink ]

    I just scored a 0 = 100% first Try!!! & I wear glasses too. That just made my day

  7. Gravatar

    scorp
    September 25, 2008
    [ permalink ]

    cool test man… scored a 3…

  8. Gravatar

    Peter
    September 29, 2008
    [ permalink ]

    well if anybody needs to feel better about their score on the color test, I just scored 89! but hey I’m red green color blind. the blue to purple one was a disaster - seeing as i see purple as blue!


Leave a Comment

Gravatar

Your Name
December 3, 2008