Cacher is the code snippet organizer for pro developers

.featured{
    margin: 40px auto 30px auto;
    width: 200px;
    height: 180px;
    background: white;
    box-shadow: -1px -1px 10px #DDD;
}

/* This bit does the rhombus that sits in the top left hand corner */
.featured:before{
    content: "";
    display: block;
    position: relative;
    width:0px;
    height: 0px;
    top: 5px;
    left: -40px;
    
    width: 80px;
    height: 20px;
    box-shadow: 0 2px 0 #DDD;
    
    text-align: center;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    
    /* Rhombus */
    border-width: 0 30px 30px 30px;
    border-style: solid;
    border-color: transparent transparent #3AE transparent;
    
    
}

/* This does the text "featured" and the gradient that makes it look curved */
.featured:after{
    display: block;
    position: relative;
    content: "featured";
    
    color: green;
    top: -29px;
    left: -33px;
    width: 140px;
    height: 28px;
    padding-top: 5px;
    
    background: transparent;
    background-image:
        
        -webkit-linear-gradient(45deg, 
        transparent 0%,
        transparent 77%,
        rgba(255,255,255,0.3) 80%,
        rgba(255,255,255,0.3) 81%, 
        rgba(0,0,0,0.4) 82%,
        transparent 83%
        ),
        
        -webkit-linear-gradient(-45deg,
        transparent 0%,
        transparent 17%,
        rgba(0,0,0,0.5) 18%,
        rgba(255,255,255,0.3) 19%,
        rgba(255,255,255,0.3) 20%,
        transparent 23%
        );
    background-image:
        -moz-linear-gradient(45deg, 
        transparent 0%,
        transparent 77%,
        rgba(255,255,255,0.3) 80%,
        rgba(255,255,255,0.3) 81%, 
        rgba(0,0,0,0.4) 82%,
        transparent 83%
        ),
        -moz-linear-gradient(-45deg,
        transparent 0%,
        transparent 17%,
        rgba(0,0,0,0.5) 18%,
        rgba(255,255,255,0.3) 19%,
        rgba(255,255,255,0.3) 20%,
        transparent 23%
        );
    
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    
    color: rgba(0,0,0,0.5);
    font-weight: bold;
    font-family: georgia, 'Times New Roman', Times, serif;
    text-align: center;
    text-shadow: 0 1px rgba(255,255,25,0.1);
}


body{
    
    background:
        -webkit-radial-gradient(rgba(0,0,0,0.05) 15%, transparent 16%) 0 0,
        -webkit-radial-gradient(rgba(0,0,0,0.05) 15%, transparent 16%) 8px 8px,
        -webkit-radial-gradient(rgba(0,0,0,.05) 15%, transparent 20%) 0 1px,
        -webkit-radial-gradient(rgba(0,0,0,.05) 15%, transparent 20%) 8px 9px;
    
    background:
        -moz-radial-gradient(rgba(0,0,0,0.05) 15%, transparent 16%) 0 0,
        -moz-radial-gradient(rgba(0,0,0,0.05) 15%, transparent 16%) 8px 8px,
        -moz-radial-gradient(rgba(0,0,0,.05) 15%, transparent 20%) 0 1px,
        -moz-radial-gradient(rgba(0,0,0,.05) 15%, transparent 20%) 8px 9px;
    
    background-color:#FAFAFA;
    background-size:16px 16px;
}