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>
Related
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
I was fiddling with the mix-blend-mode property. Everything works fine until I add something like transform: perspective(100px) or any other 3d transformation anywhere on the page, then it breaks completely. The transformation is applied but the blend mode is gone.
I tested on chrome and firefox and on linux and windows and it's the same everywhere, however on a different computer it worked fine (I don't remember what version of chrome it had and was running ubuntu).
Is that something that can be fixed with CSS or is it possibly just a hardware / GPU drivers issue?
I put background-blend-mode in tags because the mix-blend-mode tag doesn't exist yet, however this property strangely works completely fine and isn't broken by transformations.
Here is a codepen of what I am trying to achieve:
http://codepen.io/vnenkpet/pen/avWvRg
The lightning shouldn't have it's black background flashing with it but should be blended smoothly with the page background.
EDIT:
I have just found out that it actually DOES work in Firefox. Is this therefore a chrome bug? 3D Transforms shouldn't break blend mode as far as I know...
I was having a similar issue, except that applying a mix-blend-mode (multiply) higher on the page broke my transforms lower on the page (using Chrome on Mac). I was able to fix this by applying a z-index rule to the mix-blend-mode div (don't forget to set a position, too).
I'm not entirely sure if this is a bug or if it is expected behavior due to the properties of stacking contexts, though.
You can try to also apply a null transform (3D layer promotion) to the element that has mix-blend-mode specified:
.content {
mix-blend-mode: difference;
transform: translate3d(0, 0, 0);
}
This way, Chrome can successfully blend the two 3D layers together, instead of failing to blend a 3D layer and a 2D layer.
Here's a snippet demonstrating the problem and the solution:
function change(event) {
var content = document.querySelector(".content")
content.className = event.target.checked ? "content content-with-transform" : "content"
}
.parent {
text-align: center;
padding: 2rem;
font-size: 5rem;
font-weight: 700;
}
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4rem;
background-color: #AB1795;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.content {
mix-blend-mode: difference;
background-color: #167CFB;
}
.content-with-transform {
transform: translate3d(0, 0, 0);
}
<div class="parent">
<div class="fixed"></div>
<div class="content">Content</div>
</div>
<label><input type="checkbox" onchange="change(event)"/> Also transform other element</label>
(I stumbled onto this problem when using will-change: transform, not an actual transform, but the solution is the same.)
I realise this is a pretty old thread, but I was having the same issue with janky transforms in Webkit/Blink using the Masonry Isotope plugin with a mix-blend-mode overlay on the grid sections until I added the following CSS to the element that was being transformed. i.e. the masonry grid element
I'm answering this in case it helps someone in future.
[your-selector-goes-here] {
perspective:1000px;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
I've been trying to get a few pseudo elements to work on IE, but it just doesn't let me.
It crosses out the CSS and acts like it's not there, which kinda aggrevates me.
Would anyone know what I'm doing wrong?
.newbutton {
border-radius: 50%;
width: 74px;
height: 74px;
position: relative;
background-color: black;
margin: 60px 0px 25px 17px;
overflow: visible;
}
.newbutton:before {
content: "f";
width: 80px;
height: 80px;
position: absolute;
border-radius: 50%;
z-index: -1;
top: 37px;
left: 37px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation-name: fadecolor;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-name: fadecolor;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.newbutton:after {
content: "";
width: 80px;
height: 80px;
position: absolute;
border-radius: 50%;
z-index: -2;
top: -3px;
left: -3px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}
<div class="starttour">
<div class="newbutton headerbutton">
<span class="iconhead icon-02-arrow-icon"></span>
</div>
<p>START TOUR</p>
</div>
Screenshot of what happens:
This is a known issue, but the styles are in fact being applied. The developer tools thinks the pseudo-element styles are being overridden by the parent-elements corresponding styles. This is easily demonstrated by inspecting the Computed style of the parent-element and looking at (what the F12 tools believe to be) competing styles:
Again, however, these styles are in fact being applied to the correct elements - regardless what the developer tools believe or suggest. You can confirm this by running over the parent-element and the two pseudo-elements and logging their computed height:
(function () {
var el = document.querySelector( ".newbutton" );
[ "", "::before", "::after" ].forEach(function ( e ) {
// Output: 74px, 80px, 80px
console.log( window.getComputedStyle( el, e ).height );
});
}());
I'll check to see if we already have an internal issue tracking this bug, and add this question to it. Generally speaking, we try to give issues like this the amount of attention proportional to the amount of grief the issue is causing in the real world. So having your question as a new addition on the ticket may help us move a fix forward :)
I had this exact same issue! You must give your :before and :after pseudo elements a display property.
Add the following to the :before and :after.
display: block;
This should fix your issue. :)
To add onto the answer above. I tried display: block but my issue was that the background image was coming out warped. Instead I used below:
display: inline-block;
This fixed my issue with warped images within my :before :after
As I had the same problem with Material Font and IE11 and could not solve it with the above solutions, I looked further:
The documentation of the material design icons mentions to use
<i class="material-icons"></i>
for browsers not supporting ligatures. The codepoints for each item are listed here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
The problem with :after elements is that HTML in the content-Tag is rendered as plain text showing the &#x.. so you have to use the \ escape as following:
content: "\e5c5";
I had this exact same issue! You must give your pseudo element's parent a overflow : visible property.
Check out this link "http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field", as quoted from this link
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
/*
* The trick is here:
* this selector says "take the first dom element after
* the input text (+) and set its before content to the
* value (:before).
*/
input#myTextField + *:before {
content: "👍";
}
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
I got from web designer layout, which contains (probe):
<div id="subMenuRow">
<div id="subMenuRowHTML">
Link
</div>
</div>
and respectively css for it:
#subMenuRow{
width: 900px;
height: 40px;
background: #000000;
float: left;
clear: both;
filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
Opacity is used to make transparent bar for html menu. The problem is, that every text including links contains transparency as well, which is very unnecessary. How to avoid opacity for subMenuRowHTML?
First you don't need to use -moz-opacity and -khtml-opacity anymore. They are very very old.
There is no solution fully supported today. CSS3 RGBA solves this in modern browsers but if you need to support old browsers you will need to use semi transparent png:
#subMenuRow { background: url(semi-trans.png); }
IE6 will degrade gracefully with this:
* html #subMenuRow { background: url(full-opacity.gif); }
There are also easy options for png transparency on IE6. It's up to you.
If you have many instances of opacity on your code and don't want to mess up your code with * html everywhere you can use conditional comments.
use a semi transparent .png as a background image:
css:
background: transparent url(/url/image.png) top left repeat;
Add:
#subMenuRowHTML {
filter:none;
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}