March 5, 2015

Create stamp border using CSS3

Create stamp border using CSS3

A stamp created using CSS3. It does not require any border images. This pattern is created using CSS3 radial gradients behind the image creates the effect.


<div class="stamp">
   <img src="" />


* {margin: 0; padding: 0;}

.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));
 background: radial-gradient(
  transparent 0px, 
  transparent 4px, 
  white 4px,
 background-size: 20px 20px;
 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;
 z-index: -1;

.stamp:before {
 content: 'CSS3';
 position: absolute;
 bottom: 0; left: 0;
 font: bold 24px arial;
 color: white;
 opacity: 0.75;
 line-height: 100%;
 padding: 20px;


No comments:

Post a Comment

Popular Posts