Tutorial: Pure CSS Header comment

 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;
#header a {

.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;


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

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


Labels: , ,