Beautiful Skiplinks with CSS3 Transitions

by Moritz GieĂźmann

HTML

<a href="#content">Some Skiplink &darr;</a>
<a href="#nav">Some other Skiplink &darr;</a>
<a href="#search">A third Skiplink &darr;</a>

Klick here and hit tab to jump through the focused links.

<div id="search">Search site</div>
<h1>Uuummmm, this is a tasty burger!</h1>
<p id="content">Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs....

CSS

/**
 * Beautiful Skiplinks with CSS3 Transitions
 * Original: http://jsfiddle.net/MoritzGiessmann/DFrVC/
 * Author: @MoritzGiessmann
 * Some enhancements by @yatil
 */

a {
    display:block;
    width:12.5em;
    height:3.125em;
    border-radius:0 0 .3125em .3125em;
    background:#eee;
    text-align:center;
    box-shadow:0 2px 2px rgba(0,0,0,.4);
    line-height:3.125;
    margin-left:-6.25em;
    position:absolute;
    left:50%;
    top:-3.5em;
     -webkit-transition: all 0.8s ease;  
     -moz-transition: all 0.8s ease;  
     -ms-transition: all 0.8s ease;  
     -o-transition: all 0.8s ease;  
     transition: all 0.8s ease;
    color:#000;
    text-decoration:none;
}

a:focus {
    top:0;
    outline:none;
    text-decoration:underline;
}

a:hover {
   text-decoration: underline;
}

/* Styling for having really high content */

#search {
    margin-top: 1000px;
}
#nav, #content, #search {
    margin-bottom: 1000px;
}