Blog

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/