Skip to content

Instantly share code, notes, and snippets.

@weiland
Created April 23, 2012 14:47
Show Gist options
  • Save weiland/2471380 to your computer and use it in GitHub Desktop.
Save weiland/2471380 to your computer and use it in GitHub Desktop.
Untitled
body {
background: #1a1a1a;
margin: 0;
padding: 0;
color: #EEE;
}
header {
width: 100%;
}
a:link, a:visited, a:focus {
color: #EEE;
text-decoration: none;
}
#head_buttons {
padding: 12px 6px 12px 10px;
margin: 24px 10px 0 18px ;
width: 100%;
height: 110px;
border-radius: 78px 0 0 78px;
-moz-transition: all 0.2s ease 0s;
}
#head_buttons:hover {
background: #2f2f2f;
box-shadow: inset 0px 10px 4px -8px #111;
}
#head_buttons div {
padding: 34px 24px 8px 18px;
border-radius: 50px;
font-size: 25px;
color: #EEE;
letter-spacing: 6px;
width: 50px;
height: 50px;
float: left;
margin: 10px 20px;
text-shadow: 0 -2px 1px #666;
}
#head_buttons .php {
background: orange;
}
#head_buttons .css {
background: #222222;
}
#head_buttons .html {
background: #cc0099;
letter-spacing: -2px;
}
#head_buttons .search {
background: navy;
letter-spacing: -2px;
padding: 34px 4px 10px 32px;
width: 60px;
-moz-transition: all 0.5s ease 0s;
}
#head_buttons .search:hover {
width: 250px;
}
#head_buttons .search input {
width: 20px;
height: 20px;
padding: 5px 2px 5px 10px;
border: 0;
-moz-transition: all 0.5s ease 0s;
border-radius: 20px;
}
#head_buttons .search input:focus {
width: 200px;
outline: none;
padding: 5px 5px 5px 10px;
}
#current_area {
clear: both;
margin: 0 0 0 18px;
}
#current_area div {
clear: both;
}
#current_area div div {
padding: 20px 22px 12px;
border-radius: 50px;
font-size: 25px;
color: #EEE;
float: left;
margin: 12px 8px;
text-shadow: 0 -2px 1px #666;
display: none;
}
#current_area div:target div {
display: inherit;
}
#current_area div:after div {
display: none;
}
#current_area .php div {
background: orange;
}
#current_area .css div {
background: #222;
}
#current_area .html div {
background: #cc0099;
}
#current_area .search div {
background: navy;
}
form {
margin: 0;
paddin: 0;
display: inline;
}
<header>
<div id="head_buttons">
<div class="php"><a href="#phpb">PHP</a></div>
<div class="css"><a href="#cssb">CSS</a></div>
<div class="html"><a href="#htmlb">HTML</a></div>
<div class="search">
<form method="get" action="#searchb">
<input type="text" placeholder="o">
</form>
</div>
</div>
<div id="current_area">
<div class="php" id="phpb">
<div>P</div>
<div>H</div>
<div>P</div>
</div>
<div class="css" id="cssb">
<div>C</div>
<div>S</div>
<div>S</div>
</div>
<div class="html" id="htmlb">
<div>H</div>
<div>T</div>
<div>M</div>
<div>L</div>
</div>
<div class="search" id="searchb">
<div>S</div>
<div>E</div>
<div>A</div>
<div>R</div>
<div>C</div>
<div>H</div>
</div>
</div>
</header>
alles nur in CSS3 gemacht :)
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment