Search code examples
cssradial-gradients

Dynamic stamp effect using radial-gradient

This example (not my code):

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

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

enter image description here

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.

enter image description here

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

Solution

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