Using CSS3 Text Shadow for Active Link States

Recently, Chris Spooner of Line25 wrote a tutorial describing how to create a letterpress effect with CSS3’s text-shadow property. In another article, Chris Coyier of CSS-Tricks showed how he makes all the text links on his website feel more button-like using a simple bit of CSS positioning. During a recent project I was working on, […]

How to Dynamically Highlight Content Like Wikipedia Using CSS3

If you’ve ever clicked on a footnote link in a Wikipedia article, you’ve probably noticed that two things happen: 1 the link brings you to the footnote section at the bottom of the page; and 2 the selected footnote is highlighted with a different color. In a list of footnotes, this feature makes it easy […]

Better CSS Outline Suppression

The aim of these tests is to check which combination of :focus, :hover and :active works best in order to suppress the outline when an image-replaced link is clicked with the mouse, but leave it visible for keyboard users tabbing through the page…

Don’t Lose Your :focus

For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be […]

Create a Button with Hover and Active States using CSS Sprites

Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a […]

Active State in Navigation – CSS Navigation Tutorial

I am sure you have been on a website where the navigation has an “active” state, basically showing you which page you are currently on. It’s a great way to let visitors know exactly where they are on a site. This tutorial shows you how to use a CSS sprite to create a navigation menu […]