Tutorial: Pure CSS Header comment
10.10.14



 I'm actually in a way very obliged to make this tutorial on pure CSS header(no javascripts) after having attained success in coding it :D Feel free to implement the codes wherever you want.


The CSS:

#header h1 {
font-size: 28px;
font-weight: 300;
font-family: 'open sans';
line-height: 54px;
letter-spacing: 3px;
height: 56px;
margin: 0;
display: inline-block;
-webkit-font-smoothing: antialiased;
 white-space:nowrap;
}
#header a {
  color:#fff;
  text-decoration:none;
}

.ribbon {
background-color:#16a085; /* bg color for center of ribbon */
border:3px solid #fff; /*border color for center of ribbon */
padding: 0 20px;
height: 56px;
display: inline-block;
position: relative;
margin-left: 56px;
margin-right: 56px;
}


.ribbon:before, .ribbon:after {
content: '.';
text-indent: -9999em;
height: 0;
width: 0;
border-style: solid;
border-width: 28px;
position: absolute;
left: -45px;
top: 10px;
display: block;
z-index: -1;
}
.ribbon:before {
border-color: #138a72 #138a72 #138a72 transparent; /*bg color for left side of ribbon */
}
.ribbon:after {
border-color: #138a72 transparent #138a72 #138a72; /* bg color for right side of ribbon */
right: -45px;
left: auto;
}


The HTML:

<div id="header" class="ribbon">
             <h1><a>Pure CSS Ribbon Header</a></h1>
         </div>

... you can head over to my CSSDesk lab here where you can fork and fiddle the codes too.

Enjoy!



Labels: , ,