I'd like to create a div that is fixed in one position and make it translucent - making the contents behind it partially visible and blurred. The style I'm looking for is similar to the div of the 'See All' thumbnails in the Apple website.
The only thing I can do is adjust opacity: 0.9 but I cannot blur the contents that go under the div.
Note: The div has a fixed position and the background scrolls. The background that scolls is a mix of text and photos.
CSS
CSS 3 has a blur filter (only webkit at the moment Nov 2014):
-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/
IE 4-9 supports a non-standard filter
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')
See some nice demo for the blur and other filters here.
For future reference here is the compatibility table for CSS filter. Firefox seems to be getting the feature in v35+ while even IE11 does not seem to have any compatibility.
SVG
An alternative is using svg (safe for basically IE9 and up):
filter: url(blur.svg#blur);
SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
jsFiddle Demo
Javascript
You will achieve the highest browser compatibility with javascript, but usually the slowest performance and added complexity to your js.
http://www.blurjs.com/ (jquery plugin, canvas solution so IE9+, FF, Chrome support)
http://nbartlomiej.github.io/foggy/ (jquery plugin IE8+, FF,Chrome support)
You can use CSS image filter.
-webkit-filter: blur(2px);
filter : blur(2px);
More info on CSS image filters:
http://techstream.org/Web-Design/CSS3-Image-Filters
http://html5-demos.appspot.com/static/css/filters/index.html
Demo: JSFIDDLE
But in fact, they are using pre processed JPG, and just using it as a overlay in the correct position.
#background {
position: absolute;
left: 10px;
top: 10px;
width: 600px;
height: 600px;
background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
background-position: 0 0;
}
#blur {
position: absolute;
left: 50px;
top: 50px;
width: 120px;
height: 500px;
background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
background-position: -50px -50px;
}
<div id="background">
<div id="blur"></div>
</div>
Demo: JSFIDDLE
You made me want to try, so I did, check out the example here:
http://codepen.io/Edo_B/pen/cLbrt
Using:
HW Accelerated CSS filters
JS for class assigning and arrow key events
Images CSS Clip property
That's it.
I also believe this could be done dynamically for any screen if using canvas to copy the current dom and blurring it.
This should be coming browsers in the future as a CSS filter called backdrop-filter. There's virtually no support for it at all currently. For browser support see: http://caniuse.com/#feat=css-backdrop-filter
This CSS filter will do the frosted glass without any funny business, or hacks. It'll just do it.
Someone recorded a demo of it on Vine, and it looks really good. They were using Safari nightly to get access to the CSS filter. https://vine.co/v/OxmjlxdxKxl
Just put the same image (or parts of it) with opacity .9 a few pixels left/right/up/down - voilà
Some browsers support the new CSS property backdrop-filter. This property enables you to add a "frosted glass-like" effect on an element without using the pseudo classes.
Example:
element {
background: rgba(255, 255, 255, .5);
backdrop-filter: blur(10px);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
First of all the OP states that the background scrolls. None of the available answers really allow scrolling. Based on how html is set up it is impossible. But with the use of famous/angular one can have multiple rendering engines to achieve this affect. I have it constructed here.
The idea behind it is two renderings of the site. One is the header version which is blurred. The other is the body. I used Famous/Angular and use templating to render the template in the head and body. The header needs an offset for the height of the header so that things match up. I will be having actual code posted soon here and on the site.
Related
The site is live at http://www.ipworld.ca/
but it should look like this:
from dev build viewed using chrome
I tried increasing the z-order through css, but no luck. Notice the elements are loaded, but are not shown in the live version.
I think the issue is with the transparency of the card.
Just make these changes in css.
.services-card {
max-width: 66%;
opacity: 1;
margin: auto;
background: rgba(255,255,255,0.8);
}
The opacity will affect the visibility of the all the contents in the div.
In your case, you should change the background.
https://www.w3schools.com/cssref/func_rgba.asp
This code does not work in IE, I need to use it because I have to make an arrow that follows a point on the map.
div {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background: red;
clip-path: url(#cliparrow);
-webkit-clip-path: polygon(777px 285px, 0px 303px, 777px 315px);
}
svg {
width: 0;
height: 0;
float: left;
position: absolute;
}
<div></div>
<svg height="0" width="0">
<defs>
<clipPath id="cliparrow">
<polygon points="777,285 0,303 777,315" ></polygon>
</clipPath>
</defs>
</svg>
Any suggestions? Thanks.
Internet Explorer is not (currently) compatible with using clip-path via CSS on HTML elements (see can-i-use). clip-path is currently only a candidate recommendation for HTML and not yet in the spec (http://www.w3.org/TR/css-masking-1/).
You may, however, use clip-path as an SVG attribute on another SVG element (for example, if you load the MDN page on clipping and masking in SVG, it will work in IE).
If all you need to do is embed a colored shape, and not transform HTML content per se (e.g. apply clipping against HTML text, multiple elements, etc), you could even more simply just use an appropriately shaped SVG element (directly embedded in an otherwise transparent div if needed) instead of trying to clip an HTML element. This also removes the need for the browser specific webkit prefix.
<div>
<svg width="700px" height="700px" xmlns="http://www.w3.org/2000/svg">
<polygon id="arrow" points="777,285 0,303 777,315" ></polygon>
</svg>
</div>
example fiddle (with some extra helpers): http://jsfiddle.net/taswyn/cv6m76m7/
(You'll obviously need to set height and width appropriately, this was just a quick example using your shape. Note the use of SVG CSS to apply the color on the arrow, which this method allows)
Tested in IE 10 using IE 9 and 10 browser modes (and tested in Chrome). Probably won't work in 8 and below.
If you do need to clip against text, you'll need to use SVG text instead of HTML text elements.
Aside: If all you need to do is clip in a rectangle, you could temporarily use clip CSS, which is cross-browser compatible but deprecated, until the masking module hits recommendation status and clip-path becomes available for use on HTML as a W3C standard. (obviously this doesn't apply to your situation, but it may help someone else)
In my page layout I have two <div> tags. One, with id #image-panel and the other with #image-content-panel.
The two <div>s are stacked on top of each other using position: absolute. #image-content-panel (has higher z-index) is on top of #image-panel.
Both <div>s have background: transparent.
The page renders fine in Chrome, Safari, and Firefox i.e. I can see the image through the text (heading and paragraph etc.). But in IE (version 8) #image-content-panel is being redered with a white background.
You can see screenshots below:
Rendering in Crome, Safari, Mozilla
Rendering in IE 8
Relevant CSS and HTML code :
HTML Code
CSS Code
I'd like the page to render same in IE too.
Any help is appreciated.
Please propose an Alternative solution too if this can't be fixed.
UPDATE
The Jquery Cycle Plugin will add a background colour to elements in older versions of IE.
You need to set the cleartypeNoBg option to true in your Cycle initialisation.
$("#image-content-panel").cycle({
fx : 'scrollRight',
speed : 2700,
cleartypeNoBg: true
});
EDIT The below is not relevent
IE8 doesn't support rgba values and will fallback to a solid colour. If you don't define a fallback it will default to white which is what you are seeing.
There's a couple of ways to handle this.
1. Accept IE8's limitations.
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
margin: 10px 0 0 0;
}
#header will have a solid black background in browsers that don;t support rgba. Semi opaque in browsers that do.
2.Use a filter
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
margin: 10px 0 0 0;
}
#header will have 60% transparent black background in IE8 and proper browsers. Personally, I hate using filters. They make your markup hideous and are difficult to maintain unless you are excellent at converting rgb to hex codes in your head (which I'm not). Also, this particular filter is IE8+. It will not work in IE7, though there are other filters that will work in IE6-7. You should also probably separate this out in to an IE8 specific stylesheet or use some other method to prevent IE9 from using the filter as IE9 supports rgba.
3.Use a 1px x 1px black, semi-transparent .png
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: url(background.png) repeat;
margin: 10px 0 0 0;
}
This is the route I usually go down simply because it's simple. It takes seconds to create a .png if you need to change the alpha and you don't need to worry about browser inconsistencies.
As others have said, IE8 doesn't support RGBA colour values.
There is a hack you can use to work around this though: I recommend trying out CSS3Pie on your site; it implements a number of modern CSS features into old versions of IE, including RGBA colours in backgrounds.
Hope that helps.
When I use SVG in background property like this:
.svg-button {
-webkit-transform: scale(3.0) // root of the problem!
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.
If I replace CSS background property on:
<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>
the image is clear in any scale in any case.
Where is the problem?
Sample on jsfiddle
Update:
I found some more information about this problem:
StackOverflow question
Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.
I was "playing" with this a while back and noticed this for fonts too. Although it seems to be fixed now (for the fonts at least).
As far as I understand the inner workings, the contents of the scaled element are mapped to a texture, which in turn is scaled.
As a workaround, try using a 3d translation and move the element on the z-axis to achieve the size change. This won't yield as much control over the final outcome though.
.svg-button {
-webkit-transform: perspective(800px) translateZ(-300px);
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.
.svg-button {
zoom: 300%;
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Firefox I still use CSS scale property because Firefox doesn't support zoom property. At the same time Firefox scales SVG background well. See result.
For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.
Ok so heres the deal. I have a page I'm creating in html and css. I've got a div whose background needs to be transparent.
However when I use opacity: .6; Everything in the div goes see through.
Is there any way to fix this so it works in safari, IE, and firefox?
No, there's no real way to fix this problem (though you can in CSS3). There are two possible approaches:
1) Use a transparent png background rather than doing it with CSS (with hacks for IE6 which doesn't allow transparent pngs)
2) Use two separate divs, and use absolute positioning to position one over the top of the other. This requires knowing certain dimensions, so may not always apply, but may work in your situation.
.outer {
position: relative
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000; /* Or whatever */
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}
<div class="outer">
<div class="background"></div>
Content
</div>
Note that sometimes the height: 100% rule for .background doesn't work in IE 6, in which case you should try applying hasLayout to first .outer, and if that fails to .background as well (you can add hasLayout with the CSS rule zoom: 1 without side-effect). If neither of those works, you'll likely need an expression value for IE 6. If you need further help leave a comment.
As smerriman said, it's much simpler in browsers which support CSS3 (more specifically, rgba or hsla color values). It would be as simple as background-color: rgba(0, 0, 0, 0.6).
Just use transparent image as a background for that element. When you use opacity in css for a given element, everything in that element and including that element receives that styling. Look here:
http://jsfiddle.net/zV4BR/
you should use both
opacity in css and
filter:alpha(opacity=60);
for ie and stuff
use this method
How to give cross browser transparency to element's background only?
use Rgba instead opacity. see example here: http://jsfiddle.net/ypaTH/
you will have to set background on inner elements also.
Edit: to make rgab code for IE use this http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
it should be
opacity:0.6
beside that opacity works differently depending which web browser you use