I have a video background on my website, which want to have a blur overlay over it. Something like IOS7 Notification Center. Since I could not do it by Photoshop. I thought to use blur effect in CSS. It seems also doesn not do what I want.
However, I made a div class width 100% height and width. and choose white color as background, then gave it the blur element. It does not work the way I want, anyway.
#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
-o-filter:blur(350px);
-ms-filter:blur(350px);
-moz-filter:blur(350px);
-webkit-filter:blur(350px);
}
HTML : <div id="blur"> </div>
This is an example like what I am looking for: http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg
Any idea?
A CSS blur filter will blur what's part of the layer, not what's behind or in front of the layer. So you may need to apply this type of filter directly to the video container.
I'm not 100% sure this is your issue since no HTML was added to the question.
UPDATE:
I just tested this on YouTube.com and if I apply a blur filter directly to the <video /> element, the video plays blurred.
Don't think i understand the question correctly. But if you want a white layer on top of the video you need to add the opacity property in your css code, to give the effect of a transparent overlay.
opacity: 0.4;
Your code should then look like
#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
-o-filter:blur(350px);
-ms-filter:blur(350px);
-moz-filter:blur(350px);
-webkit-filter:blur(350px);
opacity: 0.4;
}
Related
In my angular project I have following task to do.
This is just a design template, not my actual code.
So far I have made the right picture by having a div and setting the background image.
But now I dont know how to put a dark layer on the page (like on the left side). The logic is no problem, but I dont know how to achieve it with CSS.
How do I do it?
You can do this really simply let's suppose you have a div and you can style according to following rules, you can also replace with your element id or css class with div:
div{
position:relative;
}
div:after {
position: absolute;
background: rgba(0,0,0,0.3);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can put a div over your image and style it the way you want it to.
If you make it black and put opacity on the element, it will get more transparent, which makes it look like its a little darker
Note that you will have to have the z-index set accordingly for it to work.
example:
overflow: hidden;
height: 100%;
z-index: 2;
Alternative you could try to add a shadow with background: linear-gradient()
example:
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
I was trying to have an image or maybe multiple images as a background and wanted it also it being simple to change it to a video as well, in case I want to.
However, with <img> I noticed an issue and with CSS, I couldn't reproduce the same that <img> did, so I came up with <video> and its attribute poster instead.
I'm wondering if that's a good idea. Below I explained what I tried and examples so you can see the difference between the <img> and CSS one.
I put an <img> as a background. The only issue is that it is selectable, however there are properties like user-select, but browsers like IE didn't support it.
Here is an example with <img>:
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background-color: #090909;
}
div.background {
position: fixed;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: -1;
overflow: hidden;
}
div.background img {
position: absolute;
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
height: auto;
width: auto;
top: 0;
}
<html>
<body>
<div class="background">
<img src="https://i.imgur.com/sMzN1LP.png" draggable="false">
</div>
<div style="color: white;">Text</div>
</body>
</html>
https://jsfiddle.net/hd6orszb/1/
Here, when you zoom out, the image stays in the screen, it's like background-size: cover. And when you zoom in, after zooming over 100%, it will zoom in the image as well. Which was okay, however the <img> can be dragged and selected and user-select doesn't work anywhere. The attribute "draggable" does, however even if you add user-select: none;, if you press CTRL + A, and drag the Text, in Chrome at least you can see the image being dragged as well. And I didn't wanted that.
So I used CSS, because this doesn't happen with the "background" property:
https://jsfiddle.net/5n6mtyb4
Now if you zoom out there and zoom in, there's nothing that keeps resizing it, like I did for <img>, so I added background-size: cover. But if you zoom in and out it will stay the same, but I wanted to keep the effect <img> did.
So I didn't had any idea, what else I could do. I think with #media it might be a bit hard because it's zooming, where anything can have a different size, I guess.
Other thing was using <video> with the poster attribute.
https://jsfiddle.net/5n6mtyb4/1/
Which was unselectable like the CSS one and behaves like <img> just unselectable as well. However I'm not sure if this is the ideal way to do it and if there could be any issues with that.
So I'm wondering, if there's a better way to do it, or if <video> is completely fine as an alternative to <img>.
For IE9, you'll need to add unselectable="on" attribute it is like user-select:none;, and for drag you can add draggable=flase i find the background is the ideal, but video is fine also it has no problems with it using the poster.
Edit Nov 20: you can make psuedo element before Or after and they won't be selectable neither draggable, but you can't set width or height on the url(img)
You can accomplish this by adding these lines to CSS of your image:
img {
user-drag: none;
user-select: none;
}
That should be the answer.
So I've got an issue with trying to emulate a frosted glass effect in CSS. I'm able to get the effect to work just fine if the div in question is centered above the background image, but if I ever try to move it to a corner (i.e. so that the 'blur' effect is slightly off canvas), it results in partial failure to blur. I'm assuming that this is because it's not picking up image information to blur, just picking up empty pixels. You can see in a codepen here: codepen link
Here's the mixin that I'm currently using on the blur div:
content: " ";
background: inherit;
background-attachment: inherit;
position: absolute;
height: calc(100% + 50px);
width: calc(100% + 50px);
left: -25px;
right: 0px;
top: -25px;
bottom: 0px;
filter: blur(20px);
I'm making a div that overflows the parent div and then is offset by a particular amount in order to give a sharp blur edge.
Is there some hacky solution to let it overflow off the body while still grabbing image information from a image repeat or something?
Add this to your mixin:
transform: scale(1.75);
This makes the background width and height larger while maintaining the blur effect/sizing.
I have noticed that svg icons that placed via 'img' tag aren't rendered correctly in safari. They end up being all blurry. I have created a simple html page and pasted the same svg icon multiple time using different methods :
I am a bit frustrated why does the 'img' tag lower the quality of the icon?
Thank you in advance!
Edit: I have created a demo
Maybe it will be helpful for someone - Safari can't correct render IMG tag (SVG format) for retina display - so the solution is - UP size image - the result you can see here
Demo
Костыль для сафари (in Russian)
#svg {
width: 20px;
height: 21px;
div {
position: relative;
transform: scale(0.25);
transform-origin: 0 0;
height: 100%;
&:before {
content: '';
display: block;
position: absolute;
width: 400%;
height: 400%;
background-image: url(http://svgshare.com/i/1Le.svg);
background-size: contain;
background-repeat: no-repeat;
}
}
}
.w-img {
width: 20px;
height: 21px;
img {
height: 400%;
width: 400%;
vertical-align: middle;
transform: scale(0.25);
transform-origin: 0 0;
}
}
I'm sorry it's probably late but I had a similar problem and it was because of the blur filter, when I put the shadow on another element and kept the original one on top of it, it worked fine. E.g., you have to duplicate your icon element, apply shadow to it and finally place it below the actual icon.
When you put SVG into an <img> tag, it basically bitmaps the vector file. So where the SVG is capable of scaling and remaining sharp at all sizes, the <img> tag treats it analogous to a gif and any scaling will compromise the quality of the image.
Using SVG as an img | CSS Tricks
If I save the SVG to a file, I can use it directly in an <img> tag.
<img src="kiwi.svg" alt="Kiwi standing on oval">
In Illustrator, our artboard was 612px ✕ 502px. That's exactly how big the image will on the page, left to itself. You can change the size of it though just by selecting the img and changing its width or height, again like you could a PNG or JPG. Here's an example of that.
So in short, by using an <img> tag, you lock the size of the base image. This then allows the browser to determine the quality of the image, which is going to be directly proportional to how different from the original size you are trying to display the image. In this case, as can be expected, safari is handling it less elegantly than if you displayed the SVG using another means.
I'm trying to learn HTML and CSS at the moment, and i am doing myself a site.
I used for the background picture
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
and i want to make a div opaque in order to add some photos on it.
For the rest of the divs in the site i used
background-color: black;
opacity: 0.8;
The problem is that when using opacity: 1; on the div which should contain the photos, the div dissapears (it appears for a split second behind the main background image).
I understand that opacity transfers from parent to child divs but i had just deleted all classes and made each div transparent by pasting those 2 lines of code and the div which i need with opacity: 1; still disappears under the background.
Any ideas? Thank you.
I would suggest using rgba colors to make things opaque, or you can use opaque pictures (pngs for example).
You would use rgba like this:
background: rgba(0,0,0,0.5);
the 0.5 says how much opaque it will be, the 0,0,0 is black - change that to any color you want.