I want to add blur to few DIVs, so I add this to the CSS:
.div{
-webkit-filter: blur(20px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
The problem is that when I'm scrolling the window, it scrolling with lags. This is not the only problem - this code isn't working on all browsers if I'm not mistaking. So how can I add a blur to a DIV?
There is no cross-browser solution in pure CSS for this.
Even in CSS3.
You can still use Blur.js library (http://blurjs.com/),
it's crossbrowser but you need import javascript to your page.
(not be problem because blur is mostly just fancy effect).
Also this is nice DEMO (http://tympanus.net/Tutorials/ItemBlur/)
with description what is going on (http://bit.ly/1aOE8uM) ..
Can helps you.
As you can see in the link below, CSS filters are not that well supported. That's why it's not working in every browser.
http://caniuse.com/css-filters
As for the lag, you should post an example, because this should't have anything to do with the lag.
The bigger the blur, the more memory-intensive it will be for the browser to render (see here).
To get any filter to work in Firefox, you'll need to define it in SVG (e.g. for blur) and link to it using the filter style's url() variant. This approach should also work for versions of IE greater than 9.
Older IE has its own equivalent filter style you can use. If all else fails, you can use Modernizr to detect support for the filter style and make the appropriate fallback adjustments (would need to add non-core detects for css-filters and svg-filters).
Related
I'd like to revisit this similar question from 2012. I wonder if anything has changed from the time that particular question was posted?
Is it possible to create a modal which doesn't require a canvas rendering of the page, which is then displayed and cropped to the desired size?
If so, is there a way to display this cross-browser?
I see that #Michael Wasser mentioned "-webkit-filter" in a previous question. That's how you would do it these days without relying on Javascript.
img {
-webkit-filter: blur(10px);
}
See this HTML5Rocks article for more on this.
How supported is it?
caniuse.com says that global support is at 43.67% at the moment. All the recent Chrome, WebKit (Safari), and Opera (now that it switched to Blink) should have them. Not sure what the plans are for Mozilla and Microsoft.
In Firefox, you can probably use SVG filters to recreate the blur.
update-
sorry folks, i should have provided the link to the website where i saw the effect. here you go - http://www.w3schools.com/Css/css_image_transparency.asp
and the code that i saw there (and the basis of this question) is as below -
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
The original question is as below -
I was looking for rollover effects that can be done without using JS, and i stumbled upon the w3schools website teaching the opacity setting for images. In the code, there is no js involved, its just pure css.
i even tried using the same code into my webpage (which does not have any js, yet) and i noticed that the code happened to work perfectly in both chrome and IE 7.0. the code has a "onmouseover" event and another "onmouseout" event to give the hover effects based on the opacity settings.
wondering whether these effects (onmouseover and onmouseout) are -
1. pure css
2. standards compliant (xhtml 1+ and css2)
3. whether there are any hacks involved
i still cant believe these things worked on ie7, and wondering why there are no documentation on these events.
There's no such "onmouseover" event or attribute in CSS, that's JavaScript. CSS uses the ":hover" pseudo-class for mouse over events. A quick example,
HTML:
<div id="someid">I'm a random div.</div>
CSS:
#someid {
background: #fff;
}
#someid:hover {
background: #000;
}
In this example, when you hover over the #someid element, it's background will change from white to black.
This is the correct way to handle mouse over events in CSS. It is standards compliant and will work in all modern browsers (and some older browsers too).
Sidenote: It won't always work in IE6, IE6 only recognizes the ":hover" pseudo-class when it's applied to anchor tags ("a:hover", etc).
Based on the update to your question:
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
That is using JavaScript to change the style. The only bit of this which is CSS is the style='...' part. The text in onmouseover and onmouseout is JavaScript.
To do what you want in pure CSS, it should be like this,
<html>
<head>
<style>
img.opacity-image {
opacity: 0.4;
filter:alpha(opacity=40); /* This is IE specific and NOT standards complaint */
}
img.opacity-image:hover {
opacity: 1;
filter:alpha(opacity=100); /* Again, 'filter:' is IE specific. */
}
</style>
</head>
<body>
...
<img src="klematis.jpg" class="opacity-image" />
....
</body>
</html>
opacity is CSS3 and only supported by modern browsers (IE6,7,8 don't support it). You can use filter:... to get opacity to work in IE (although it won't handle PNGs correctly, but since you're using JPG that's not an issue), but then your code isn't technically standards compliant as "filter" is not in the CSS standard. That doesn't generally matter too much though since it'll still render correctly in any modern browser.
I'm assuming you're talking about the :hover event?
<div id="hoverDiv"> Something should happen when you hover on me</div>
Style:
#hoverDiv:hover{ background-color:red; }
Visual example: http://jsfiddle.net/zRnug/
All hover effects you want to add to your stylesheet within the #selector:hover{ } area.
All effects you want to pertain before (the default style of the element), just use within the #selector{ } area.
Those are Javascript inline event handlers.
You can do this in pure CSS using the :hover selector.
CSS supports the :hover selector, which is triggered when you move the mouse over the item.
.mydiv {background-color:red;}
.mydiv:hover {background-color:blue;}
Any CSS property can be set to change on mouse-over using the :hover selector in this way.
Opacity is a CSS3 feature. It is supported by most browsers, but IE8 and lower don't support it. They do have an alternative way of doing it (using the IE-specific filter property); it's more fiddly than standard CSS and harder to get right, but it can be done.
Be aware that IE6 and lower only supports :hover on <a> elements. Other browsers (including IE7 and up) support it for all elements. My advice would be just not to support IE6 on your site, but if you do need to, there are hacks for it which can make :hover work correctly.
is there any way to use custom border by css or can make by JavaScript or jquery.
i want to use a different style of border.
like we use
border-style:dashed;
with CSS3 you can use border-image, which is what you are looking for. for more information click here - but note, that this is only supported by very few good browsers (firefox, safari - maybe opera - but no IE (until some day IE9 comes...)).
EDIT:
if you could give some more information how the border should look like, we could try to do some cross-browser-solution - but the best way is to use border-image... and some not-too-ugly-standard-border-fallback for that dumb piece of software called "IE".
CSS3 can do this, but IE won't support it until IE9.
Check out this link: CSS3 border images.
How can I change the alpha of an image in javascript? Also, what browsers support this?
Using jQuery:
$(something).css('opacity', 0.5);
This will work in every browser.
However, it will not work properly with semi-transparent PNG images in IE 7 and 8 unless they are applied using a filter.
I don't think you can change the alpha of the image itself, but you can change it from the tag, or the container in which you put it.
The particular css properties I use for this are :
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
The property's name is opacity and is supported by all major browsers, however in various different forms - opacity, -moz-opacity (FF pre 2.0 I think), filter (IE) and so on.
The easiest way to take is using a JavaScript Framework like jQuery or Prototype, they have a .opacity() function that takes care of the quirks.
The CSS :hover doesn't work in IE6 for elements that are not links. Is there a workaround? e.g. how do I apply the :hover to a div?
There's whatever:hover. I've never used it myself but from what I hear, it works well.
Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.
You can use the famous IE7.js from Dean Edwards, which has the nice advantage, that you can use the :hover selector in your CSS.
Apart from that, I doubt that you can achieve it with CSS alone. IE can handle JS in CSS files via expression(), but you can't get to an expression to handle hovering without a selector handling hovering, if you catch my drift.
Then, finally, a short jQuery solution:
$(document).ready(function () {
$('div').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
Then you can use this in your stylesheet:
div:hover, div.hover { ... }
If you only need for paticulars div
and you are not using jquery then go
for suckerfis js as #futta
suggested.http://www.htmldog.com/articles/suckerfish/
If you are planning to use Hover on more tags in future and don't want to edit every time js for this the go for Whatever.htc in for IE6. as #Pekka suggested.
Suckerfish vs. .htc
IIIIN the blue corner we have
Suckerfish, the original lightweight,
accessible, cross-browser,
standards-compliant :hover mimic.
IIIIN the red corner we have '.htc' -
the JavaScript files accessed via CSS
to mimic :hover.
Ding ding!
And Suckerfish instantly lands a heavy
blow on .htc's validity - .htc simply
isn't standards compliant CSS.
Oooo... .htc sneaks in a crafty jab
without the need for additional
selectors...
Suckerfish bounces around the ring.
He's much lighter weight than his
opponent.
And OH! The IE 5.0 uppercut! That's
something that .htc just doesn't have
the skill to do, whereas Suckerfish
can work IE 5.0 seamlessly.
.htc is dazed! And the contest is
over! Suckerfish wins on points! TKO!
IF you want to get benefit for other things (other than Hover) also in
IE then go for IE7.js as #Boldewyn suggested
And If you are already using jquery
and want to use hover in a limited
way then go for This way :
How to enable hover on a div for IE6 using jquery in minmal code?
NO pure and valid CSS solution available for this in IE6.
One Non- valid CSS expression solution is available
but i would not not advise to use
this because it's slow
Solution: http://www.visibilityinherit.com/code/ie6-hover-expression.php
suckerfish and it's offspring provde great lightweight alternatives for this purpose too.