How to make a pen in the image?

Question

I have an image that requires the plumage effect below. how to do it using only css3.

as an example, I posted both images featheredand no-featheredindemo

anyone please suggest me the correct way to add a feather below?

Live demo

Answer 1

CSS3 Gradients were used to achieve the effect of a pen. Since the pen is at the bottom, you can use a value linear-gradient to bottomwith percentage values. those. at different stop levels.

Change opacitythe stops at each level to achieve a smoother effect.

.shadow {
  background: url(https://dl.dropboxusercontent.com/u/10268257/Feather/withFeather.png) no-repeat;
  height: 216px;
  width: 215px;
}
.no-shadow {
  background: linear-gradient(to bottom, rgba(22, 49, 102, 0) 0%, rgba(22, 49, 102, 0) 80%, rgba(22, 49, 102, 0.99) 87%, rgba(22, 49, 102, 1) 100%), url(https://dl.dropboxusercontent.com/u/10268257/Feather/withoutFeather.png);
  display: inline-block;
  height: 216px;
  width: 215px;
}

<div class="no-shadow"></div>
<div class="shadow"></div>

Run codeHide result