Div blurring its background - javascript

I wanted to recreate an effect like on this page: http://goalkicker.com/Angular2Book/
Here's the thing that is interesting:
I already found on StackOverflow a few topics about that, but some of them reference sources that do not work, some use methods that do not work with Chrome. Basically I did not find any working example.
On the website, which I provided, the div has the following CSS:
#headerBackground {
width: 100%;
min-height: 50px;
position: fixed;
top: 0px;
left: 0px;
background: #ffffff;
z-index: 3;
opacity: 0.6;
box-shadow: 0px 0px 18px 0px #cccccc;
}
his is obviously not enough, the "blur/glass" part is missing. Is it possible to look "deeper" into the website's internals to reveal how it's done?

You have to place a div similar to the following before the tag at the bottom.
This is for header
<div style="left: 0px; z-index: 2; overflow: hidden; top: 0px; position: fixed; width: 1349px; height: 50px;">
<div style="position: absolute; background-color: rgb(255, 255, 255); filter: blur(10px); z-index: 1; width: 1100px; height: 3672px; left: 125px; top: 90px;">
</div>
</div>
This is for footer
<div style="left: 0px; z-index: 2; overflow: hidden; bottom: 0px; position: fixed; width: 1369px; height: 80px;">
<div style="position: absolute; background-color: rgb(255, 255, 255); filter: blur(10px); z-index: 1; width: 1100px; height: 3672px; left: 125px; top: -130px;">
</div>
</div>
If needed you can change the width of the parent div to 100% instead of exact with generated by js(I think).
And this is how the reference site's blur effect is done.

-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);

Related

div overlapping not working for safari but woking for chrome

This Image is for Chrome
this image is for safari
As u can see there is clear over lapping for header that's in red color written as mojo, in chrome its working but in safari its not I am attaching my code can any one help how to fix in safari.
I am using vue
please find the image attached above for clear understanding.
.ms-dialog__body {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.ms-dialog__content {
position: absolute;
max-height: 100%;
background-color: white;
width: calc(100% - 30px);
top: 200px;
left: $t-marg__pad * 1.5;
border-radius: $t-marg__pad;
z-index: 2;
}
.ms-dialog__cross {
position: absolute;
top: 190px;
z-index: 10;
right: 5px;
}
<template>
<div v-if="isOpen" class="ms-dialog__body">
<img
class="ms-dialog__cross"
src="#/assets/images/icons/crossbtn-red.svg"
#click="close"
/>
<div class="ms-dialog__content">
<slot></slot>
</div>
</div>
</template>

How to achieve this without using a photo editor?

Can i change:
into:
without using a photo editor
Here Is CSS and HTML code
I couldn't upload the logo because i should have at least 10 reputation to post more than 2 links so i maybe insert it in another comment
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
display: inline-block;
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg') no-repeat center center;
background-size: 100%;
}
<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
You can use opacity to create a semi-opaque image, and you may be fine with that by adjusting it to whatever you need.
But if you also want to change the color of the image darker, you can use CSS filters. You can make it darker/maroon/brown-ish by adjusting the hue. It's worth noting the browser support - https://caniuse.com/#feat=css-filters
header {
background-color: rgba(255, 255, 255, 0.9);
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
position: fixed;
width: 100%;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 2;
}
header .logo {
position: fixed;
left: 50%;
top: 13px;
max-width: 100%;
opacity: .7;
position: absolute;
top: 0; left: 0;
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg);
}
.background-image {
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background: #fff url(http://environment.umn.edu/wp-content/uploads/2016/04/global_landscapes_initiative_directory_pages.jpg) no-repeat center center;
}
<body>
<header>
<div class="header-section logo">
<a href="/">
<img src="http://i.imgur.com/IB1gfZB.png" alt="...">
</a>
</div>
</header>
<div class="background-image"></div>
</body>
looks like a one time thing - i.e. it being a logo and all - It's just a lot easier to do such a thing with Photoshop.
I up-voted Michael's answer since I believe that's as close as you can get with CSS alone. Unless there's some "hacky" way to do this.
My method:
Use Photoshop.
Then add the photo as the background image of a one of the pseudo-elements for your header div / img
I created a sample below of the expected end result.
I encoded the overlay image as Base64 since it's only 1kb in size. It should be checked with your CSS file. Read more about Base64
You can control the opacity of the pseudo-element.
.content {
width: 100%;
max-width: 100%;
height: 500px;
position: relative;
background: url(https://unsplash.it/800/310) no-repeat
}
.content::before {
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: .25;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAExCAMAAAAKr7AFAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAP///v///v///yYLV3kAAAADdFJOUwB6xLOvUwsAAAN0SURBVHja7d3BroMgEEBRBv7/n7vsRqGMSGo8Zzs7zY0vhOkrDdimeAQgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAeCAwQHggMEB4IDwQGCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHggMEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCC4J6pxYjiM3hDBcSTKsRgOT2aleqiCQ3CCQ3AITnCCExx3vadOUzU1FJzgmA6u9poafv0QHFPBNcEJDsEhOMEJTnD8JDJNCU5wrP3AxbUhgmP2L8oLQwSH4ASH4BDca9T0IWUVnOCY1T2HLOkhgmMmuPHtZDcpBYfgBIfgEByCExyb5RfeQnCCY1lww6GblIJDcIJDcAgOwQmO3fLbcJZzBMf8S0of/DukFBzLgrs4RHAITnAIDsG9Rk2fmYTgBMcs23CC4w+Cy19d9kwFh+AEh+AQnOAEJzhukl94c0gpONYFN/z6ubosOAQnOASH4BCc4Nj+itILb7bhBMey4IZD/1dAcAhOcAgOwSE4wbHb+l8Q8s4Fx/QHzjac4NgYXP4nuzxTwSE4wSE4BCc4wQmOm+S24VqzDSc4VgbXa8rVZcEhOAQnOATHVwhOcGx8QdltuGobTnAsC244dHVZcAhOcAgOwSE4wfGIMxPLOYIDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4QHAgOBAcIDgQHCA4EBwIDhAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDwXkEIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHggMEB4IDBAeCA8EBggPBAYIDwQGCA8GB4ADBgeAAwYHgQHCA4EBwgOBAcIDgQHAgOEBwIDjgwAeC1hN7ntJexAAAAABJRU5ErkJggg==')
}
<div class="content"></div>

Creating a boxed/ framed layout

I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.
I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.
I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.
Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)
The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.
.container {
border: 1px solid red;
width: 100%;
}
.content {
height: 1000px;
background-color: lightblue;
padding: 50px;
}
.top {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
top: 0;
}
.left {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}
.right {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
right: 0;
top: 0;
bottom: 0;
}
.bottom {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
bottom: 0;
}
<section class="container">
<section class="content">
this is my content...
</section>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</section>
Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.
body,
html {
margin: 0;
padding: 0;
}
.container {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
background-color: lightblue;
overflow: hidden;
}
.wrapper2 {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-right: -20px;
padding: 20px;
}
.content {
height: 1000px;
}
<div class="container">
<div class="wrapper">
<div class="wrapper2">
<div class="content">
This is my content...
</div>
</div>
</div>
</div>

Showing two gifs using CSS

I was trying to show a gif on my page and succeeded in showing it.
But now i want to show two gifs next to each other.
I was wondering is it possible to do so.
CSS
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') 50% 50% no-repeat;
}
HTML
<div id="loader"></div>
Jquery
$(window).load(function () {
$('#loader').fadeOut(500);
});
Now can i add one more gif in background using url???
I tried following but it does not seem to work
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') , url('../Images/ajax-loader.gif') 50% 50% ;
}
Check the fiddle
HERE
Code
div#loader {
background-image: url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif'), url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif');
background-repeat: repeat-y;
background-position: top left, top right;
width: 385px;
height: 100px;
border: 1px solid #000000;
}
You can have an element like this:
<div id="loader">
<span id='loadtxt'></span>
</div>
then two css classes like this:
#loader {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://i837.photobucket.com/albums/zz296/sayalie30/loading.gif') 50% 50% no-repeat;
}
#loadtxt {
position: fixed;
z-index: 1000;
margin-left: 0%;
margin-top: 0%;
height: 100%;
width: 100%;
background: url('http://lotyd.xtgem.com/images/bg-loading.gif') 50% 70% no-repeat;
}
you can adjust it as per your need.
CSS3 does support multiple backgrounds (http://www.css3.info/preview/multiple-backgrounds/)
check out the examples below

Blur Images on Popup

Is there any way on a pop up to not just blur the text, but images in the background? I have attached a visual.
Maybe blur.js can help you out !!
Lookout for the demo.
This is what you are looking for. CSS3 Lightbox.
They have made a similar implementation of a popup and then blurring the background. Check it out. I am sure it will help with what you are doing.
This is how stackoverflow does it.
HTML
<div class="popup">
<div class="blur-bg"></div>
<div class="popup-win"><img src="foo.jpg"/></div>
</div>
CSS
.blur-bg{
position: absolute;
top: 0px;
z-index: 1000;
opacity: 0.5;
height: 2323px;
left: 0px;
width: 100%;
background-color: black;
}
.popup-win{
position: fixed;
width: 400px;
z-index: 1001;
top: 50%;
left: 50%;
display: block;
margin-top: -85px;
margin-left: -215px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
background-color: #fff;
padding: 15px!important;
}

Categories