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

Закладки یک ربان زیبا مناسب هدر سایت با 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>

عنوان
نویسنده - sepahna بازدید - 946 نظرات - 0
امتیاز
زیر مجموعه
جهت استفاده از تمامی امکانات سایت عضو شوید!

مزایا عضویت در سایت تفریحی سپهنا :
ارايه پروفایل! ارسال مطلب به سایت!ذخیره پست ها ! استفاده از پیام خصوصی و ...

مطالب مشابه