Ribbons

Developer
AxeLVaisper
Size
6,941 Kb
Views
28,336
  1. Ribbons Previews
  2. Ribbons HTML Codes
  3. Ribbons CSS Codes

How do I make an ribbons?

What is a ribbons? How do you make a ribbons? This script and codes were developed by AxeLVaisper on 09 November 2022, Wednesday.

Ribbons Previews
IQ Test

Ribbons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ribbons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
.tsc_ribbon_wrap { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px 5px 5px 5px; height: 130px; margin-bottom: 3px; position: relative; text-align: center; width: 650px;
}
.tsc_ribbon_wrap > div { margin-bottom: 40px;
}
.tsc_ribbon_wrap > div:last-of-type { margin-bottom: 0;
}
.tsc_ribbon_wrap:before, .tsc_ribbon_wrap:after { content: ""; display: table;
}
.tsc_ribbon_wrap:after { clear: both;
}
.tsc_ribbon_wrap {
}
.tsc_ribbon_wrap .ribbon-wrap { color: #FFFFFF; position: absolute; text-align: center; z-index: 0;
}
.tsc_ribbon_wrap .ribbon-wrap > span { display: block; height: 100%; position: relative;
}
.tsc_ribbon_wrap .ribbon-wrap > span:before, .tsc_ribbon_wrap .ribbon-wrap > span:after { content: ""; position: absolute; z-index: -1;
}
.tsc_ribbon_wrap .ribbon-wrap:before, .tsc_ribbon_wrap .ribbon-wrap:after { content: ""; position: absolute; z-index: -2;
}
.tsc_ribbon_wrap.edge { position: relative;
}
.tsc_ribbon_wrap .left-edge.point { border-radius: 5px 0 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); height: 40px; left: -5px; line-height: 40px; top: 20px; width: 120px;
}
.tsc_ribbon_wrap.ie8 .left-edge.point { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); left: 0;
}
.tsc_ribbon_wrap .left-edge.point > span { border-radius: 5px 0 0 0;
}
.tsc_ribbon_wrap.ie .left-edge.point > span {
}
.tsc_ribbon_wrap .left-edge.point:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; left: 0; transform: rotate(-45deg);
}
.tsc_ribbon_wrap .left-edge.point:after { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); height: 28px; margin-top: -14px; right: -14px; top: 50%; transform: rotate(45deg); transform-origin: center center 0; width: 28px;
}
.tsc_ribbon_wrap.ie8 .left-edge.point:before, .tsc_ribbon_wrap.ie8 .left-edge.point:after { border-radius: 0 0 0 0; display: none;
}
.tsc_ribbon_wrap .right-edge.point { border-radius: 0 5px 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); height: 40px; line-height: 40px; right: -5px; top: 20px; width: 120px;
}
.tsc_ribbon_wrap.ie8 .right-edge.point { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); right: 0;
}
.tsc_ribbon_wrap .right-edge.point > span { border-radius: 0 5px 0 0;
}
.tsc_ribbon_wrap.ie .right-edge.point > span {
}
.tsc_ribbon_wrap .right-edge.point:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 4px; bottom: -5px; right: 0; transform: rotate(45deg);
}
.tsc_ribbon_wrap .right-edge.point:after { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); height: 28px; left: -14px; margin-top: -14px; top: 50%; transform: rotate(45deg); transform-origin: center center 0; width: 28px;
}
.tsc_ribbon_wrap.ie8 .right-edge.point:before, .tsc_ribbon_wrap.ie8 .right-edge.point:after { border-radius: 0 0 0 0; display: none;
}
.tsc_ribbon_wrap .left-edge.fork { border-radius: 5px 0 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); height: 40px; left: -5px; line-height: 40px; top: 20px; width: 120px;
}
.tsc_ribbon_wrap.ie8 .left-edge.fork { border-radius: 0 0 0 0; box-shadow: none !important; left: 0;
}
.tsc_ribbon_wrap .left-edge.fork > span { border-radius: 5px 0 0 0;
}
.tsc_ribbon_wrap .left-edge.fork > span:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; left: 0; transform: rotate(-45deg);
}
.tsc_ribbon_wrap.ie8 .left-edge.fork > span:before { display: none;
}
.tsc_ribbon_wrap .left-edge.fork > span:after { border-style: solid; border-width: 20px; right: -20px; top: 0;
}
.tsc_ribbon_wrap .left-edge.fork:before { background: none repeat scroll 0 0 #666666; bottom: 5px; box-shadow: 25px 8px 4px rgba(0, 0, 0, 0.5); height: 20px; right: 22px; transform: rotate(-22deg) skew(18deg, 28deg); width: 80px;
}
.tsc_ribbon_wrap .left-edge.fork:after { background: none repeat scroll 0 0 #666666; box-shadow: 20px -5px 4px rgba(0, 0, 0, 0.5); height: 20px; right: 22px; top: 5px; transform: rotate(32deg) skew(-18deg, -28deg); width: 80px;
}
.tsc_ribbon_wrap.ie8 .left-edge.fork:before, .tsc_ribbon_wrap.ie8 .left-edge.fork:after { display: none;
}
.tsc_ribbon_wrap .right-edge.fork { border-radius: 0 5px 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); height: 40px; line-height: 40px; right: -5px; top: 20px; width: 120px;
}
.tsc_ribbon_wrap.ie8 .right-edge.fork { border-radius: 0 0 0 0; box-shadow: none !important; right: 0;
}
.tsc_ribbon_wrap .right-edge.fork > span { border-radius: 0 5px 0 0;
}
.tsc_ribbon_wrap .right-edge.fork > span:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; right: 0; transform: rotate(45deg);
}
.tsc_ribbon_wrap.ie8 .right-edge.fork > span:before { display: none;
}
.tsc_ribbon_wrap .right-edge.fork > span:after { border-style: solid; border-width: 20px; left: -20px; top: 0;
}
.tsc_ribbon_wrap .right-edge.fork:before { background: none repeat scroll 0 0 #666666; bottom: 5px; box-shadow: -25px 8px 4px rgba(0, 0, 0, 0.5); height: 20px; left: 22px; transform: rotate(22deg) skew(-18deg, -28deg); width: 80px;
}
.tsc_ribbon_wrap .right-edge.fork:after { background: none repeat scroll 0 0 #666666; box-shadow: -20px -5px 4px rgba(0, 0, 0, 0.5); height: 20px; left: 22px; top: 5px; transform: rotate(-32deg) skew(18deg, 28deg); width: 80px;
}
.tsc_ribbon_wrap.ie8 .right-edge.fork:before, .tsc_ribbon_wrap.ie8 .right-edge.fork:after { display: none;
}
.tsc_ribbon_wrap.ie8 .lblue, .tsc_ribbon_wrap .lblue > span, .tsc_ribbon_wrap .lblue.left-corner > span:before, .tsc_ribbon_wrap .lblue.left-corner > span:after, .tsc_ribbon_wrap .lblue.right-corner > span, .tsc_ribbon_wrap .lblue.right-corner > span:before, .tsc_ribbon_wrap .lblue.right-corner > span:after { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D);
}
.tsc_ribbon_wrap .lblue.left-corner:before { border-bottom-color: #174C66; border-left-color: #174C66;
}
.tsc_ribbon_wrap .lblue.left-corner:after { border-right-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.right-corner:before { border-left-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.right-corner:after { border-bottom-color: #174C66; border-right-color: #174C66;
}
.tsc_ribbon_wrap .lblue.left-edge.point:after, .tsc_ribbon_wrap .lblue.right-edge.point:after { background-color: #42A5D4; background-image: linear-gradient(-45deg, #42A5D4, #24769D);
}
.tsc_ribbon_wrap .lblue.left-edge:before { border-left-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.right-edge:before { border-right-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.left-edge.fork > span { background-color: #42A5D4; background-image: -moz-linear-gradient(left center , #42A5D4 0px, #42A5D4 5px, #24769D 15%, #24769D 65%, #42A5D4 100%);
}
.tsc_ribbon_wrap.ie8 .lblue.left-edge.fork > span {
}
.tsc_ribbon_wrap .lblue.left-edge.fork > span:after { border-color: #42A5D4 transparent #42A5D4 #42A5D4;
}
.tsc_ribbon_wrap .lblue.left-edge.fork > span:before { border-left-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.right-edge.fork > span { background-color: #42A5D4; background-image: -moz-linear-gradient(right center , #42A5D4 0px, #42A5D4 5px, #24769D 15%, #24769D 65%, #42A5D4 100%);
}
.tsc_ribbon_wrap.ie8 .lblue.right-edge.fork > span {
}
.tsc_ribbon_wrap .lblue.right-edge.fork > span:after { border-color: #42A5D4 #42A5D4 #42A5D4 transparent;
}
.tsc_ribbon_wrap .lblue.right-edge.fork > span:before { border-right-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap.ie8 .lred, .tsc_ribbon_wrap .lred > span, .tsc_ribbon_wrap .lred.left-corner > span:before, .tsc_ribbon_wrap .lred.left-corner > span:after, .tsc_ribbon_wrap .lred.right-corner > span, .tsc_ribbon_wrap .lred.right-corner > span:before, .tsc_ribbon_wrap .lred.right-corner > span:after { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000);
}
.tsc_ribbon_wrap .lred.left-corner:before { border-bottom-color: #5F0000; border-left-color: #5F0000;
}
.tsc_ribbon_wrap .lred.left-corner:after { border-right-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.right-corner:before { border-left-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.right-corner:after { border-bottom-color: #5F0000; border-right-color: #5F0000;
}
.tsc_ribbon_wrap .lred.left-edge.point:after, .tsc_ribbon_wrap .lred.right-edge.point:after { background-color: #F80000; background-image: linear-gradient(-45deg, #F80000, #A30000);
}
.tsc_ribbon_wrap .lred.left-edge:before { border-left-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.right-edge:before { border-right-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.left-edge.fork > span { background-color: #F80000; background-image: -moz-linear-gradient(left center , #F80000 0px, #F80000 5px, #A30000 15%, #A30000 65%, #F80000 100%);
}
.tsc_ribbon_wrap.ie8 .lred.left-edge.fork > span {
}
.tsc_ribbon_wrap .lred.left-edge.fork > span:after { border-color: #F80000 transparent #F80000 #F80000;
}
.tsc_ribbon_wrap .lred.left-edge.fork > span:before { border-left-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.right-edge.fork > span { background-color: #F80000; background-image: -moz-linear-gradient(right center , #F80000 0px, #F80000 5px, #A30000 15%, #A30000 65%, #F80000 100%);
}
.tsc_ribbon_wrap.ie8 .lred.right-edge.fork > span {
}
.tsc_ribbon_wrap .lred.right-edge.fork > span:after { border-color: #F80000 #F80000 #F80000 transparent;
}
.tsc_ribbon_wrap .lred.right-edge.fork > span:before { border-right-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_hang { margin-bottom: 60px;
}
.tsc_ribbon_hang:last-child { margin-bottom: 0;
}
.tsc_ribbon_hang > div { display: inline-block; margin: 0 40px 40px 0;
}
.tsc_ribbon_hang > div:last-of-type { margin-right: 0;
}
.tsc_ribbon_hang .ribbon-bookmark { border-radius: 3px 3px 0 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); color: #FFFFFF; margin: 20px auto; position: relative; text-align: center; z-index: 0;
}
.tsc_ribbon_hang.ie8 .ribbon-bookmark { box-shadow: none;
}
.tsc_ribbon_hang .ribbon-bookmark > span { border-radius: 3px 3px 0 0; display: block; position: relative;
}
.tsc_ribbon_hang .ribbon-bookmark.small > span { height: 82px; line-height: 82px; width: 50px;
}
.tsc_ribbon_hang .ribbon-bookmark.medium > span { height: 124px; line-height: 124px; width: 80px;
}
.tsc_ribbon_hang .ribbon-bookmark.large > span { height: 166px; line-height: 166px; width: 120px;
}
.tsc_ribbon_hang .ribbon-bookmark > span:before, .tsc_ribbon_hang.ie8 .ribbon-bookmark .fork { border-style: solid; content: ""; left: 0; position: absolute; top: 100%; z-index: -1;
}
.tsc_ribbon_hang.ie8 .ribbon-bookmark > span:before { display: none;
}
.tsc_ribbon_hang .small > span:before, .tsc_ribbon_hang.ie8 .small .fork { border-width: 25px; margin-top: -25px;
}
.tsc_ribbon_hang .medium > span:before, .tsc_ribbon_hang.ie8 .medium .fork { border-width: 40px; margin-top: -40px;
}
.tsc_ribbon_hang .large > span:before, .tsc_ribbon_hang.ie8 .large .fork { border-width: 60px; margin-top: -60px;
}
.tsc_ribbon_hang .ribbon-bookmark:before { background: none repeat scroll 0 0 #666666; box-shadow: 0 6px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.5); content: ""; left: 1px; position: absolute; transform: skew(-20deg, -38deg) rotate(-20deg); transform-origin: 0 0 0; z-index: -2;
}
.tsc_ribbon_hang .ribbon-bookmark:after { background: none repeat scroll 0 0 #666666; box-shadow: 0 7px 2px rgba(0, 0, 0, 0.5), 1px -1px 2px rgba(0, 0, 0, 0.5); content: ""; position: absolute; right: 1px; transform: skew(20deg, 38deg) rotate(20deg); transform-origin: right 0 0; z-index: -2;
}
.tsc_ribbon_hang.ie8 .ribbon-bookmark:before, .tsc_ribbon_hang.ie8 .ribbon-bookmark:after { display: none;
}
.tsc_ribbon_hang .ribbon-bookmark.small:before, .tsc_ribbon_hang .ribbon-bookmark.small:after { bottom: -35px; height: 35px; width: 25px;
}
.tsc_ribbon_hang .ribbon-bookmark.medium:before, .tsc_ribbon_hang .ribbon-bookmark.medium:after { bottom: -55px; height: 55px; width: 40px;
}
.tsc_ribbon_hang .ribbon-bookmark.large:before, .tsc_ribbon_hang .ribbon-bookmark.large:after { bottom: -85px; height: 85px; width: 60px;
}
.tsc_ribbon_hang .ribbon-bookmark.small:before { box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.5);
}
.tsc_ribbon_hang .ribbon-bookmark.small:after { box-shadow: 0 5px 2px rgba(0, 0, 0, 0.5), 1px -1px 2px rgba(0, 0, 0, 0.5);
}
.tsc_ribbon_hang .ie8 .ribbon-bookmark.small { box-shadow: none;
}
.tsc_ribbon_hang .lblue { background: none repeat scroll 0 0 #42A5D4;
}
.tsc_ribbon_hang .lblue > span { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D);
}
.tsc_ribbon_hang .lblue > span:before, .tsc_ribbon_hang.ie8 .lblue .fork { border-color: #24769D #24769D transparent;
}
.tsc_ribbon_hang .lred { background: none repeat scroll 0 0 #F80000;
}
.tsc_ribbon_hang .lred > span { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000);
}
.tsc_ribbon_hang .lred > span:before, .tsc_ribbon_hang.ie8 .lred .fork { border-color: #A30000 #A30000 transparent;
}
.tsc_ribbon_hang .lgreen { background: none repeat scroll 0 0 #80B73D;
}
.tsc_ribbon_hang .lgreen > span { background-color: #80B73D; background-image: -moz-linear-gradient(center top , #80B73D, #547728);
}
.tsc_ribbon_hang .lgreen > span:before, .tsc_ribbon_hang.ie8 .lgreen .fork { border-color: #547728 #547728 transparent;
}
.tsc_ribbon_hang .lyellow { background: none repeat scroll 0 0 #FFC037;
}
.tsc_ribbon_hang .lyellow > span { background-color: #FFC037; background-image: -moz-linear-gradient(center top , #FFC037, #E19A00);
}
.tsc_ribbon_hang .lyellow > span:before, .tsc_ribbon_hang.ie8 .lyellow .fork { border-color: #E19A00 #E19A00 transparent;
}
.tsc_ribbon_banner { margin: 30px 0; position: relative; z-index: 0;
}
.tsc_ribbon_banner > div { margin-bottom: 40px;
}
.tsc_ribbon_banner > div:last-of-type { margin-bottom: 0;
}
.tsc_ribbon_banner .ribbon-banner { color: #FFFFFF; height: 40px; line-height: 40px; margin: 0 auto; position: relative; text-align: center; width: 320px;
}
.tsc_ribbon_banner .ribbon-banner > span { display: block; height: 100%; position: relative;
}
.tsc_ribbon_banner .ribbon-banner > span:before, .tsc_ribbon_banner .ribbon-banner > span:after { border-color: transparent; border-style: solid; border-width: 14px; content: ""; position: absolute; z-index: -1;
}
.tsc_ribbon_banner.ie8 .ribbon-banner > span:before, .ie8 .ribbon-banner > span:after { display: none;
}
.tsc_ribbon_banner .ribbon-banner > span:before { left: -14px;
}
.tsc_ribbon_banner .ribbon-banner > span:after { right: -14px;
}
.tsc_ribbon_banner .ribbon-banner:before { border-style: solid; border-width: 20px 25px 20px 20px; content: ""; left: -31px; position: absolute; z-index: -2;
}
.tsc_ribbon_banner .ribbon-banner:after { border-style: solid; border-width: 20px 20px 20px 25px; content: ""; position: absolute; right: -31px; z-index: -2;
}
.tsc_ribbon_banner .fold-down > span { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tsc_ribbon_banner .fold-down > span:before, .tsc_ribbon_banner .fold-down > span:after { bottom: -14px;
}
.tsc_ribbon_banner .fold-down:before { top: 14px;
}
.tsc_ribbon_banner .fold-down:after { top: 14px;
}
.tsc_ribbon_banner .fold-straight > span { box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.1);
}
.tsc_ribbon_banner .fold-straight > span:before, .tsc_ribbon_banner .fold-straight > span:after { display: none;
}
.tsc_ribbon_banner .fold-straight:before { border-width: 18px 23px 18px 18px; top: 2px;
}
.tsc_ribbon_banner .fold-straight:after { border-width: 18px 18px 18px 23px; top: 2px;
}
.tsc_ribbon_banner .curve.fold-up { border-radius: 0 0 50% 50%;
}
.tsc_ribbon_banner .curve > span { box-shadow: none;
}
.tsc_ribbon_banner .curve.fold-up > span:after { border: 0 none; border-radius: 0 0 50% 50%; height: 100%; left: 0; top: -40px; width: 100%;
}
.tsc_ribbon_banner .curve.fold-up > span:before { background-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%), -moz-linear-gradient(right center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%); background-position: left top, right top; background-repeat: no-repeat, no-repeat; background-size: 10px 40px, 10px 40px; border: 0 none; border-radius: 50% 50% 50% 50%; height: 100%; left: 0; top: -40px; width: 100%;
}
.tsc_ribbon_banner.ie .curve.fold-up > span:before { display: none;
}
.tsc_ribbon_banner.ie .curve.fold-up > span .before { border-left: 10px solid rgba(0, 0, 0, 0.35); border-radius: 10px 10px 10px 10px; border-right: 10px solid rgba(0, 0, 0, 0.35); height: 100%; left: 0; position: absolute; right: 0; top: -27px; z-index: -1;
}
.tsc_ribbon_banner .curve.fold-up:before { left: -34px; top: -27px;
}
.tsc_ribbon_banner.ie8 .curve.fold-up:before { left: -31px; top: -14px;
}
.tsc_ribbon_banner .curve.fold-up:after { right: -34px; top: -27px;
}
.tsc_ribbon_banner.ie8 .curve.fold-up:after { right: -31px; top: -14px;
}
.tsc_ribbon_banner .lblue, .tsc_ribbon_banner.ie8 .lblue > span { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D);
}
.tsc_ribbon_banner .lblue > span:before { border-right-color: #174C66;
}
.tsc_ribbon_banner .lblue > span:after { border-left-color: #174C66;
}
.tsc_ribbon_banner .lblue:before { border-color: #24769D #24769D #24769D transparent;
}
.tsc_ribbon_banner .lblue:after { border-color: #24769D transparent #24769D #24769D;
}
.tsc_ribbon_banner .lblue.curve.fold-up > span:after { box-shadow: 0 19px 0 #42A5D4;
}
.tsc_ribbon_banner .lred, .tsc_ribbon_banner.ie8 .lred > span { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000);
}
.tsc_ribbon_banner .lred > span:before { border-right-color: #5F0000;
}
.tsc_ribbon_banner .lred > span:after { border-left-color: #5F0000;
}
.tsc_ribbon_banner .lred:before { border-color: #A30000 #A30000 #A30000 transparent;
}
.tsc_ribbon_banner .lred:after { border-color: #A30000 transparent #A30000 #A30000;
}
.tsc_ribbon_banner .lred.curve.fold-up > span:after { box-shadow: 0 19px 0 #F80000;
}
.tsc_ribbon_banner .lgreen, .tsc_ribbon_banner.ie8 .lgreen > span { background-color: #80B73D; background-image: -moz-linear-gradient(center top , #80B73D, #547728);
}
.tsc_ribbon_banner .lgreen > span:before { border-right-color: #304417;
}
.tsc_ribbon_banner .lgreen > span:after { border-left-color: #304417;
}
.tsc_ribbon_banner .lgreen:before { border-color: #547728 #547728 #547728 transparent;
}
.tsc_ribbon_banner .lgreen:after { border-color: #547728 transparent #547728 #547728;
}
.tsc_ribbon_banner .lgreen.curve.fold-up > span:after { box-shadow: 0 19px 0 #80B73D;
}
.tsc_ribbon_banner .lyellow, .tsc_ribbon_banner.ie8 .lyellow > span { background-color: #FFC037; background-image: -moz-linear-gradient(center top , #FFC037, #E19A00);
}
.tsc_ribbon_banner .lyellow > span:before { border-right-color: #9D6C00;
}
.tsc_ribbon_banner .lyellow > span:after { border-left-color: #9D6C00;
}
.tsc_ribbon_banner .lyellow:before { border-color: #E19A00 #E19A00 #E19A00 transparent;
}
.tsc_ribbon_banner .lyellow:after { border-color: #E19A00 transparent #E19A00 #E19A00;
}
.tsc_ribbon_banner .lyellow.curve.fold-up > span:after { box-shadow: 0 19px 0 #FFC037;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- DC Ribbons Start --> <div class="tsc_ribbon_wrap edge" style="width:678px; height:130px;"> <div class="ribbon-wrap left-edge fork lred"><span>Left Edge Marker</span></div> <img src="http://pimg.co/p/678x130" width="678" height="130" /> </div>
<!-- DC Ribbons End -->
<!-- DC Ribbons Start --> <div class="tsc_ribbon_wrap edge" style="width:80%; height:130px;"> <div class="ribbon-wrap right-edge fork lblue"><span>Right Edge Marker</span></div> <br /> <br /> <div align="center"> <big>Add images, text or anything<br /> <small>This is a just a [DIV] layer.</small></big> </div> </div>
<!-- DC Ribbons End --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Ribbons - Script Codes CSS Codes

.tsc_ribbon_wrap { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px 5px 5px 5px; height: 130px; margin-bottom: 3px; position: relative; text-align: center; width: 650px;
}
.tsc_ribbon_wrap > div { margin-bottom: 40px;
}
.tsc_ribbon_wrap > div:last-of-type { margin-bottom: 0;
}
.tsc_ribbon_wrap:before, .tsc_ribbon_wrap:after { content: ""; display: table;
}
.tsc_ribbon_wrap:after { clear: both;
}
.tsc_ribbon_wrap {
}
.tsc_ribbon_wrap .ribbon-wrap { color: #FFFFFF; position: absolute; text-align: center; z-index: 0;
}
.tsc_ribbon_wrap .ribbon-wrap > span { display: block; height: 100%; position: relative;
}
.tsc_ribbon_wrap .ribbon-wrap > span:before, .tsc_ribbon_wrap .ribbon-wrap > span:after { content: ""; position: absolute; z-index: -1;
}
.tsc_ribbon_wrap .ribbon-wrap:before, .tsc_ribbon_wrap .ribbon-wrap:after { content: ""; position: absolute; z-index: -2;
}
.tsc_ribbon_wrap.edge { position: relative;
}
.tsc_ribbon_wrap .left-edge.point { border-radius: 5px 0 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); height: 40px; left: -5px; line-height: 40px; top: 20px; width: 120px;
}
.tsc_ribbon_wrap.ie8 .left-edge.point { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); left: 0;
}
.tsc_ribbon_wrap .left-edge.point > span { border-radius: 5px 0 0 0;
}
.tsc_ribbon_wrap.ie .left-edge.point > span {
}
.tsc_ribbon_wrap .left-edge.point:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; left: 0; transform: rotate(-45deg);
}
.tsc_ribbon_wrap .left-edge.point:after { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); height: 28px; margin-top: -14px; right: -14px; top: 50%; transform: rotate(45deg); transform-origin: center center 0; width: 28px;
}
.tsc_ribbon_wrap.ie8 .left-edge.point:before, .tsc_ribbon_wrap.ie8 .left-edge.point:after { border-radius: 0 0 0 0; display: none;
}
.tsc_ribbon_wrap .right-edge.point { border-radius: 0 5px 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); height: 40px; line-height: 40px; right: -5px; top: 20px; width: 120px;
}
.tsc_ribbon_wrap.ie8 .right-edge.point { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); right: 0;
}
.tsc_ribbon_wrap .right-edge.point > span { border-radius: 0 5px 0 0;
}
.tsc_ribbon_wrap.ie .right-edge.point > span {
}
.tsc_ribbon_wrap .right-edge.point:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 4px; bottom: -5px; right: 0; transform: rotate(45deg);
}
.tsc_ribbon_wrap .right-edge.point:after { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); height: 28px; left: -14px; margin-top: -14px; top: 50%; transform: rotate(45deg); transform-origin: center center 0; width: 28px;
}
.tsc_ribbon_wrap.ie8 .right-edge.point:before, .tsc_ribbon_wrap.ie8 .right-edge.point:after { border-radius: 0 0 0 0; display: none;
}
.tsc_ribbon_wrap .left-edge.fork { border-radius: 5px 0 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); height: 40px; left: -5px; line-height: 40px; top: 20px; width: 120px;
}
.tsc_ribbon_wrap.ie8 .left-edge.fork { border-radius: 0 0 0 0; box-shadow: none !important; left: 0;
}
.tsc_ribbon_wrap .left-edge.fork > span { border-radius: 5px 0 0 0;
}
.tsc_ribbon_wrap .left-edge.fork > span:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; left: 0; transform: rotate(-45deg);
}
.tsc_ribbon_wrap.ie8 .left-edge.fork > span:before { display: none;
}
.tsc_ribbon_wrap .left-edge.fork > span:after { border-style: solid; border-width: 20px; right: -20px; top: 0;
}
.tsc_ribbon_wrap .left-edge.fork:before { background: none repeat scroll 0 0 #666666; bottom: 5px; box-shadow: 25px 8px 4px rgba(0, 0, 0, 0.5); height: 20px; right: 22px; transform: rotate(-22deg) skew(18deg, 28deg); width: 80px;
}
.tsc_ribbon_wrap .left-edge.fork:after { background: none repeat scroll 0 0 #666666; box-shadow: 20px -5px 4px rgba(0, 0, 0, 0.5); height: 20px; right: 22px; top: 5px; transform: rotate(32deg) skew(-18deg, -28deg); width: 80px;
}
.tsc_ribbon_wrap.ie8 .left-edge.fork:before, .tsc_ribbon_wrap.ie8 .left-edge.fork:after { display: none;
}
.tsc_ribbon_wrap .right-edge.fork { border-radius: 0 5px 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); height: 40px; line-height: 40px; right: -5px; top: 20px; width: 120px;
}
.tsc_ribbon_wrap.ie8 .right-edge.fork { border-radius: 0 0 0 0; box-shadow: none !important; right: 0;
}
.tsc_ribbon_wrap .right-edge.fork > span { border-radius: 0 5px 0 0;
}
.tsc_ribbon_wrap .right-edge.fork > span:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; right: 0; transform: rotate(45deg);
}
.tsc_ribbon_wrap.ie8 .right-edge.fork > span:before { display: none;
}
.tsc_ribbon_wrap .right-edge.fork > span:after { border-style: solid; border-width: 20px; left: -20px; top: 0;
}
.tsc_ribbon_wrap .right-edge.fork:before { background: none repeat scroll 0 0 #666666; bottom: 5px; box-shadow: -25px 8px 4px rgba(0, 0, 0, 0.5); height: 20px; left: 22px; transform: rotate(22deg) skew(-18deg, -28deg); width: 80px;
}
.tsc_ribbon_wrap .right-edge.fork:after { background: none repeat scroll 0 0 #666666; box-shadow: -20px -5px 4px rgba(0, 0, 0, 0.5); height: 20px; left: 22px; top: 5px; transform: rotate(-32deg) skew(18deg, 28deg); width: 80px;
}
.tsc_ribbon_wrap.ie8 .right-edge.fork:before, .tsc_ribbon_wrap.ie8 .right-edge.fork:after { display: none;
}
.tsc_ribbon_wrap.ie8 .lblue, .tsc_ribbon_wrap .lblue > span, .tsc_ribbon_wrap .lblue.left-corner > span:before, .tsc_ribbon_wrap .lblue.left-corner > span:after, .tsc_ribbon_wrap .lblue.right-corner > span, .tsc_ribbon_wrap .lblue.right-corner > span:before, .tsc_ribbon_wrap .lblue.right-corner > span:after { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D);
}
.tsc_ribbon_wrap .lblue.left-corner:before { border-bottom-color: #174C66; border-left-color: #174C66;
}
.tsc_ribbon_wrap .lblue.left-corner:after { border-right-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.right-corner:before { border-left-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.right-corner:after { border-bottom-color: #174C66; border-right-color: #174C66;
}
.tsc_ribbon_wrap .lblue.left-edge.point:after, .tsc_ribbon_wrap .lblue.right-edge.point:after { background-color: #42A5D4; background-image: linear-gradient(-45deg, #42A5D4, #24769D);
}
.tsc_ribbon_wrap .lblue.left-edge:before { border-left-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.right-edge:before { border-right-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.left-edge.fork > span { background-color: #42A5D4; background-image: -moz-linear-gradient(left center , #42A5D4 0px, #42A5D4 5px, #24769D 15%, #24769D 65%, #42A5D4 100%);
}
.tsc_ribbon_wrap.ie8 .lblue.left-edge.fork > span {
}
.tsc_ribbon_wrap .lblue.left-edge.fork > span:after { border-color: #42A5D4 transparent #42A5D4 #42A5D4;
}
.tsc_ribbon_wrap .lblue.left-edge.fork > span:before { border-left-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap .lblue.right-edge.fork > span { background-color: #42A5D4; background-image: -moz-linear-gradient(right center , #42A5D4 0px, #42A5D4 5px, #24769D 15%, #24769D 65%, #42A5D4 100%);
}
.tsc_ribbon_wrap.ie8 .lblue.right-edge.fork > span {
}
.tsc_ribbon_wrap .lblue.right-edge.fork > span:after { border-color: #42A5D4 #42A5D4 #42A5D4 transparent;
}
.tsc_ribbon_wrap .lblue.right-edge.fork > span:before { border-right-color: #174C66; border-top-color: #174C66;
}
.tsc_ribbon_wrap.ie8 .lred, .tsc_ribbon_wrap .lred > span, .tsc_ribbon_wrap .lred.left-corner > span:before, .tsc_ribbon_wrap .lred.left-corner > span:after, .tsc_ribbon_wrap .lred.right-corner > span, .tsc_ribbon_wrap .lred.right-corner > span:before, .tsc_ribbon_wrap .lred.right-corner > span:after { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000);
}
.tsc_ribbon_wrap .lred.left-corner:before { border-bottom-color: #5F0000; border-left-color: #5F0000;
}
.tsc_ribbon_wrap .lred.left-corner:after { border-right-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.right-corner:before { border-left-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.right-corner:after { border-bottom-color: #5F0000; border-right-color: #5F0000;
}
.tsc_ribbon_wrap .lred.left-edge.point:after, .tsc_ribbon_wrap .lred.right-edge.point:after { background-color: #F80000; background-image: linear-gradient(-45deg, #F80000, #A30000);
}
.tsc_ribbon_wrap .lred.left-edge:before { border-left-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.right-edge:before { border-right-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.left-edge.fork > span { background-color: #F80000; background-image: -moz-linear-gradient(left center , #F80000 0px, #F80000 5px, #A30000 15%, #A30000 65%, #F80000 100%);
}
.tsc_ribbon_wrap.ie8 .lred.left-edge.fork > span {
}
.tsc_ribbon_wrap .lred.left-edge.fork > span:after { border-color: #F80000 transparent #F80000 #F80000;
}
.tsc_ribbon_wrap .lred.left-edge.fork > span:before { border-left-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_wrap .lred.right-edge.fork > span { background-color: #F80000; background-image: -moz-linear-gradient(right center , #F80000 0px, #F80000 5px, #A30000 15%, #A30000 65%, #F80000 100%);
}
.tsc_ribbon_wrap.ie8 .lred.right-edge.fork > span {
}
.tsc_ribbon_wrap .lred.right-edge.fork > span:after { border-color: #F80000 #F80000 #F80000 transparent;
}
.tsc_ribbon_wrap .lred.right-edge.fork > span:before { border-right-color: #5F0000; border-top-color: #5F0000;
}
.tsc_ribbon_hang { margin-bottom: 60px;
}
.tsc_ribbon_hang:last-child { margin-bottom: 0;
}
.tsc_ribbon_hang > div { display: inline-block; margin: 0 40px 40px 0;
}
.tsc_ribbon_hang > div:last-of-type { margin-right: 0;
}
.tsc_ribbon_hang .ribbon-bookmark { border-radius: 3px 3px 0 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); color: #FFFFFF; margin: 20px auto; position: relative; text-align: center; z-index: 0;
}
.tsc_ribbon_hang.ie8 .ribbon-bookmark { box-shadow: none;
}
.tsc_ribbon_hang .ribbon-bookmark > span { border-radius: 3px 3px 0 0; display: block; position: relative;
}
.tsc_ribbon_hang .ribbon-bookmark.small > span { height: 82px; line-height: 82px; width: 50px;
}
.tsc_ribbon_hang .ribbon-bookmark.medium > span { height: 124px; line-height: 124px; width: 80px;
}
.tsc_ribbon_hang .ribbon-bookmark.large > span { height: 166px; line-height: 166px; width: 120px;
}
.tsc_ribbon_hang .ribbon-bookmark > span:before, .tsc_ribbon_hang.ie8 .ribbon-bookmark .fork { border-style: solid; content: ""; left: 0; position: absolute; top: 100%; z-index: -1;
}
.tsc_ribbon_hang.ie8 .ribbon-bookmark > span:before { display: none;
}
.tsc_ribbon_hang .small > span:before, .tsc_ribbon_hang.ie8 .small .fork { border-width: 25px; margin-top: -25px;
}
.tsc_ribbon_hang .medium > span:before, .tsc_ribbon_hang.ie8 .medium .fork { border-width: 40px; margin-top: -40px;
}
.tsc_ribbon_hang .large > span:before, .tsc_ribbon_hang.ie8 .large .fork { border-width: 60px; margin-top: -60px;
}
.tsc_ribbon_hang .ribbon-bookmark:before { background: none repeat scroll 0 0 #666666; box-shadow: 0 6px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.5); content: ""; left: 1px; position: absolute; transform: skew(-20deg, -38deg) rotate(-20deg); transform-origin: 0 0 0; z-index: -2;
}
.tsc_ribbon_hang .ribbon-bookmark:after { background: none repeat scroll 0 0 #666666; box-shadow: 0 7px 2px rgba(0, 0, 0, 0.5), 1px -1px 2px rgba(0, 0, 0, 0.5); content: ""; position: absolute; right: 1px; transform: skew(20deg, 38deg) rotate(20deg); transform-origin: right 0 0; z-index: -2;
}
.tsc_ribbon_hang.ie8 .ribbon-bookmark:before, .tsc_ribbon_hang.ie8 .ribbon-bookmark:after { display: none;
}
.tsc_ribbon_hang .ribbon-bookmark.small:before, .tsc_ribbon_hang .ribbon-bookmark.small:after { bottom: -35px; height: 35px; width: 25px;
}
.tsc_ribbon_hang .ribbon-bookmark.medium:before, .tsc_ribbon_hang .ribbon-bookmark.medium:after { bottom: -55px; height: 55px; width: 40px;
}
.tsc_ribbon_hang .ribbon-bookmark.large:before, .tsc_ribbon_hang .ribbon-bookmark.large:after { bottom: -85px; height: 85px; width: 60px;
}
.tsc_ribbon_hang .ribbon-bookmark.small:before { box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.5);
}
.tsc_ribbon_hang .ribbon-bookmark.small:after { box-shadow: 0 5px 2px rgba(0, 0, 0, 0.5), 1px -1px 2px rgba(0, 0, 0, 0.5);
}
.tsc_ribbon_hang .ie8 .ribbon-bookmark.small { box-shadow: none;
}
.tsc_ribbon_hang .lblue { background: none repeat scroll 0 0 #42A5D4;
}
.tsc_ribbon_hang .lblue > span { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D);
}
.tsc_ribbon_hang .lblue > span:before, .tsc_ribbon_hang.ie8 .lblue .fork { border-color: #24769D #24769D transparent;
}
.tsc_ribbon_hang .lred { background: none repeat scroll 0 0 #F80000;
}
.tsc_ribbon_hang .lred > span { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000);
}
.tsc_ribbon_hang .lred > span:before, .tsc_ribbon_hang.ie8 .lred .fork { border-color: #A30000 #A30000 transparent;
}
.tsc_ribbon_hang .lgreen { background: none repeat scroll 0 0 #80B73D;
}
.tsc_ribbon_hang .lgreen > span { background-color: #80B73D; background-image: -moz-linear-gradient(center top , #80B73D, #547728);
}
.tsc_ribbon_hang .lgreen > span:before, .tsc_ribbon_hang.ie8 .lgreen .fork { border-color: #547728 #547728 transparent;
}
.tsc_ribbon_hang .lyellow { background: none repeat scroll 0 0 #FFC037;
}
.tsc_ribbon_hang .lyellow > span { background-color: #FFC037; background-image: -moz-linear-gradient(center top , #FFC037, #E19A00);
}
.tsc_ribbon_hang .lyellow > span:before, .tsc_ribbon_hang.ie8 .lyellow .fork { border-color: #E19A00 #E19A00 transparent;
}
.tsc_ribbon_banner { margin: 30px 0; position: relative; z-index: 0;
}
.tsc_ribbon_banner > div { margin-bottom: 40px;
}
.tsc_ribbon_banner > div:last-of-type { margin-bottom: 0;
}
.tsc_ribbon_banner .ribbon-banner { color: #FFFFFF; height: 40px; line-height: 40px; margin: 0 auto; position: relative; text-align: center; width: 320px;
}
.tsc_ribbon_banner .ribbon-banner > span { display: block; height: 100%; position: relative;
}
.tsc_ribbon_banner .ribbon-banner > span:before, .tsc_ribbon_banner .ribbon-banner > span:after { border-color: transparent; border-style: solid; border-width: 14px; content: ""; position: absolute; z-index: -1;
}
.tsc_ribbon_banner.ie8 .ribbon-banner > span:before, .ie8 .ribbon-banner > span:after { display: none;
}
.tsc_ribbon_banner .ribbon-banner > span:before { left: -14px;
}
.tsc_ribbon_banner .ribbon-banner > span:after { right: -14px;
}
.tsc_ribbon_banner .ribbon-banner:before { border-style: solid; border-width: 20px 25px 20px 20px; content: ""; left: -31px; position: absolute; z-index: -2;
}
.tsc_ribbon_banner .ribbon-banner:after { border-style: solid; border-width: 20px 20px 20px 25px; content: ""; position: absolute; right: -31px; z-index: -2;
}
.tsc_ribbon_banner .fold-down > span { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.tsc_ribbon_banner .fold-down > span:before, .tsc_ribbon_banner .fold-down > span:after { bottom: -14px;
}
.tsc_ribbon_banner .fold-down:before { top: 14px;
}
.tsc_ribbon_banner .fold-down:after { top: 14px;
}
.tsc_ribbon_banner .fold-straight > span { box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.1);
}
.tsc_ribbon_banner .fold-straight > span:before, .tsc_ribbon_banner .fold-straight > span:after { display: none;
}
.tsc_ribbon_banner .fold-straight:before { border-width: 18px 23px 18px 18px; top: 2px;
}
.tsc_ribbon_banner .fold-straight:after { border-width: 18px 18px 18px 23px; top: 2px;
}
.tsc_ribbon_banner .curve.fold-up { border-radius: 0 0 50% 50%;
}
.tsc_ribbon_banner .curve > span { box-shadow: none;
}
.tsc_ribbon_banner .curve.fold-up > span:after { border: 0 none; border-radius: 0 0 50% 50%; height: 100%; left: 0; top: -40px; width: 100%;
}
.tsc_ribbon_banner .curve.fold-up > span:before { background-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%), -moz-linear-gradient(right center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%); background-position: left top, right top; background-repeat: no-repeat, no-repeat; background-size: 10px 40px, 10px 40px; border: 0 none; border-radius: 50% 50% 50% 50%; height: 100%; left: 0; top: -40px; width: 100%;
}
.tsc_ribbon_banner.ie .curve.fold-up > span:before { display: none;
}
.tsc_ribbon_banner.ie .curve.fold-up > span .before { border-left: 10px solid rgba(0, 0, 0, 0.35); border-radius: 10px 10px 10px 10px; border-right: 10px solid rgba(0, 0, 0, 0.35); height: 100%; left: 0; position: absolute; right: 0; top: -27px; z-index: -1;
}
.tsc_ribbon_banner .curve.fold-up:before { left: -34px; top: -27px;
}
.tsc_ribbon_banner.ie8 .curve.fold-up:before { left: -31px; top: -14px;
}
.tsc_ribbon_banner .curve.fold-up:after { right: -34px; top: -27px;
}
.tsc_ribbon_banner.ie8 .curve.fold-up:after { right: -31px; top: -14px;
}
.tsc_ribbon_banner .lblue, .tsc_ribbon_banner.ie8 .lblue > span { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D);
}
.tsc_ribbon_banner .lblue > span:before { border-right-color: #174C66;
}
.tsc_ribbon_banner .lblue > span:after { border-left-color: #174C66;
}
.tsc_ribbon_banner .lblue:before { border-color: #24769D #24769D #24769D transparent;
}
.tsc_ribbon_banner .lblue:after { border-color: #24769D transparent #24769D #24769D;
}
.tsc_ribbon_banner .lblue.curve.fold-up > span:after { box-shadow: 0 19px 0 #42A5D4;
}
.tsc_ribbon_banner .lred, .tsc_ribbon_banner.ie8 .lred > span { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000);
}
.tsc_ribbon_banner .lred > span:before { border-right-color: #5F0000;
}
.tsc_ribbon_banner .lred > span:after { border-left-color: #5F0000;
}
.tsc_ribbon_banner .lred:before { border-color: #A30000 #A30000 #A30000 transparent;
}
.tsc_ribbon_banner .lred:after { border-color: #A30000 transparent #A30000 #A30000;
}
.tsc_ribbon_banner .lred.curve.fold-up > span:after { box-shadow: 0 19px 0 #F80000;
}
.tsc_ribbon_banner .lgreen, .tsc_ribbon_banner.ie8 .lgreen > span { background-color: #80B73D; background-image: -moz-linear-gradient(center top , #80B73D, #547728);
}
.tsc_ribbon_banner .lgreen > span:before { border-right-color: #304417;
}
.tsc_ribbon_banner .lgreen > span:after { border-left-color: #304417;
}
.tsc_ribbon_banner .lgreen:before { border-color: #547728 #547728 #547728 transparent;
}
.tsc_ribbon_banner .lgreen:after { border-color: #547728 transparent #547728 #547728;
}
.tsc_ribbon_banner .lgreen.curve.fold-up > span:after { box-shadow: 0 19px 0 #80B73D;
}
.tsc_ribbon_banner .lyellow, .tsc_ribbon_banner.ie8 .lyellow > span { background-color: #FFC037; background-image: -moz-linear-gradient(center top , #FFC037, #E19A00);
}
.tsc_ribbon_banner .lyellow > span:before { border-right-color: #9D6C00;
}
.tsc_ribbon_banner .lyellow > span:after { border-left-color: #9D6C00;
}
.tsc_ribbon_banner .lyellow:before { border-color: #E19A00 #E19A00 #E19A00 transparent;
}
.tsc_ribbon_banner .lyellow:after { border-color: #E19A00 transparent #E19A00 #E19A00;
}
.tsc_ribbon_banner .lyellow.curve.fold-up > span:after { box-shadow: 0 19px 0 #FFC037;
}
Ribbons - Script Codes
Ribbons - Script Codes
Home Page Home
Developer AxeLVaisper
Username AxeLVaisper
Uploaded November 09, 2022
Rating 3.5
Size 6,941 Kb
Views 28,336
Do you need developer help for Ribbons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

AxeLVaisper (AxeLVaisper) Script Codes
Name
Metro KIT UI
Icofont hover effects
Fade loading
JQuery folder tabs
Funny menu
Navbar with 3D effect
Slideshow in css
Funny Spider XD
Mini Admin panel
Slider in only css
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!