carbon fiber header
by justjohn
HTML
<header><h1><a href="#">Tasks.IO</a></h1></header>
SCSS
@import url(http://fonts.googleapis.com/css?family=Exo:200,300,400,500,600,700);
body {
background:#eee;
}
header {
background:
-webkit-radial-gradient(#111 15%, transparent 16%) 0 0,
-webkit-radial-gradient(#111 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
-moz-radial-gradient(#111 15%, transparent 16%) 0 0,
-moz-radial-gradient(#111 15%, transparent 16%) 8px 8px,
-moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
-ms-radial-gradient(#111 15%, transparent 16%) 0 0,
-ms-radial-gradient(#111 15%, transparent 16%) 8px 8px,
-ms-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-ms-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
-o-radial-gradient(#111 15%, transparent 16%) 0 0,
-o-radial-gradient(#111 15%, transparent 16%) 8px 8px,
-o-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-o-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
radial-gradient(#111 15%, transparent 16%) 0 0,
radial-gradient(#111 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#222;
background-size:16px 16px;
border-bottom: 1px solid #fff;
h1 {
display: block;
padding: 3px 20px;
font-weight: medium;
font-size: 24px;
font-family: 'Exo', cursive;
color: #eee;
text-shadow: 0 2px 1px #000;
background-image: -webkit-linear-gradient(top, #000 0%, transparent 15%, transparent 85%, #000 100%);
background-image: -moz-linear-gradient(top, #000...