As a purely aesthetical design thing, I'm wondering if it's possible to have an element with a non-opaque background blur out the content behind it.
More specifically, when I have a modal box appear (as part of my custom alert/confirm/prompt setup), currently the background content is "faded" by having a mask over the screen the same colour as the document's background.
What I'd like to do is apply a small amount of blur (just a few pixels) to the masked content to further direct attention to the modal box.
Browser compatibility is not an issue, since as I mentioned it's purely aesthetical. Preferably I'd like it to work in IE9 as a minimum, and Chrome if possible.
Also, no jQuery. By all means, provide an answer in jQuery if you want, but I'll be translating it to raw JS before letting it near my site.
Nowadays you can use the backdrop-filter CSS Property.
CSS:
.modal {
backdrop-filter: blur(10px);
}
Not possible with pure CSS..
You could use (with its limitations) the html2canvas script to render the pages to a canvas.
Then blur that image or the part you want with http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
Use the toDataUrl to get the image and use it as a background to your popup...
It is quite an involved process and requires a lot of javascript, but i believe it to be the only way to do it...
This would require javascript (and fairly complex javascript).
From what I understand, it sounds like you're trying to create an 'Aero glass' effect where the content behind a semitransparent element is given a blurred effect. It is not possible with HTML and CSS alone (unless you consider using IE-only filters).
At the moment, there aren't any CSS properties that can dynamically apply image filters like you're describing.
The html2canvas solution presented by Gaby is potentially overkill. You can get the same effect with an iframe of the same website that has been blured (via filter blur or another technique - "-webkit-filter: blur(2px)" only works in chrome as far as I know.
This said, I'd say both solutions are really really hacky and I'd personally never use either myself. I tried this out just to see if it was possible at all out of curiosity.
See a (chrome only) example here: https://s3.amazonaws.com/blur-demo/index.html
Related
As for pseudo-elements :after/:before there are apparently two ways if I want to display image there:
using background-image:url(imgurl.png);
using content:url(imgurl.png);
Are both ways correct and valid? Why should I be using one way over another?
Apparently using the second method you cannot set the picture properties like size. But first method is generaly more taught on internet.
Ideas?
It depends on what your image is, just like the debate between using an <img> tag vs using background-image in your CSS.
If your image is part of your page's content, use content:url(imgurl.png);. Certainly if you want the images to be interactive or to to inform the user's experience while on your page, use content. If your image is just stylistic for your site's visual design, use background-image:url(imgurl.png);
Also, do note that you should use double colons: ::before and ::after. Only IE8 requires the single-colon versions.
so I've read a lot about the current state of rotating text and not being able to perfectly get real antialiasing to happen in all browsers. It looks like the first box in the pic in chrome, but the second, jaggedy box in firefox. I've tried the most popular fixes including -webkit-backface-visibility:hidden; -webkit-font-smoothing:antialiased; and maybe one other I can't remember.
However this is not asking the same question, but a new one I havent found anywhere. These two screenshots of the same box are both taken from Firefox. The jaggedy box on the bottom is what it looks like normally, however, when I mess with the rotation attributes with another(completely different) element on the page with the css edit console, it renders the box perfect / smoothly...
I do, however, have to continue to press up or down to change the rotation value on another element for the entire box to render antialiased perfectly, then it returns to its jaggedy normal self. I rotated the div that the content is in and put the css fixes on the same div(although I did try putting the css fixes on every element) and I didn't ever seem to get any smoothness or antialising like you see in the box above...only when I rotate another element on the page in the browser. WTF?!!?!? is there a way to do this in css or is it only something the browser is doing in realtime and cannot reproduce that smoothness in CSS yet?
EDIT: PIC for comments section
For whatever reason, it seems under some circumstances browsers "forget" to antialias text while doing complex transforms.
The fix:
Using CSS to force the browser to render the transformed element in a separately-composited "layer" is one solution:
transform: rotate(…) translate3d(0px,0px,1px);
The explanation:
Many rendering engine implementations create a GPU layer for the 3d-transformed element, and composite it onto the rest of the page when painting. This alternate rendering path can force a different text-rendering strategy, resulting in better antialiasing.
The caveat:
However, this is a bit of a hack: first, we're asking for a 3-dimensional transform we don't really want; second, forcing many unnecessary GPU layers can degrade performance, especially on mobile platforms with limited RAM.
dev.opera.com hosts a good discussion of compositing, hacks using transform3d, and the CSS3 will-change property.
Jeremy if you come back and answer this I can give the answer to you. just realized I hadn't had an answer to this so I needed to put something here.
This solution worked as in the comments above:
Jeremy:
I had another thought: it could be related to creating an opengl/webgl layer behind the scenes. If you add translate3d(0px,0px,1px) after the rotate transform, does it "fuzz out" a bit more?
Answer - Yes this works to perfectly anti-alias any text in all browsers!
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
anyone know how to re-design scrollbar slider for IE ??not just a color but perform too..
Googling will lead you to a variety of articles on this, including "10 jQuery Custom Scrollbar Plugins".
In general, a redesign requires JavaScript to control the scrolling of an overflowed container.
The best way to do it would be disabling the browser scroll bar and using a javascript solution instead. This, of course, would effect all browsers instead of just IE.
If you want to go that route, I highly recommend jScrollPane.
http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/
After installing just add this to your css:
html, body {overflow: hidden;}
jScrollPAne is great because you can style it easily with CSS or custom images. You can also easily adjust the scrolling speed and other behaviors.
While the extensions mentioned here are useful most of the time , I find that they are not on parity with native scrollbars.
For example a container with dynamic content or on resize will not trigger scrollbar resize which I find is huge limitation.(HTML5 Mutation Observers will probably make this easier in the future.)
For now I prefer scrollbar styling ,which has all the native functionality.
The downside is that is supported only by Webkit - Chrome and Safari browsers.
Still I consider that is a good trade-of... lately I notice Google is using the same technique for their apps (Gmail, G+, Reader, etc.)
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/