Реалистичные переключатели на CSS

http://codepen.io/yairEO/pen/pqEGJ
<div style="width:200px; height:200px; border:1px solid #ccc; display:block" class="ribbon">
asdf
<p><span>Новое</span></p>
</div>
<style>
.ribbon {
color: #fff;
position: relative;
display: inline-block;
overflow: hidden;
padding: 5px;
font-weight: 900;
font-family: Arial, sans-serif;}
.ribbon p span {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
display: inline-block;
right: -26px;
text-align: center;
position: absolute;
text-transform: uppercase;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
top: 21px;
background: red;
width: 100px;
padding: 3px 10px;}
</style>
table tr {
background: white;
}
table tr:nth-child(odd) {
background: #f4f4f4;
}
.table tbody tr:hover td{
background-color: #f5f5f5;
}
a.js-only {
-webkit-touch-callout: none;
}
span.lookLikeRadio {
-webkit-appearance: radio;
}
input[type="password"] {
-webkit-text-security: square;
}