Provide visual feedback using CSS #1

Small changes can cause big improvements. Todays topic is about small css improvements, resulting in visual feedback for your visitors and improvements to your blogs user interface. Most of the CSS below only works in the newest browsers, but it shouldn’t prevent you from using it.

Don’t just change the color of the link, provide feedback

Instead of just changing the color of your links, provide your websites’ visitors with visual feedback for their interaction.

1. Improve the contrast between background and foreground

If you have a low contrast between the link-color and the background-color (white on light-green, like in the image shown above), apply a light text-shadow to your navigation links.

Visual Navigation Feedback

The text-shadow property adds a grey drop-shadow with one pixel to the bottom relative to the text (0px on the x-axis, 1px on the y-axis, 0px blur radius and the color #555)

a:link { text-shadow: 0px 1px 0px #555; }

Note: This effect is only visible in Firefox 3.5+, Safari 3+, Opera 9+ and Chrome.

2. Highlight the state of the link

Change the color for an :hover effect, or like I did in the navigation, apply a darker and slightly bigger text-shadow to the link.

Visual Navigation Feedback

With the following CSS applied, the link has a light 3D effect, like hovering over the navigation.

a:hover { text-shadow: 1px 1px 1px #000; }

Note: this works only in Firefox 3.5+, Safari 3+ and Chrome, but neither in Internet Explorer nor Opera 9+

3. Show me the click

If it’s a link, let the link show some reaction.

Visual Navigation Feedback

Use a:active to apply a small button-style effekt to your links. As a result to the code shown below, your link will “jump” 1px below its current position.

a:active { position: relative; top: 1px; }

4. Seamless transition for links & visible states

If image 4 + 5 looks the same to you — well, that’s by intention.

Visual Navigation Feedback
The 1st page, right after you clicked the link, but before the 2nd page loads.

Visual Navigation Feedback
The 2nd page after the click.

I use the same color for a:focus and a.current (whereas .current is the class applied to the current page link on the 2nd page.

a:focus, a.current { color: #111; }

I also used it to create a seamless transition between the 1st and the 2nd page. Note, it’s only useful if you know, that the now current link on the 2nd page is at the same position like the a:focus on the 1st page, e.g. the navigation above. Also note, if it’s not obvious that the new page loaded, because of a very big header using the browsers complete viewport, this effect can be confusing. It can also be confusing if your page loads very fast or very slow.

5. The complete transition effect

Visual Navigation Feedback

If you haven’t seen a lot of changes in the images above, open my website with either Firefox 3.5, Safari 4, Chrome 2 or Opera 9+ and check the top navigation above.

Thanks to Korsti and Björn.

14 Replies to “Provide visual feedback using CSS #1”

  1. sehr cool wie du das hier beschreibst. ich wundere mich gerade dass ich den effekt mit dem firefox 3.0.10 (mac) nicht sehen kann.

  2. Hiho,

    geniales Template hier. Habs mir auch gleich mal gesichert. Nur werden bei mir keine Comments ausgegeben.

    Kann zwar welche schreiben und posten. Die landen auch in der DB, aber auf dem frontend finden diese sich nicht wieder.

    Wie kann das passieren?

  3. I stumbled on your blog by accident and now I’m glad I did. As a roofer, I have to say I really enjoy the articles and posts you have here.
    Thanks !
    Harry

  4. Couple questions, how can I make the top section larger in height so that I can accomodate a taller logo? I want to drop that menu bar down I guess.

    Second, I have a intro.php file from another theme that I want to use for this site. got any ideas of how I can force the theme to use a intro.php file above the latest post?

    Thanks,

    Michael

  5. Working with your theme over past couple of weeks. Love it and so do people I’ve shown it to.

    This is my first attempt at a site and I think it came out pretty cool!

    Still trying to figure out how to change font size and color of page title though.

    Thanks for a great theme!

    Ed

Comments are closed.