Skip to content

Instantly share code, notes, and snippets.

@jiceb

jiceb/dabblet.css

Created June 12, 2012 19:52
Show Gist options
  • Save jiceb/2919748 to your computer and use it in GitHub Desktop.
Save jiceb/2919748 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
@import url("http://fonts.googleapis.com/css?family=Norican");
@import url("http://fonts.googleapis.com/css?family=Graduate");
@import url("http://fonts.googleapis.com/css?family=Arvo:700");
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
background: #fff;
text-align: center;
}
.container {
width: 40em;
margin: 2em auto 0;
transform: scale(.75) /* skewY(-2deg);*/
}
h1 {
font-size: 50px;
margin: 0; padding: 0;
line-height: 1.05;
letter-spacing: .15em;
font-family: 'Arvo', serif;
font-weight: 700;
text-transform: uppercase;
}
h1 strong {
font-size: 100px;
}
h1 span.twitter {
font-size: 70px;
letter-spacing: .25em;
text-transform: none;
color:#333;
}
h1 span.twitter a {
color:#333;
text-decoration: none;
}
h1 span.twitter a:hover {
color:#0A95FF;
}
.ctn { position: relative; padding : 0; }
.str {
position: relative;
padding: 0 30px;
margin: 0;
font-size: 48px;
color: #000;
text-transform: uppercase;
font-family: 'Graduate', cursive;
text-shadow: 4px 3px 0 #ccc;
position:relative; z-index:1;
}
.str span {
background: #fff;
display: block;
width: 140px;
margin: 0 auto;
text-align: center;
padding: 0 35px;
}
.str span:before, .str span:after {
content:"";
position:absolute;
z-index:-1;
top:50%;
left: 0;
right:0;
border-top: 1px solid #999;
}
.cvr {
margin: 10px 0 0; padding: 0;
font-family: 'Norican', cursive;
font-size: 74px;
font-weight: bold;
transform: skewY(-3deg);
color: #222
}
.blk {
background: #000;
padding: 30px;
color: #fff;
font-family: Helvetica Neue;
font-size: 40px;
margin: 30px 50px
}
Raw
dabblet.html
<div class="container">
<h1>Jean-Charles <strong>Bournot</strong> <span class="twitter">aka <a href="http://twitter.com/jiceb" class="twitter">@jiceb</a></span></h1>
<p class="blk">Front-end web developer</p>
<div class="ctn">
<p class="str"><span>From</span></p>
</div>
<p class="cvr">St-Brieuc, Bretagne</p>
</div><!-- content to be placed inside <body>…</body> -->
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment