الويب HTML
<div class="ribbon">
<span>صفحات</span>
<span>هايف</span>
<span>ترحب بكم</span>
</div>
الاستايل CSS
<style>
body,html{
height:100%;
width:100%;
background:#45b0ff;
position:absolute;
box-shadow:inset 0 0 250px #002c67;
}
.ribbon{
margin: 150px auto;
width:250px;
position:relative;
}
.ribbon span{
display: block;
/* background:red;*/
font-family:verdana;
font-weight:900;
font-size:30px;
color:#0058a3;
padding-top:30px;
line-height: 0;
text-align: center;
margin-bottom:10px;
/*transform*/
-webkit-transform:skew(-10deg) rotate(-10deg);
-moz-transform:skew(-10deg) rotate(-10deg);
-ms-transform:skew(-10deg) rotate(-10deg);
-o-transform:skew(-10deg) rotate(-10deg);
transform:skew(-10deg) rotate(-10deg);
}
.ribbon span:after{
content:"";
height:60px;
display:block;
background:#fcfcfc;
position:relative;
top:-30px;
z-index:-10;
}
.ribbon span:before{
content:"";
width:225px;
height:60px;
background:#0058a3;
position:absolute;
top:51px;
left:12px;
display:block;
/*transform*/
-webkit-transform:skew(25deg) rotate(25deg);
-moz-transform:skew(25deg) rotate(25deg);
-ms-transform:skew(25deg) rotate(25deg);
-o-transform:skew(25deg) rotate(25deg);
transform:skew(25deg) rotate(25deg);
z-index:-20;
}
.ribbon span:last-child:before{
display:none;
}
.ribbon:before{
content:"";
width:0;
height:0;
border:29px solid #fcfcfc;
border-right-color:transparent;
/*transform*/
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
transform:rotate(-10deg);
position:absolute;
top:-24px;
right:-50px;
}
.ribbon:after{
content:"";
width:0;
height:0;
border:29px solid #fcfcfc;
border-left-color:transparent;
/*transform*/
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
transform:rotate(-10deg);
position:absolute;
bottom:6px;
left:-50px;
}
.byline{
text-align:center;
font-size:18px;
}
.byline a{
text-decoration:none;
color: #1f5350;
}
<style>
ونتابع كيفيت اضافتها بالبلوجر
0 التعليقات : :
إرسال تعليق