Pure Css Ribbon Header




Γράψτε το κείμενο σας μέσα σε μια κορδέλα.

Αντιγραφή επικόλληση τον παρακάτω κώδικα:


<style>
/* foulscode.blogspot.com */
#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 #eee; /*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;
}
/* foulscode.blogspot.com */
</style>
<!--h-->  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 
<!--h-->  <style type="text/css">
<!--h-->  </style>
<br>
<!--h--><div id="header" class="ribbon">
<!--h-->             <h1><a>Pure CSS Ribbon Header</a></h1>
<!--h-->         </div>


DEMO


Και αφού αντικαταστήσετε το κείμενο που θέλετε είστε έτοιμοι.
Σχόλια