عضویت در گروه جوکسرا
25 مرداد 1393
کد خبر : 1843

یک ربان زیبا مناسب هدر سایت با 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>

کلید واژه ها :
زیباساری با css robban ربان
وب / آموزش های وب sepahna 4 944 بازدید 0 نظر پرینت
  • +9

دیدگاه خود را ثبت کنید :

نام شما :*
ایمیل شما :
نظر شما :