How to make transparent pen pref css

Question

How to make transparent pen pref css

I want to add a pen to some images. As a result, I want to end up with:

This picture

I understand that this issue has been published before, and I considered the options, using, for example box-shadow attr. I have a problem with this method. I will have this picture on top webm, so the background will not always remain the same. That’s why I have to make the pen transparent, which I’m not lucky with yet! Is this even doable in CSS? This is the result that I get when I use box-shadow so far:

body{
  background:green; 
}
div {
  background: red; 
  width: 200px;
  height: 142px;
  position: relative;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-box-shadow: inset 0 0 18px 20px #fff;
  box-shadow: inset 0 0 18px 20px #fff;
}

<html>
<body>
  <div></div>
</body>
</html>

Run code Hide result

I know that many of you will simply comment that I can set the shadow color to green, but as defined earlier, I want to make it transparent, because the background will constantly change.

Thanks in advance for any comments!

+4

javascript jquery html css

Rein Oterholm 21 . '15 19:56

2

adeneo · Answer 1 · 2015-12-21T21:04:48+0000

javascript, jQuery, , .

, ,

$.fn.blurry = function(amount) {
    amount = amount || 10;
    return this.each(function() {
        var els = [];

        for (var i = amount; i--;) {
            var el = $('<' + this.tagName + '/>'),
                a  = amount - i;

            el.css('cssText', this.style.cssText);
            el.css({
                position : 'absolute',
                top      : $(this).position().top  + a,
                left     : $(this).position().left + a,
                height   : $(this).height() - (a*2),
                width    : $(this).width() - (a*2),
                opacity  : 1/i,
                backgroundPosition : '-' + a + 'px -' + a +'px'
            });
            els.push(el);
        }

        $(this).parent().append(els).end().remove();
    });
}

Radames E. Hernandez D.L.R. · Answer 2 · 2015-12-21T20:05:20+0000

:

HTML:

<figure>
  <figcaption></figcaption>
  <img src="your-image.jpg" alt="">
</figure>

Css:

figure{
  position: relative;
  display: inline-block;
}
figure figcaption{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 18px 20px #fff;
}

, ...

How to make transparent pen pref css

More articles: