<div class="box16"> <h1>Sample Box</h1> <img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra. </p> <br /> <a href="http://www.designshock.com/"> DesignShock.com </a> <div class="box16_ribbon"></div> </div>
body { font-size: 11px; font-family: 'Open Sans', sans-serif; color: #4A4A4A ; text-align: center; } .box16{ margin: 60px auto; width: 300px; min-height: 310px; padding: 10px; position:relative; border: 2px solid #ccc; background: rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1); } .box16:before{ content: ''; top:0; width: 110%; left: 0; height: 125%; z-index:-1; position:absolute; border: 1px solid #ccc; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); -webkit-transform: translate(-5%,-5%); } .box16:after{ content: ''; top:0; width: 100%; left: 0; height: 115%; z-index:-2; background: none; position:absolute; border-radius: 20px; -webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2); -webkit-transform: translate(0,0); } .box16_ribbon{ position:absolute; top:0; left: 0; width: 130px; height: 40px; background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px); } .box16_ribbon:before{ content: ''; position:absolute; top:0; left: 0; width: 130px; height: 40px; background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -webkit-transform: rotate(0deg) skew(0,0) translate(-15px,-20px); } .box16 img { width: 100%; margin-top: 15px; } p{ margin-top: 15px; text-align: justify; } h1{ font-size: 20px; font-weight: bold; margin-top: 5px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } a{ text-decoration: none; color: #4A4A4A !important; } a:hover{ text-decoration: underline; color: #6B6B6B !important ; }