Skip to content

Instantly share code, notes, and snippets.

@johannaruiz
Created April 15, 2013 08:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johannaruiz/5386492 to your computer and use it in GitHub Desktop.
Save johannaruiz/5386492 to your computer and use it in GitHub Desktop.
A CodePen by Johanna Ruiz. Fancy Heading - Just messing around with a heading and pseudo-elements to create a cool looking heading.
<h1>FANCY</h1>
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
background:#333;
text-align:center;
padding-top:3em;
}
h1{
font-size:4em;
border-top:4px solid white;
border-bottom:4px solid white;
padding:.25em 1em;
display:inline-block;
color:white;
position:relative;
}
h1:before, h1:after{
content:"FANCY";
position:absolute;
color:transparent;
display:block;
}
h1:before{
border-top:3px solid white;
border-bottom:3px solid white;
width:337px;
height:128px;
/*top:92px;
left:671px;*/
top:-12px;
left:5px;
}
h1:after{
border-top:2px solid white;
border-bottom:2px solid white;
padding:inherit;
width:199px;
height:112px;
top:-19px;
left:10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment