Skip to content

Instantly share code, notes, and snippets.

@linhuiw

linhuiw/dabblet.css

Created March 12, 2012 05:28
Show Gist options
  • Save linhuiw/2020043 to your computer and use it in GitHub Desktop.
Save linhuiw/2020043 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
*
{
margin:0;
padding:0;
}
body{
width:600px;
margin:0 auto;
}
body
{
font:13px/22px Arial;
color:#444;
}
.docIcon{
background: #eee;
background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
background:-webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
border: 1px solid #ccc;
display: block;
width: 40px;
height: 56px;
position: relative;
margin: 42px auto;
-webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
-moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
text-indent:-9999em;
-webkit-border-radius: 3px 15px 3px 3px;
}
.docIcon:after{
content:"after";
display: block;
position: absolute;
left: 0;
top:0;
width: 60%;
margin: 22px 20% 0;
height: 15px;
background:#ccc;
background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #
}
Raw
dabblet.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css.css" media="screen" type="text/css"/>
<title>box-icon</title>
</head>
<body>
<a class="docIcon" href="#"></a>
</body>
</html>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment