کانال ما در تلگرام
یک ربان زیبا مناسب هدر سایت با css

ربان Css

این روزها دیگه با css فقط نمیشه بازی ساخت... با یه طرح جالب دیگه با عنوان ربان css خدمتتون هستیم. از این طرح میتوانید در مکان مناسب از سایت و یا وبلاگ خودتون استفاده کنید. دمو آنلاین در ادمه مطلب موجود میباشد.

دمو آنلاین

 

کد :


 
 
<style>
 body { background-color:#eee; }
 
#logo h1 {
 font-size: 28px;
font-weight: 300;
font-family: 'Trebuchet MS', Arial, sans-serif;
line-height: 54px;
text-transform: uppercase;
letter-spacing: 3px;
height: 56px;
margin: 0;
display: inline-block;
 
-webkit-font-smoothing: antialiased;
 white-space:nowrap;
}
 
#logo h1 a {
 color:#fff;
 text-decoration:none;
}
 
#logo a:before, #logo a:after {
content: '\2013\2002';
color: #fff;
}
 
#logo a:after {
content:'\2002\2013';
}
 
.ribbon {
background-color:#FF5432;
 border:3px solid #eee;
 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: #FF5432 #FF5432 #FF5432 transparent;
 
}
 
.ribbon:after {
border-color: #FF5432 transparent #FF5432 #FF5432;
right: -45px;
left: auto;
}
 

 </style>
<div id="logo" class="ribbon">
 <h1><a href="#0">Merry Christmas</a></h1>
 </div>

+9
نام:*
ایمیل:


جستجو در سایت
برند مورد علاقه شما
تقویم سایت
<    «  مهر 1399  »    >
شیدسچپج
 1234
567891011
12131415161718
19202122232425
2627282930