Dynamic stamp effect using radial-gradient

Question

This example (not my code):

http://codepen.io/mohitmanuja/pen/odxic

Show how to use radial-gradient to apply a nice stamp edges effect.

HTML:

body {
  padding: 100px;
  background: #aaa;
}
.stamp {
  width: 184px;
  height: 184px;
  padding: 8px;
  background: white;
  background: radial-gradient(transparent 0px, transparent 4px, white 4px, white);
  background-size: 20px 20px;
  background-position: 10px 10px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

<div class="stamp">
  <img src="http://qualityLessons.net/Assets/images/css3html5.png" alt="css 3" width="184px" height="184px" />
</div>

but when using this method with arbitrary sized pictures (user generated pictures). the edges shows in the wrong place. and the whole effect looks ugly.

my question is: how to achieve the same effect using radial-gradient that works with any image size?

Answer 1

In order to achieve this desired result, I was forced to place your image as a background of your .stamp class.

From here, i was able to use a pseudo element to apply the radial background, setting its height and width to show outside of the shape you were looking for.

html {
  text-align: center;
  background: #aaa;
  margin-top: 20%;
}
.stamp {
  display: inline-block;
  position: relative;
  background: url(http://qualityLessons.net/Assets/images/css3html5.png);
  background-size: 100% 100%;
  height: 300px;
  width: 300px;
  margin: 10px;
}
.stamp:before {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  height: calc(100% + 20px);
  width: calc(100% + 20px);
  background: radial-gradient(transparent 0px, transparent 4px, white 4px, white);
  background-size: 20px 20px;
  background-position: 10px 10px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  z-index: -2;
}
.image2 {
  background: url(http://lorempixel.com/300/300);
  height: 200px;
  width: 280px;
}

<div class="stamp"></div>
<br />
<div class="stamp image2"></div>

---

Although this may be possible for such a task, you should possibly consider using the border-image property, in which was

div {
  border-width: 5px;
  border-style: solid;
  border-image: url("http://iconizer.net/files/Vista_Style_Base_Software/orig/Circle_Blue.png") repeat;
}

<div>Hello!</div>

• more info on border-image

Answer 2

Minute changes and job done without changing your markup.

body {
  padding: 100px;
  background: #aaa;
}
.stamp {
  /*added this*/
  font-size: 0;
  /*added this*/
  display: inline-block;
  /*changed this*/
  padding: 10px;
  /*changed this*/
  background: radial-gradient(transparent 0px, transparent 5px, #fff 1px, #fff);
  /*changed this*/
  background-size: 20px 20px;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  /*changed this*/
  background-position: 10px 10px;
}
/*just so you know it's for demo*/

.stamp {
  margin-bottom: 20px;
}

<div class="stamp">
  <img src="http://qualityLessons.net/Assets/images/css3html5.png" alt="css 3" width=500 height=300/>
</div>

<div class="stamp">
  <img src="http://qualityLessons.net/Assets/images/css3html5.png" alt="css 3" width=200 height=300/>
</div>

<div class="stamp">
  <img src="http://qualityLessons.net/Assets/images/css3html5.png" alt="css 3" width=180 height=180/>
</div>

Note - This is assuming that you have only image inside. If you have a piece of text inside the .stamp, you will need to set the font-size specifically to override the font-size : 0 on .stamp.