"card"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Lets create a CSS3 stamp --> <div class="stamp"> <!-- the image --> <img src="http://thecodeplayer.com/uploads/media/css3logo.png" /> </div>
* {margin: 0; padding: 0;} body { background: #B1d202; padding: 100px; text-align: center; } .stamp { width: 280px; height: 180px; display: inline-block; padding: 10px; background: white; position: relative; -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5)); /*The stamp cutout will be created using crisp radial gradients*/ background: radial-gradient( transparent 0px, transparent 4px, white 4px, white ); /*reducing the gradient size*/ background-size: 20px 20px; /*Offset to move the holes to the edge*/ background-position: -10px -10px; } .stamp:after { content: ''; position: absolute; /*We can shrink the pseudo element here to hide the shadow edges*/ left: 5px; top: 5px; right: 5px; bottom: 5px; /*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/ /*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/ /*pushing it back*/ z-index: -1; } /*Some text*/ .stamp:before { content: 'CSS3'; position: absolute; bottom: 0; left: 0; font: bold 24px arial; color: white; opacity: 0.75; line-height: 100%; padding: 20px; } .stamp img { }

Related: See More


Questions / Comments: