Skip to content

Instantly share code, notes, and snippets.

@gcyrillus
Created July 17, 2012 19:21
Show Gist options
  • Save gcyrillus/3131401 to your computer and use it in GitHub Desktop.
Save gcyrillus/3131401 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
html , h1, h1:before{
background: #f06;
background: linear-gradient(45deg, #f06 25px , yellow);
min-height: 100%;
}
h1 {display:inline-block;
padding:2px 0.5em 2px 2em;
min-width:7em;
border:1px solid;
margin:1em 1em 0.2em -1em;
border-radius: 40px / 3px 10px 10px 10px;
position:relative;
box-shadow:0 0 2px #000;
}
h1:before {
content:'';
position:absolute;
font-size:0.5em;
border:solid 1px;
padding:0 1.2em;
left:-1px;
bottom:0.5em;
top:-0.4em;
border-radius:20px / 5px 20px ;
z-index:-1;
box-shadow:0 0 3px #000;
}
div {margin:3em;
border:double;
background:rgba(255,255,255,0.5);
box-shadow:0 0 5px 5px #333;
}
p {padding:0 5px;}
h2 {display:inline-block;}
<div>
<h1>Habitant netus</h1>
<h2>Pellentesque </h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
{"view":"split-vertical","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