Dynamic stamp effect using radial-gradient - css

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.