END by Catt http://drbl.in/jJIr. Wanna know how I made this? http://katydecorah.com/code/2014/01/01/z-index-and-transform/
A Pen by Katy DeCorah on CodePen.
END by Catt http://drbl.in/jJIr. Wanna know how I made this? http://katydecorah.com/code/2014/01/01/z-index-and-transform/
A Pen by Katy DeCorah on CodePen.
.ribbon{:contenteditable=>"true"} -end- |
/* | |
END by Catt http://drbl.in/jJIr. | |
Wanna know how I made this? http://katydecorah.com/code/2014/01/01/z-index-and-transform/ | |
*/ |
@import "compass"; | |
$bg: #f4f4f4; | |
$ribbon: #4b9ae5; | |
$tail: darken($ribbon,5%); | |
$ribbonSize: 0.5em; | |
$fontSize: 2.5em; | |
$font: 'Roboto', sans-serif; | |
body { | |
background: $bg; | |
font-family: $font; | |
} | |
.ribbon { | |
background: $ribbon; | |
display: inline-block; | |
color: $bg; | |
padding: $ribbonSize 0.7em; | |
font-weight: 900; | |
letter-spacing: 0.2em; | |
position: relative; | |
font-size: $fontSize; | |
text-transform: uppercase; | |
@include transform-style(preserve-3d); | |
@include transform(rotate(-20deg) skew(-20deg,10deg) translateZ(1em)); | |
&:before, &:after { | |
content: ""; | |
width: 0; | |
height: 1em; | |
display: block; | |
background: #4993da; | |
position: absolute; | |
border-style: solid; | |
border-width: $ribbonSize; | |
z-index:-1; // only necessary for flat (transform-style) | |
@include transform(translateZ(-1em)); // orders the ribbon tails | |
} | |
&:before { | |
left: $ribbonSize * -1; | |
top: $ribbonSize; | |
border-color: $tail darken($tail,10%) $tail $tail; | |
} | |
&:after { | |
right: $ribbonSize * -1; | |
top: $ribbonSize * -1; | |
border-color: $tail $tail $tail darken($tail,10%); | |
} | |
} |