Pure css ribbons
November 13th, 2012 | Css3

NEW
★ FEATURED
NEW★ FEATURED
.course-ribbon { position: absolute; right: -11px; top: 20px; z-index: 1; } .course-ribbon:before { background: #666666 ; background: -moz-linear-gradient(#666666, #000000) ; background: -webkit-linear-gradient(#666666, #000000) ; background: -o-linear-gradient(#666666, #000000) ; background: -ms-linear-gradient(#666666, #000000) ; background: linear-gradient(#666666, #000000) ; bottom: -7px; content: ""; height: 6px; position: absolute; right: 1px; -moz-transform: skewY(-20deg); -webkit-transform: skewY(-20deg); -o-transform: skewY(-20deg); -ms-transform: skewY(-20deg); transform: skewY(-20deg); -webkit-backface-visibility: hidden; width: 10px; display: block; } .course-ribbon b { border: 1px solid #4F2C1D; border-radius: 4px; color: #fff; padding: 7px 10px 7px 8px; position: relative; box-shadow: 0 1px rgba(255, 255, 255, 0.5) inset, 0 3px 2px rgba(0, 0, 0, 0.2); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); } .course-ribbon b:before, .course-ribbon b:after { border-color: #4F2C1D; border-style: solid; content: ""; height: 50%; left: -4px; position: absolute; width: 8px; } .course-ribbon b:before { border-width: 1px 0 0 1px; box-shadow: 0 1px rgba(255, 255, 255, 0.5) inset; top: -1px; -moz-transform: skewX(21deg); -webkit-transform: skewX(21deg); -o-transform: skewX(21deg); -ms-transform: skewX(21deg); transform: skewX(21deg); -webkit-backface-visibility: hidden; } .course-ribbon b:after { border-width: 0 0 1px 1px; bottom: -1px; -moz-transform: skewX(-21deg); -webkit-transform: skewX(-21deg); -o-transform: skewX(-21deg); -ms-transform: skewX(-21deg); transform: skewX(-21deg); -webkit-backface-visibility: hidden; box-shadow: 0 5px 2px -2px rgba(0, 0, 0, 0.2); } .course-ribbon b i { font-style: normal; font-size: 20px; } .course-ribbon.orange b { background: #f79f4f ; background: -moz-linear-gradient(#f79f4f, #aa0642) ; background: -webkit-linear-gradient(#f79f4f, #aa0642) ; background: -o-linear-gradient(#f79f4f, #aa0642) ; background: -ms-linear-gradient(#f79f4f, #aa0642) ; background: linear-gradient(#f79f4f, #aa0642) ; } .course-ribbon.orange b:before { background: #f79f4f ; background: -moz-linear-gradient(#f79f4f, #d0684a) ; background: -webkit-linear-gradient(#f79f4f, #d0684a) ; background: -o-linear-gradient(#f79f4f, #d0684a) ; background: -ms-linear-gradient(#f79f4f, #d0684a) ; background: linear-gradient(#f79f4f, #d0684a) ; } .course-ribbon.orange b:after { background: #d0684a ; background: -moz-linear-gradient(#d0684a, #aa0642) ; background: -webkit-linear-gradient(#d0684a, #aa0642) ; background: -o-linear-gradient(#d0684a, #aa0642) ; background: -ms-linear-gradient(#d0684a, #aa0642) ; background: linear-gradient(#d0684a, #aa0642) ; } .course-ribbon.green b { background: #8ab933 ; background: -moz-linear-gradient(#8ab933, #4a631c) ; background: -webkit-linear-gradient(#8ab933, #4a631c) ; background: -o-linear-gradient(#8ab933, #4a631c) ; background: -ms-linear-gradient(#8ab933, #4a631c) ; background: linear-gradient(#8ab933, #4a631c) ; } .course-ribbon.green b:before { background: #8ab933 ; background: -moz-linear-gradient(#8ab933, #688b29) ; background: -webkit-linear-gradient(#8ab933, #688b29) ; background: -o-linear-gradient(#8ab933, #688b29) ; background: -ms-linear-gradient(#8ab933, #688b29) ; background: linear-gradient(#8ab933, #688b29) ; } .course-ribbon.green b:after { background: #688b29 ; background: -moz-linear-gradient(#688b29, #4a631c) ; background: -webkit-linear-gradient(#688b29, #4a631c) ; background: -o-linear-gradient(#688b29, #4a631c) ; background: -ms-linear-gradient(#688b29, #4a631c) ; background: linear-gradient(#688b29, #4a631c) ; }
→ Source: http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/