Dynamic Stamp Effect Using Radial Gradient

Question

This example (not my code):

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

Show how to use the radial gradient to apply the effect of smooth edges.

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>

Run codeHide result

but when using this method with images of arbitrary size (user-created images). the edges are displayed in the wrong place. and the whole effect looks ugly.

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

Answer 1

To achieve this desired result, I was forced to place your image as the background of your class .stamp.

, , , , .

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>

Hide result

---

, border-image,

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>

Hide result

• border-image

Answer 2

.

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 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>

Hide result

.. , . .stamp, font-size , font-size : 0 .stamp.