Skip to content

Instantly share code, notes, and snippets.

@hucklesby

hucklesby/dabblet.css

Created June 19, 2012 04:28
Show Gist options
  • Save hucklesby/2952283 to your computer and use it in GitHub Desktop.
Save hucklesby/2952283 to your computer and use it in GitHub Desktop.
Download ZIP
A wrap-around ribbon
Raw
dabblet.css
/**
* A wrap-around ribbon
*/
* { box-sizing: border-box; }
html {
background: #eee;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiY2JjYmMiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+), url(https://dl.dropbox.com/u/36859227/images/noise_pattern_with_crosslines.png);
background-repeat: no-repeat, repeat;
background-size: cover, auto;
color: black;
height: 100%;
overflow-y: auto;
}
body {
height: 100%;
margin: 0 auto;
padding-top: 1px;
width: 90%;
}
article {
background: #f6f6f6;
border: 1px solid #999;
border-radius: 6px;
margin: 40px auto 0;
padding: 50px 30px;
min-height: 70%;
width: 500px;
}
h1 {
color: white;
line-height: 1;
margin: -.5em 0 0;
padding-top: 30px;
text-align: center;
text-shadow: 0 -1px 0 black;
}
.ribbon {
background: #2e6cc8;
border-top: 1px solid #1f4a89;
border-radius: 15px 15px 0 0;
box-shadow: 0 4px 12px -4px rgba(0,0,0,.6), inset 0 30px 5px rgba(255,255,255,.15);
height: 60px;
margin: 0 -45px;
position: relative;
}
.ribbon:before,
.ribbon:after {
content: "";
position: absolute;
top: 59px; right: 0; left: 0;
z-index: -1;
}
.ribbon:before {
background: #3c78d3;
height: 15px;
}
.ribbon:after {
background: #142f57;
border-top: 1px solid black;
border-radius: 15px;
height: 30px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<article>
<header class="ribbon">
<h1>A wrap-around ribbon</h1>
</header>
<p>…and that’s a wrap!</p>
</article>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment