Tạo Ribbon Snippets với CSS3

Một điều thú vị của CSS là bạn có thể tạo ra hiệu ứng nhìn rất giống một image, đây chỉ là một trong những rất nhiều thế mạnh của CSS giúp tiết kiệm thời gian cho designer.

Trong những snippet dưới đây, chúng ta sẽ tạo ra những thanh Ribbon không dùng bất cứ hình ảnh hay javascript nào cả. Thanh Ribbon này có thể dùng làm background cho navigation hay tiêu đề cho website của bạn.

Ribbon 1

CSS

.ribbon1 {
font:bold 16px Cambria,Georgia,Times,Serif;
color:#fff;
width:60%;
padding:0px 30px;
background:#3B5998;
position:relative;
line-height:48px;
margin:50px auto;
}

.ribbon1:after {
content:"";
position:absolute;
top:0px;
left:100%;
width:0px;
height:0px;
border:24px solid #3B5998;
border-right-color:transparent;}

HTML

<div class="ribbon1">Ribbon 1</div>

Ribbon 2

CSS

.ribbon2 {

font:bold 16px Cambria,Georgia,Times,Serif;

color:#fff;

width:60%;

padding:0px 30px;

background:#01943C;

position:relative;

line-height:48px;

margin:50px auto;

}



.ribbon2:before {

content:"";

position:absolute;

top:0px;

right:100%;

width:0px;

height:0px;

border:24px solid #01943C;

border-left-color:transparent;

}



.ribbon2:after {

content:"";

position:absolute;

top:0px;

left:100%;

width:0px;

height:0px;

border:24px solid transparent;

border-left-color:#01943C;

}

HTML

<div class="ribbon2">Ribbon 2</div>

Ribbon 3

CSS

.ribbon3 {

font:bold 16px Cambria,Georgia,Times,Serif;

color:#fff;

width:60%;

padding:0px 30px;

background:#CEB754;

position:relative;

left:-10px;

line-height:48px;

margin:50px auto;

}



.ribbon3:before {

content:"";

position:absolute;

top:100%;

left:0px;

width:0px;

height:0px;

border-width:5px;

border-style:solid;

border-color:#A28E34 #A28E34 transparent transparent;

}



.ribbon3:after {

content:"";

position:absolute;

top:0px;

left:100%;

width:0px;

height:0px;

border:24px solid #CEB754;

border-right-color:transparent;

}

HTML

<div class="ribbon3">Ribbon 3</div>

Ribbon 4

CSS

.ribbon4 {

font:bold 16px Cambria,Georgia,Times,Serif;

color:#fff;

width:60%;

padding:0px 30px;

background:#AF3605;

position:relative;

line-height:48px;

margin:50px auto;

text-align:center;

}



.ribbon4:before {

content:"";

position:absolute;

top:100%;

left:0px;

width:0px;

height:0px;

border-width:5px;

border-style:solid;

border-color:#76290A #76290A transparent transparent;

}



.ribbon4:after {

content:"";

position:absolute;

top:100%;

right:0px;

width:0px;

height:0px;

border-width:5px;

border-style:solid;

border-color:#76290A transparent transparent #76290A;

}

HTML

<div class="ribbon4">Ribbon 4</div>

Ribbon 5

CSS

.ribbon5 {

font:bold 16px Cambria,Georgia,Times,Serif;

color:#fff;

width:60%;

text-align:center;

padding:0px 30px;

background:#AF3605;

position:relative;

line-height:48px;

margin:50px auto;

}



.ribbon5:before {

content:"";

position:absolute;

top:100%;

left:0px;

width:0px;

height:0px;

border-width:5px;

border-style:solid;

border-color:#76290A #76290A transparent transparent;

}



.ribbon5:after {

content:"";

position:absolute;

top:100%;

right:0px;

width:0px;

height:0px;

border-width:5px;

border-style:solid;

border-color:#76290A transparent transparent #76290A;

}



.ribbon5 div {

width:100%;

}



.ribbon5 div:before, .ribbon5 div:after {

content:"";

position:absolute;

width:0px;

height:0px;

border:24px solid #983912;

top:10px;

z-index:-1;

}



.ribbon5 div:before {

border-left-color:transparent;

right:100%;

margin-right:-10px;

}



.ribbon5 div:after {

border-right-color:transparent;

left:100%;

margin-left:-10px;

}

HTML

<div style="position:relative;z-index:1;">

<div class="ribbon5"><div>Ribbon 5</div></div>

</div>

Dec

30

Ribbon 6

CSS

.ribbon6 {

font:bold 12px Cambria,Georgia,Times,Serif;

color:#fff;

width:90px;

text-align:center;

padding:15px 0px;

height:100px;

background:#3B5998;

position:relative;

margin:50px auto 130px;

}



.ribbon6:after {

content:"";

position:absolute;

top:100%;

left:0px;

width:0px;

height:0px;

border:45px solid #3B5998;

border-bottom-color:transparent;

}



.ribbon6 h2 {

margin:0px 10px;

font-size:30px;

}

HTML

<div class="ribbon6">Dec<h2>30</h2>Ribbon 6</div>

Dec

30

Ribbon 7

CSS

.ribbon7 {

font:bold 12px Cambria,Georgia,Times,Serif;

color:#fff;

width:100px;

text-align:center;

padding:15px 0px 15px;

height:150px;

background:#3B5998;

position:relative;

margin:50px auto 100px;

}



.ribbon7:before, .ribbon7:after {

content:"";

position:absolute;

bottom:-20px;

left:-10px;

width:0px;

height:30px;

border-width:20px 60px;

border-style:solid;

border-color:transparent #3B5998;

}



.ribbon7:after {

bottom:10px;

}



.ribbon7 h2 {

margin:0px 10px;

font-size:30px;

}

HTML

<div class="ribbon7">Dec<h2>30</h2>Ribbon 7</div>

Ribbon 8

CSS

.ribbon8 {

font:bold 16px Cambria,Georgia,Times,Serif;

color:#fff;

width:50%;

height:48px;

text-align:center;

padding:0px 30px;

background:#AF3605;

position:relative;

line-height:48px;

margin:50px auto;

}



.ribbon8:before {

content:"";

position:absolute;

top:100%;

left:0px;

width:0px;

height:0px;

border-width:10px;

border-style:solid;

border-color:#76290A #76290A transparent transparent;

}



.ribbon8:after {

content:"";

position:absolute;

top:100%;

right:0px;

width:0px;

height:0px;

border-width:10px;

border-style:solid;

border-color:#76290A transparent transparent #76290A;

}



.ribbon8 div {

width:100%;

height:100%;

}



.ribbon8 div:before, .ribbon8 div:after {

content:"";

position:absolute;

width:40px;

height:100%;

background:#983912;

top:20px;

z-index:-1;

}



.ribbon8 div:before {

border-left-color:transparent;

right:100%;

margin-right:-20px;

}



.ribbon8 div:after {

border-right-color:transparent;

left:100%;

margin-left:-20px;

}



.ribbon8 div div {

width:100%;

height:100%;

}



.ribbon8 div div:before, .ribbon8 div div:after {

content:"";

position:absolute;

width:50px;

height:0px;

background:transparent;

border:25px solid #AF3605;

top:10px;

z-index:3;

}



.ribbon8 div div:before {

border-left-color:transparent;

margin-right:10px;

}



.ribbon8 div div:after {

border-right-color:transparent;

margin-left:10px;

}



.ribbon8 div div div {

width:100%;

height:100%;

}



.ribbon8 div div div:before, .ribbon8 div div div:after {

content:"";

position:absolute;

width:0px;

height:0px;

background:transparent;

border:5px solid transparent;

top:100%;

margin-top:10px;

z-index:1;

}



.ribbon8 div div div:before {

border-top-color:#76290A;

border-left-color:#76290A;

margin-left:20px;

}



.ribbon8 div div div:after {

border-top-color:#76290A;

border-right-color:#76290A;

margin-right:20px;

}

HTML

<div style="position:relative;z-index:1;">

<div class="ribbon8"><div><div><div>Ribbon 8</div></div></div></div>

</div>

Khi áp dụng vào blog ta có thể thêm đoạn CSS vào trước thẻ ]]></b:skin> và phần HTML sử dụng tại HTML của trình soạn thảo hay là thêm 1 tiện ích.
Hoặc ta gộp tất cả 2 phần CSS và HTML thành một và sử dụng tại HTML của trình soạn thảo hay là thêm 1 tiện ích.
Như mẫu sau:(Mẫu 1)

<style>

.ribbon1 {

font:bold 16px Cambria,Georgia,Times,Serif;

color:#fff;

width:60%;

padding:0px 30px;

background:#3B5998;

position:relative;

line-height:48px;

margin:50px auto;

}



.ribbon1:after {

content:"";

position:absolute;

top:0px;

left:100%;

width:0px;

height:0px;

border:24px solid #3B5998;

border-right-color:transparent;

}</style>

<center>

<div class="ribbon1">

Chữ hiện thị của bạn</div>

</center>

Thủ thuật blogspot

Tạo Ribbon Snippets với CSS3

30

30

Post a Comment

Plus UI V3.1.0 - Responsive Blogger Template - Free Download

Cải thiện chỉ số PageSpeed Insights khi kết nối với Google adsense, analytics và facebook cho blogspot

Cài đặt mật khẩu cho các bài viết riêng lẻ trên blogspot/blogger mới nhất

Tổng hợp hiệu ứng pháo hoa cho blogspot

Menu liên hệ ẩn hiện ở dưới cùng màn hình mobile cho blogspot

Thủ thuật blogspot®