Blur effect on the entire webpage
Here's some results, if by blur you mean fuzziness:
This guy uses image shifting and opacity techniques in combo, I know your users are looking at a blurred website, but if there's no easy solution then perhaps taking a snapshot of your rego page and overlaying the image then it might do:
http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur
If you wanted to attempt duplicating your rego page, given that it may be a) disabled and b) minimal, then perhaps you could even have a bash at using the above image technique and applying it to node sets, offsetting the copies with CSS positioning and opacity - idk if zoom might help you too there. Even if your page was minimal enough, this would obviously require Javascript to duplicate the nodes, unless your backend can do this node duplication. Just an idea, really. Here's a really awful, very quick example:
http://jsfiddle.net/9qnsz/2/
This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:
Gaussian Blur onHover Using jQuery
EDIT: As requested, the contents of the jsfiddle:
<div class="container">
<div class="overlay">
<p>Please register etc etc...</p>
</div>
<form action="javascript:;" class="form0">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form1">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form2">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form3">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
<form action="javascript:;" class="form4">
<input type="text" value="Username" />
<input type="text" value="Password" />
<button>Submit</button>
</form>
</div>
.container {
width:500px;
height:500px;
position:relative;
border:1px solid #CCC;
}
form {
position:absolute;
left:10px;
top:10px;
}
form.form0 {
left:11px;
top:11px;
opacity:0.1;
}
form.form1 {
left:8px;
top:8px;
opacity:0.1;
zoom:1.02;
}
form.form2 {
left:11px;
top:11px;
opacity:0.1;
zoom:1.01;
}
form.form3 {
left:9px;
top:9px;
opacity:0.2;
}
form.form4 {
left:11px;
top:11px;
opacity:0.1;
}
.overlay {
width:250px;
height:250px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
border:1px solid #666;
}
Blur the whole page except a div
You should use not for this.
If you use .container div:not(.center) your problem should be solved.
.container div:not(.center){
width:100%;
height:100%;
min-height:400px;
position:relative;
filter: blur(0.5rem);
z-index:1;
}
.text{
width:50%;
}
.center{
width:200px;
height:200px;
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
background:#f00;
z-index:10;
filter: blur(0);
filter: none;
}<div class="container">
<div class="title">
<h1>
some text
</h1>
</div>
<div class="text">
<p>
some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
</p>
</div>
<div class="center"></div>
</div>How to blur arbitrary area on web page?
You can use the svg solution like here or canvas solution like here but in the near future we will make it using just css, the webkit feature backdrop-filter works only on safari at now. Try the snippet on safari to see how it works.
body{
margin:0px;
}
.container{
position:relative;
height:100vh;
width:100%;
background-image:url(http://cdn.playbuzz.com/cdn/d2b06305-f201-4127-8eb7-7410bcc0de02/2d6c2415-2b8c-430c-87a4-c516409d8488.jpg);
background-size: cover;
background-position:center center;
}
.blur{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:200px;
height: 100px;
-webkit-backdrop-filter: blur(5px);
}<div class="container">
<div class="blur"></div>
</div>How to blur background of webpage and make it not interactable in certain areas?
You can add this class on your main element container to blur the whole background
.blured {
filter: blur(2px);
-webkit-filter: blur(2px);
}
And add pointer-events: none; on your modal or popup
Blur Filter for full page navigation
You could target as well from your script the main content to blur :
$('.nav').hide();
$('.hamburger').click(function(){
$('.nav').fadeToggle('slow');
$('.hamburger div').toggleClass('turn-white');
$('.example-content').toggleClass('blur');
});
$('.nav-dropdown-toggle > span > a, .navigation > li > a, .nav-dropdown > li > a').click(function(){
$('.nav').fadeToggle('slow');
$('body').toggleClass('disable-scroll');
});.nav{
height:100vh;
width:100%;
position:fixed;
z-index:5;
display:none;
text-align:right;
}
#nav_bg {
height:100%;
width:100%;
position:absolute;
z-index:100;
background-color:rgba(0,0,0,0.5);
}
.blur{
filter: blur(5px);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hamburger">Menu Button</button>
<div class="nav">
<div id="nav_bg"></div>
<ul class="navigation">
<li class="nav-dropdown-toggle"><span><a href="#packages">Packages</a></span>
<ul class="nav-dropdown">
<li><a>Business Packages</a></li>
<li><a>Top Producers</a></li>
<li><a>Video Ads</a></li>
<li><a>Proud Community Sponsor</a></li>
</ul>
</li>
<li><a href="#campaigns">Campaign Options</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Log In</a></li>
<li>
<a href="https://www.facebook.com/Supporting-Our-Community-com-1081805428499269/?ref=hl" class="social"><img src="img/402-facebook2.svg"></a>
<a href="https://www.youtube.com/channel/UCvmPcOGA69v2onNJHDAFwYg" class="social"><img src="img/414-youtube.svg" style="width:47px;"></a>
<a href="https://www.linkedin.com/in/SupportingOurCommunity" class="social"><img src="img/458-linkedin.svg"></a>
</li>
</ul>
</div>
<div class="example-content">
<h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3> <h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3>
<h3>THIS SHOULD BE BLURRED</h3>How do I make the background image for my page blurry without affecting any of the other content on the page?
After body, you need to add a<div>tag with the css property:backdrop-filter: blur (1px);before the rest of the page.
Here's an example:
body {
margin: 0;
padding: 0;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/NGC_4414_%28NASA-med%29.jpg/1024px-NGC_4414_%28NASA-med%29.jpg');
color: #fff;
width: 100%
}
main {
width: 50%;
border: 5px solid red;
}
#amazing__filter{
backdrop-filter: blur(4px);
background: #ffffff20;
width: 100vw;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-direction: column;
}
footer {
width: 100%;
height: 40px;
}<html>
<head>
</head>
<body>
<div id="amazing__filter">
<main>
<header>
<h1>
A spectacular solution to the problem
</h1>
</header>
<h2>
List of the same words to fill the page
</h2>
<ol>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
</ol>
</main>
<aside>
</aside>
<footer>
<p>Footer</p>
</footer>
</div>
</body>
</html>Related Topics
Adding Custom CSS Tags to an Rmarkdown HTML Document
Bootstrap 4 Responsive Button Size
CSS - Position: Absolute; - Auto Height
Force Vertical Scrollbar to Display in IE8
Css3 Transformation Blurry Borders
CSS Style - Percentage VS Em VS Px
Why We Always Use <Ul> to Make Navigation Why Not <Ol>
How to Remove Clear Button ( 'X' Button ) from Ie10 Textboxes in Compatibility Mode
Firefox Line-Height Issue with Input Fields
Css3 Appearance Property for Ie
Prevent Twitter Bootstrap Empty <Dd> Filling with Next <Dd> Value
CSS Styling - How to Put These Two Div Boxes Adjacent
Select Elements Where Attribute Is Non-Empty
How to Make Half-Square Background in CSS
Animate Transform Only One Property (Scale) Override Other (Translate)