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.

HTML

<div class="stamp">
   <img src="http://3.bp.blogspot.com/-jAw8B_mMeME/VPgGcKkKFYI/AAAAAAAAADA/6Qq1Tic6yTg/s1600/css3logo.png" />
</div>

CSS

* {margin: 0; padding: 0;}

.stamp {
 width: 280px;
 height: 180px;
 display: inline-block;
 padding: 10px;
 background: white;
 position: relative;
  text-align:center;
 -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
 background: radial-gradient(
  transparent 0px, 
  transparent 4px, 
  white 4px,
  white
 );
 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;
}

demo

No comments:

Post a Comment

Popular Posts

Views