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
Και αφού αντικαταστήσετε το κείμενο που θέλετε είστε έτοιμοι.
Κατηγορίες:
Σχόλια