Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/dabblet.css

Created January 30, 2012 11:50
Show Gist options
  • Save jensgro/1704019 to your computer and use it in GitHub Desktop.
Save jensgro/1704019 to your computer and use it in GitHub Desktop.
Download ZIP
Beautiful Skiplinks with CSS3 Transitions
Raw
dabblet.css
/**
* Beautiful Skiplinks with CSS3 Transitions
* Original: http://jsfiddle.net/MoritzGiessmann/DFrVC/
*/
a {
display:block;
width:200px;
height:50px;
border-radius:0 0 5px 5px;
background:#eee;
text-align:center;
box-shadow:0 2px 2px rgba(0,0,0,.4);
line-height:50px;
margin-left:-100px;
position:absolute;
left:50%;
top:-100px;
-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:-5px;
outline:none;
}
#search { margin-top: 1000px;}
#nav, #content, #search { margin-bottom: 1000px;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="#content">Some Skiplink</a>
<a href="#nav">Some other Skiplink</a>
<a href="#search">A third Skiplink</a>
Klick here and hit tab to jump through the focused links.
<!-- start slipsum code -->
<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. 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. </p>
<h1>No man, I don't eat pork</h1>
<p id="nav">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. 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. </p>
<!-- please do not remove this line -->
<div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a></div>
<!-- end slipsum code -->
Raw
settings.json
{"view":"separate","prefixfree":"","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment