blur

How can I make a CSS glass/blur effect work for an overlay?

由 假如想象 提交于 2019-11-26 23:58:53
I am having trouble applying a blur effect on a semi-transparent overlay div. I'd like everything behind the div the be blurred, like this: Here is a jsfiddle which doesn't work: http://jsfiddle.net/u2y2091z/ Any ideas how to make this work? I'd like to keep this as uncomplicated as possible and have it be cross-browser. Here is the CSS I'm using: #overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background:black; background:rgba(0,0,0,0.8); filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } Here is an example that

CSS blur on background image but not on content

由 好久不见. 提交于 2019-11-26 22:49:50
I did this example . I'm trying to blur the background image, but the main content is blurred too (the <span> ) How can I blur the background without blurring the content? Kevin Lynch You could overlay one element above the blurred element like so DEMO div { position: absolute; left:0; top: 0; } p { position: absolute; left:0; top: 0; } Mike Lee jsfiddle .blur-bgimage { overflow: hidden; margin: 0; text-align: left; } .blur-bgimage:before { content: ""; position: absolute; width : 100%; height: 100%; background: inherit; z-index: -1; filter : blur(10px); -moz-filter : blur(10px); -webkit

How to replicate the blurred text in Notification Center (iOS 8)

由 匆匆过客 提交于 2019-11-26 22:38:56
问题 I am playing with TodayExtension in iOS 8 and I wondered how to apply that blur effect to the Text or to buttons. I already figured out that it has something to do with UIVisualEffectView. But I don't know how to use it. I am using Objective-C Can anyone explain it to me how to achieve this? Thanks, David 回答1: Updated Answer for iOS 10 In iOS 10, you can use widgetPrimaryVibrancyEffect and widgetSecondaryVibrancyEffect to automatically return a UIVibrancyEffect object. Check out the

Alternative to “FLAG_BLUR_BEHIND” in Android?

由 允我心安 提交于 2019-11-26 21:09:38
问题 I can see that when I use the same flag as shown on the API-demos for blurring the background, I get a warning that it's deprecated: "The field WindowManager.LayoutParams.FLAG_BLUR_BEHIND is deprecated". I've read about it, and I've found that "Blurring is no longer supported". Does it mean that it won't work on future versions? Why did they deprecate it? Is there an alternative? I really like this feature. 回答1: ok , there is probably no alternative that uses the API , unless maybe i've

FFmpeg: How to convert vertical video with black sides, to video 16:9, with blurred background sides

由 ≡放荡痞女 提交于 2019-11-26 19:19:28
问题 How to make this by using FFmpeg? Example without FFmpeg: Adobe After Effects Sony Vegas Pro 回答1: I solved! ffmpeg -i input.mp4 -lavfi '[0:v]scale=ih*16/9:-1,boxblur=luma_radius=min(h\,w)/20:luma_power=1:chroma_radius=min(cw\,ch)/20:chroma_power=1[bg];[bg][0:v]overlay=(W-w)/2:(H-h)/2,crop=h=iw*9/16' -vb 800K output.webm Input: https://www.youtube.com/watch?v=17uHCHfgs60 Output: http://www.youtube.com/watch?v=CgZsDLfzrTs 回答2: The accepted answer here takes forever to execute because it is

iOS 7's blurred overlay effect using CSS?

由 ≯℡__Kan透↙ 提交于 2019-11-26 18:02:54
It seems Apple's overlay is more than just a transparency. Any ideas on how to achieve this effect with CSS and possibly JS? It is possible with CSS3 : #myDiv { -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px); opacity: 0.4; } Example here => jsfiddle You made me want to try, so I did, check out the example here: http://codepen.io/Edo_B/pen/cLbrt Using: HW Accelerated CSS filters JS for class assigning and arrow key events Images CSS Clip property that's it. I also believe this could be done dynamically for any screen if

PHP/GD : Better Gaussian blur

由 烂漫一生 提交于 2019-11-26 17:42:34
问题 I want to blur an image with GD library, unfortunately the GAUSSIAN_BLUR effect that GD gives isn't enough and i want something being more blurrish <?php $im = imagecreatefrompng($_GET['image']); if($im && imagefilter($im, IMG_FILTER_GAUSSIAN_BLUR)) { header('Content-Type: image/png'); imagepng($im); } else { echo 'fail'; } imagedestroy($im); I want something like this or at least near it. 回答1: You can try convolution: $gaussian = array(array(1.0, 2.0, 1.0), array(2.0, 4.0, 2.0), array(1.0, 2

How to draw a blurry circle on HTML5 canvas?

由 送分小仙女□ 提交于 2019-11-26 17:37:07
问题 I'm able to draw a simple circle on HTML5 canvas, but I'd like to add some blur around it. What I found was this website which explains the shadowBlur property which can come in handy here. However, I cannot manage to make the circle itself blurry. What the shadowBlur property basically does is painting some blur effect after the regular circle has been drawn. What I've tried so far I've put on jsFiddle. As can be seen, it's a solid filled circle with some blur effect around it - the two

How to implement a box or gaussian blur on iOS

由 荒凉一梦 提交于 2019-11-26 15:08:09
问题 I want to be able to take an image and blur it relatively quickly (say in 0.1 sec). Image size would almost never be larger than 256 x 256 px. Do I have to loop thru every pixel and average them with neighbors or is there a higher-level way that I could do this? PS : I am aware that multiple box blurs can approximate a gaussian blur. 回答1: I found a really fast pretty crappy way for iOS3.2+ apps UIView *myView = [self view]; CALayer *layer = [myView layer]; [layer setRasterizationScale:0.25];

JQuery.validate - one rule on blur only; the rest should be normal?

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-11-26 14:50:16
问题 I've worked on a fiddle to show the simple validation that I'm trying to do for my user ID field: Make it required (validate as aggressively as possible) Set a minimum length (validate as aggressively as possible) Set a maximum length (validate as aggressively as possible) Run an AJAX call to ensure user ID doesn't already exist ( I want to only run this on blur ) I'm not using the validate() - remote rule because I wanted to have a custom object returned instead of just a simple string. If
订阅 blur