Menu
I want to add a feather to some images. This is the result I want to end up with:
I realize that this question has been posted before, and I have already looked at the options using for example the box-shadow attr. I though have a problem with this method. I'm going to have this picture on top of a webm, so the background isn't always going to stay the same. That's why I have to make the feather transparent, which I have had no luck with yet! Is this even doable in CSS? This is the result I get when I use box-shadow up until now:
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>I know that a lot of you will just comment that I can set the color of the shadow equal to green, but as defined earlier I want to make it transparent because the background will constantly change.
Thanks in advance for any comments!
253
You could do it with javascript, here's a simple jQuery plugin I just made that works with background images and certain markup.
It's not a completed and tested plugin in any way, I just made it in a few minutes to show the concept, with a few lines of code
$.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();
});
}
And here's a demonstration
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
