Tạo ribbon ở góc đẹp cho Blogspot bằng CSS
/ lúc / 11 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Tạo ribbon ở góc trái đẹp cho Blogspot bằng CSS

Chèn CSS

.ribbon-vip{position:absolute;left:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}
.ribbon-vip span{font-size:12px;font-weight:bold;color:#FFF;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);width:100px;display:block;background:#79A70A;background:linear-gradient(#3498DB 0%,#3498DB 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;left:-21px}
.ribbon-vip span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #3498DB;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #3498DB}
.ribbon-vip span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #3498DB;border-bottom:3px solid transparent;border-top:3px solid #3498DB}

Chèn HTML

<div class='ribbon-vip'><span>nội dung</span></div>

Result

Chú ý: nhớ chỉnh sửa vị trí left -5px,top -5px cho phù hợp nhé

11 nhận xét:

Star Dũng Blog nói...

Lại còm men đầu nũ òi :))

Trường Nguyễn nói...

Bộ gõ tiếng Việt bị gì à !?

Tính Getter nói...

Thiếu dấu vs chữ thôi mà =))

Trường Nguyễn nói...

:v vcc

Star Dũng Blog nói...

:))

Nhữ Đức Thắng nói...

Game Ngọc Rồng Online :v

Trường Nguyễn nói...

Vậy hả :v

Game Mobi nói...

Em đag chơi game này. Em cũng áp dụng cái này vào blog share template ( blog thử nghiệm) của e

Trường Nguyễn nói...

Ừm em :)

Bin nói...

a ơi chỉ e làm với đc k ạ
e làm cái chữ nó toàn ở trên cùng

Trường Nguyễn nói...

Là sao em. Có ảnh Demo không ?

Đăng nhận xét