Grow your CSS skills. Land your dream job.

Links of Interest

Published 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.

Comments

  1. Daniel K
    Permalink to comment#

    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. Permalink to comment#

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

  3. Permalink to comment#

    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. lossy
    Permalink to comment#

    I did 4 on the IS test

  5. Ben
    Permalink to comment#

    @ 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. Brian
    Permalink to comment#

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

  7. scorp
    Permalink to comment#

    cool test man… scored a 3…

  8. Peter
    Permalink to comment#

    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!

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".