I'm creating a web application where i need a certain area of the the map to be blurred.
To make it more easy we can say that i need 100x100 PX blurred in the left top corner.
The blurred area needs to be there even if i navigate to new places in the map.
And have a blur effect on only that box.
I'm working with SCSS, Javascript & Openlayer as a map provider.
I can blur the whole map with the following Css code bellow , but not only a specific area:
this._map = new Map({
target: "theMap"
//openlayers code..
<div className="mapStyling" id="theMap">
<div classname="blurredBox"/>
</div>
.mapStyling{
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
//Code to create a blur
-webkit-filter: blur(10px) saturate(10%);
-moz-filter: blur(10px) saturate(10%);
-o-filter: blur(10px) saturate(10%);
-ms-filter: blur(10px) saturate(10%);
filter: blur(10px) saturate(10%);
.blurredBox{
width: 100px;
height 100px;
margin-top:0px;
margin-left:0px;
//Here i want to 'Filter blur effect'
}
}
To problem here is that i don't get a blur effect if i move to "blur css code" down to blurredBox.
Would really appreciate your help.
Quite a bunch of error in your code. Lets me list them out:
You declare a class in html by class='xxx'
You are nesting .blurredBox inside .mapStyling, which it shouldn't be.
Your css for .blurredBox height is wrong in syntax and miss a :. Your with is also wrong in vocab.
After fixing all of that, you should be able to have something like this codepen
I would recommend you open the developer tools on whatever browser you are coding on and check the css styling. Your idea is good and on point, just a bit more debugging. You can check on how to use css developer tool here
Related
Microsoft Edge is not supporting filter: blur(); like it should. If I have an absolute positioned element with filter: blur();, inputs that appear on top will go nuts, merging with the blur (fun to watch).
Here's a Fiddle to show what happens. Works perfectly in Chrome and Firefox, but Edge turns into borderline epileptic. Just click the input and enjoy:
https://jsfiddle.net/Cthulhu/3uz0Lpfz/2/
Here's a code example:
<style>
article {
background: url(http://uzebox.org/wiki/images/1/19/Arkanoid.gif) no-repeat;
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
height: 448px;
position: absolute;
width: 720px;
}
input {
margin: 100px 0 0 20px;
position: relative;
}
</style>
<article></article>
<input />
You can even try to place a windows explorer window on top of the fiddle, it will "interact" with the image blur, which is funny.
I tried taking a screenshot but the end result shows things as they are supposed to be, and ignores the bug (no fun :-( ).
Any ideas to go around this bug using only CSS?
Update: This issue no longer exists in recent builds of Microsoft Edge, and should be resolved via the Windows 10 Anniversary Update on August 02, 2016.
Thank you for reporting this issue. I work on the Microsoft Edge team, and can confirm that your fiddle reproduces the issue being described. While I don't presently have a work-around to offer, I will file this and personally notify the appropriate team(s) so as to give it earlier attention.
When I have more to share, I will return to update this answer.
I'm using a blur filter on a pseudo element's background image. If the z-index of the pseudo element is -1, the blur has no effect in Microsoft Edge. It works without z-index. (You have to manually enable CSS filters via about:flags in Edge).
Here's the example: http://codepen.io/anon/pen/WrZJZY?editors=110
Is this due to experimental support (in Edge) or am I doing something wrong here ? It works in other browsers (Chrome, Safari, Firefox).
.blur {
position:relative;
border: 4px solid #f00;
height:400px;
width:400px;
}
.blur:before {
content: "";
position: absolute;
width:400px;
height:400px;
z-index:-1;
background-image:url('https://i-msdn.sec.s-msft.com/dynimg/IC793324.png');
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');
}
This appears to be a limitation in our implementation. I'm filing an issue right now, and will have the appropriate team evaluate the repro as soon as possible. For now, the best option is likely to avoid positioning the image beneath the content (with a negative z-index), and instead position the content above the image (with a higher z-index).
Fiddle: https://jsfiddle.net/jonathansampson/610arg2L/
/* Above Fiddle contains sample CSS */
Filed Issue: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9318580/
The frosted glass effect (where an overlay both blurs and tints what is below it) is a common UI element in iOS.
Is there currently anyway to implement that with CSS? There are a lot of questions pertaining to this, but they are limited in what they can do. They typically are limited to putting an overlay over an image--rather than a completely rendered UI.
So, to be clear, I'm not looking for a way to blur an image by itself, but a way to blur the UI below an element. So say I have an HTML form with HTML buttons and HTML text, and I want to place a div above them all so that whatever is below looks blurred. And then I can perhaps scroll what is below and as elements come in and out of the overlay, they are blurred only while under the div.
My understanding is that the answer to this is no, this is not currently possible with CSS but I'm also a bit rusty on the new bells and whistles...
What you are looking for is backdrop-filter, which has been in webkit since August 2015 (see post). It was shipped in Safari 9 (September 30, 2015, part of OS X El Capitan) and works in Chrome today by enabling the Experimental Web Platform features [...] flag.
With backdrop-filter, getting the 'live blur' is as easy as adding backdrop-filter: blur(10px) to a given element.
Demo here.
It's probably going to be a while until it becomes mainstream though, but it's going to enable us to do so much more than the frosted glass effect (i.e. night mode, read more here).
The good news is that tons of people are excited about it, so let's hope we don't have to wait long. If curios, here's the spec for it.
If you want to track progress on this feature, check out:
Mozilla bug
Chrome bug & Chrome status
Microsoft bug
As far as I know, this is achievable only in Firefox.
The key is background-image: element. One of the properties that would prove most useful , in my opinion, of the ones in the "may be some day" list
Demo working only in FF .. Notice that frost is not a child or a parent of test
img {
margin-top: 5px;
margin-left: 40px;
animation: move 1s infinite;
}
#frost {
border: solid 1px blue;
width: 250px;
height: 250px;
position: absolute;
left: 50px;
top: 120px;
background-color: white;
background-image: linear-gradient(rgba(0,0,100,0.2), rgba(0,0,100,0.2)), -moz-element(#test);
background-position: -45px -112px;
background-repeat: repeat, no-repeat;
filter: blur(4px);
opacity: 1;
}
button:hover {
background-color: red;
}
#keyframes move {
from {transform: translate(0px);}
to {transform: translate(40px);}
}
<div id="test">
<button>BUTTON</button>
<img src="http://placekitten.com/1000/750" width="300px" height="300px"/>
</div>
<div id="frost"></div>
This is a small question. If you go to www.thumbtack.com/jobs, and go below to their sponsors. you can see that at first you cant see the color in the names of the sponsors but when you hover over them you can see the colors appear. Can someone tell me how to do this. I am not really sure what to search on google(like what keywords to use for it). I have tried to use the inspect element but couldn't figure out how there are doing it. Any help will be greatly appreciated.
The most broadly compatible way to do this in CSS is using separate images — one set of grayscale images, and one set of full-color images, which you switch between with the CSS :hover pseudoclass (ordinarily using the background-image property), a la:
.sponsor {
background-image: url('gray.png');
}
.sponsor:hover {
background-image: url('color.png');
}
You can achieve this with a single image if you like by putting both a grayscale and color version into a single image, and moving it around kind of like a "window" onto the image (a technique known as CSS Sprites, as pointed out by Jon P). For example, if the logos are 200x100, create a 200x200 image with gray on top and color on bottom, and do something like:
.sponsor {
width: 200px;
height: 100px;
background-image: url('logos.png');
background-position: 0px 0px;
}
.sponsor:hover {
background-position: 0px -100px;
}
Of the image-based solutions, this one is preferable, because as Jon pointed out, it reduces the page load time, and also prevents lag when you mouseover the image for the first time. In addition, it's one fewer HTTP request, which can make an important difference on high-latency connections (like cell phone data connections).
If, however, you're targeting relatively new browsers, you might be able to use CSS Filters:
.sponsor {
filter: grayscale(1.0);
}
.sponsor:hover {
filter: none;
}
Unfortunately, this currently only works in Safari, Chrome, new versions of Opera, and other WebKit-based browsers. It is also currently a prefixed property, so you will instead need to use it as -webkit-filter.
You can do it with CSS3:
.object {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg);
/* Firefox 4+ */
filter: gray;
/* IE 6-9 */;
}
.object:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
filter: none;
filter: none;
filter: none;
}
Or you can use background: url() and change it on hover in the same way.
I have an image built from multiple css sprites, as described in this question: css image building with sprites
How would I use that so that I could apply a size on the top container that would dynamically re-size all the children?
here is the working fidlle so far: http://jsfiddle.net/hWhUb/3/
here is the current html structure:
<div class="icon">
<div class="brigade brigade-purple-left"> </div>
<div class="brigade brigade-purple-middle"> </div>
<div class="brigade brigade-purple-right"> </div>
<div class="icon-type icon-hero"> </div>
</div>
I have a few questions, that might lead to a solution:
Why are you using multiple images for something that can be easily achieved using a bit of css3 and a single image (the cross thingie)? A single image can more easily be resized, as a percentage of the container width, or even using css3 background-size property.
If you must use images for each thing, could you possibly consider never using sprites, ever? Its maintainability is pure annoyance, especially if someone has to take the project away from you later on.
Perhaps a combination of both?
If you choose the second option, I suggest using data uris.
Here's a short explaination:
http://css-tricks.com/data-uris/
It saves one more http request than sprites, easier to maintain, and the difference in overall size is rather insignificant in my honest opinion, and support is great - IE8+ and all sane browsers our there.
Setting up is easy enough, especially if you use the all-mighty sass interpreter, but there are some nifty utils out there (command-line, gui or even web-based) to transform your images into base64.
It can even support IE7 with a little effort!
Edit 3.11.12
You can also add http://css3pie.com/ to the options to check out - it lets you do the css3 tricks we so love and adore with internet explorer. It's a bit unpredictable to my taste, but for a small feat like this it can definitely do the trick.
Further, I commented on your browser-support needs below. IE7 is not what's going to stop you;)
You can use a combo of zoom for webkit/ie and -moz-transform:scale for Firefox
[class^="icon-"]{
display: inline-block;
background: url('../img/icons/icons.png') no-repeat;
width: 64px;
height: 51px;
overflow: hidden;
zoom:0.5;
-moz-transform:scale(0.5);
-moz-transform-origin: 0 0;
}
.icon-huge{
zoom:1;
-moz-transform:scale(1);
-moz-transform-origin: 0 0;
}
.icon-big{
zoom:0.60;
-moz-transform:scale(0.60);
-moz-transform-origin: 0 0;
}
.icon-small{
zoom:0.29;
-moz-transform:scale(0.29);
-moz-transform-origin: 0 0;
}
One of the ways to achieve it will be to use inline CSS and to dynamically generate attribute values in JavaScript or PHP/What you use.
Assuming you know the width of the top container and the position of the css sprites
Calculate the left middle and right
You can also opt to generate the CSS code in a separate file
http://aquagraphite.com/2011/11/dynamically-generate-static-css-files-using-php/
Using a bit of jQuery I can make the elements resize to whatever you want (resizeTo):
$(document).ready(function () {
$('#resize').click(function (e) {
e.preventDefault();
var resizeTo = 100,
resizeRatio = Number(resizeTo) / Number($(".icon").width());
$(".icon").css('width', resizeTo);
$(".child").each(function () {
var childWidth = Number($(this).width()),
childHeight = Number($(this).height()),
newChildWidth = childWidth * resizeRatio,
newChildHeight = childHeight * resizeRatio;
$(this).css({ 'width': newChildWidth, 'height': newChildHeight });
});
});
});
However, size doesn't resize the sprites to fit the new box sizes so seems like a pointless task.
Fiddler: http://jsfiddle.net/hWhUb/4/
Though what you want to do can be accomplished, I think your approach is wrong. It's way more complicated than it needs to be, but the idea is sound.
Looking at your sprite, the only thing that can't be changed with CSS is the actual icons (the artwork). The rounded corners and background colors -- that's a different story.
CSS
.icon-cross {
background:purple url('cross.jpg') no-repeat 40px 12px;
border-radius:5px;
border:1px solid gray
}
#media only screen and (max-width:768px) {
.icon-cross {
background-size: 800px 1200px;
background-position; ??px ??px
}
}
#media only screen and (max-width:400px) {
.icon-cross {
background-size: 500px 900px;
background-position; ??px ??px
}
}
HTML
<div class="icon-cross"></div>
You can use css3 2d transforms:
.icon {
transform: scale(2);
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
-moz-transform: scale(2); /* Firefox */
}
and change the transform origin with: transform-origin