We Keep Coding

Set blur on DIV

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).

Applying CSS3 'Opacity' Property

I'm working on a site where I've created a simple CSS3 hover effect, where if a link is hovered, it changes the opacity and looks like a rollover effect. It seems to be working perfectly on all browsers (even older ones, such as Firefox 2). Just wanted some input if this is a problem and I should consider javascript instead? Or is using CSS a good (semantically correct) way of going about a rollover?

Generally, if an effect can be achieved using CSS alone, it's usually better to use CSS then to use JavaScript to achieve it.
Sure, you can use JavaScript and/or libraries like jQuery, but why? If the browser is capable of doing it natively, not only will it work better, it will look better and smoother.

Generally, people using newer browsers get benefits from the new technology.
People who do not update their systems tend to not care about how things look, so as long as the site is functional and the effect is not very important, I'd say don't bother to make all browsers behave exactly the same. It's a waste of time and effort.

For anchor elements, the :hover pseudo-class is widely supported, and is a good way to go. I believe the only in-use browser that doesn't support it is IE 6. The opacity property is less widely supported, so your effect may not look the way you want in some browsers. If you need to use the :hover pseudoclass on elements other than a, I think you'll lose IE 7 as well.
See http://www.w3schools.com/css/css_pseudo_classes.asp for some background information on :hover and other pseudo-classes.

Best way to do image rollovers?

I want my main logo to change when mousing over.
I understand there are several ways to achieve this, and was wondering what's the best way for stability, browser compatibility, efficiency - and ease to setup.
Some ways I've found are:
Javascript (jQuery) replacement of the "src" attribute.
CSS using backgrounds and "hover"
Any more?
What's best?

Bottom line
For content-ful images, you want to have the src in the HTML markup. You want to use the Javascript solution and put the rollover image in an attribute.
For content-less images UI elements, especially ones that are common across the site or duplicated, a straight CSS solution would be the best (so you don't have to re-declare the image locations at each invocation). Among the CSS solutions, sprites are the best since they don't require preloading overhead.
The Javascript solution
HTML:
<img src="/img/one.jpg" data-rollover="/img/two.jpg" />
In jQuery:
$(function(){
$('img.rollover').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */
});
Sample implementation: http://jsfiddle.net/dtPRM/1/
Benefits: It's easy; it makes sense; it works with minimal additional markup once you have your library set up.
Downsides: Requires Javascript and overhead of loading the jQuery library.
Probably the best option. If your user is using a browser where rollovers are relevant (probably the case), they have the Javascript capabilities to run this option. The folks who have intentionally turned Javascript off for some reason will clue in if you leave a little <noscript> note saying that they may not get the full featureset.
The CSS solution: Best
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 300px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-position: top right;}
Sample implementation: http://jsfiddle.net/dtPRM/5/
Personally, I think that for content-ful images, this is an even worse option than the CSS + two background images solution. You're separating the HTML markup from the semantic value of the display.
If you're using content-less images like UI elements, though, this is the best solution in my opinion.
The CSS solution: Also okay
Another CSS option is available that doesn't involve background images (preferred among the CSS solutions if you want to have the image tags in the HTML, like for semantically meaningful images).
<div class="rollover">
<img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
<img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>
CSS (I use the :not pseudo-selector here, but it's pretty easy to avoid using it; I also think I got the classnames semantically backwards):
div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}
Sample implementation: http://jsfiddle.net/dtPRM/2/
Benefits: Semantically sensible compared to the previous CSS solution of putting all the information the stylesheet.
Downsides: Extraneous markup needed.
Comment: This one may automatically pre-load depending on whether the browser calls for it.
Bottom line: A decent fallback if option (1) is unavailable because you absolutely need IE2 compatibility or non-JS support.
The CSS unsolution: Stay away
I mention this only because you mentioned it in the question. I wouldn't use it.
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 600px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-image: url('http://dummyimage.com/600x400/fff/000');}
Sample implementation: http://jsfiddle.net/dtPRM/4/
Benefits: Widely compatible; all you really need to support is background images and hover.
Downsides: Semantically weird to put images in CSS and to centralize it there. Makes future modifications more difficult. That being said, if you have a scenario that warrants a rollover image, there's a good chance it may be a non-content image (e.g., a UI element), in which case CSS would be semantically (perhaps) even more suitable than a regular image. See the note on sprites below.
Other downsides: You'd have to be careful to declare image height and width (a good practice anyway, but it may get cumbersome when you just want to get things done). Users viewing on mobile browsers that may treat CSS background images unusually.
Even more downsides: If you want to layer a preloader on top of it, you're going to be using Javascript and somehow selecting the rollover-able elements, and at that rate, you may as well use Javascript for everything.
Bottom line: Don't use this for content-ful images. If you must stay away from Javascript, use sprites for UI elements and the alternate solution for semantically meaningful images.

#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}
Using an image like this:
Note: Avoid JS image replacements as you will incur a short image load time if images are not cached before.
Hope this helps bro!
W.

CSS using backgrounds and "hover"
Use CSS sprites, in other words combine both images into one and then use css :hover to shift the image.
One advantage of using CSS is that it'll work even if JavaScript is turned off.
One advantage of using a single image is it'll avoid the extra HTTP request.
See: http://css-tricks.com/css-sprites/
Tools to help generate image and CSS:
http://csssprites.com/
http://css-sprit.es/

You should use a :hover CSS rule.

CSS by far. Though you may want to precache your image with javascript.

Image rollovers using 'sprites' List a part - sprites CSS

Use CSS sprites and the :hover psuedo-class in CSS. Here's why:
Switching image source either through JS or through the CSS will cause a "blink" on the first mouse-over while the new image is downloaded by the browser. If you use the sprite, it's just one image that changes position, so no blink.
A single image reduces HTTP requests, making the site load faster in general.
It works if the user has JavaScript disabled.
It's supported by all browser types (desktop, anyways, phone browsers without a :hover state don't count for this anyways).
More information: http://css-tricks.com/css-sprites/

$('#div1').hover(function(){
this.style.color='white';
},function(){
this.style.color='black;
});
or
$('#div1').onmouseover()...
$('#div1').onmouseout()...

IE6 Hover Issue

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.

What is the preferred way to do a CSS rollover?

When setting up a rollover effect in HTML, are there any benefits (or pitfalls) to doing it in CSS vs. JavaScript? Are there any performance or code maintainability issues I should be aware of with either approach?

CSS is fine for rollovers. They're implemented basically using the :hover pseudo-selector. Here's a really simple implementation:
a{
background-image: url(non-hovered-state.png);
}
a:hover{
background-image: url(hovered-state.png);
}
There are a few things you need to be aware of though:
IE6 only supports :hover on <a> tags
Images specified in CSS but not used on the page won't be loaded immediately (meaning the rollover state can take a second to appear first time)
The <a>-tags-only restriction is usually no problem, as you tend to want rollovers clickable. The latter however is a bit more of an issue. There is a technique called CSS Sprites that can prevent this problem, you can find an example of the technique in use to make no-preload rollovers.
It's pretty simple, the core principle is that you create an image larger than the element, set the image as a background image, and position it using background-position so only the bit you want is visible. This means that to show the hovered state, you just need to reposition the background - no extra files need to be loaded at all. Here's a quick-and-dirty example (this example assumes you have an element 20px high, and a background image containing both the hovered and non-hovered states - one on top of the other (so the image is 40px high)):
a{
background-image: url(rollover-sprites.png);
background-position: 0 0; /* Added for clarity */
height: 20px;
}
a:hover{
background-position: 0 -20px; /* move the image up 20px to show the hovered state below */
}
Note that using this 'sprites' technique means that you will be unable to use alpha-transparent PNGs with IE6 (as the only way IE6 has to render alpha-transparent PNGs properly uses a special image filter which don't support background-position)

It will still work in CSS if the browser happens to have Javascript disabled.

Because it's an aspect of presentation, I'd say it's more standards based to do it with CSS. It used to be done in Javascript, simply because we couldn't do it with CSS (old browsers suck, and I don't think :hover was even added until CSS 2).

Implementing a rollover with CSS uses the :hover pseudo-class to define the style of the target element when it is hovered over. This works great in many browsers but not in IE6 where it only works well with the anchor tag (i.e. a:hover). I used CSS hover to implement a tabbed navigation bar but had to use IE behaviors to get it working in IE6.

Yep, the best way to do this is css sprites. An annoying problem occurs in IE6, when browser make a request every time an element is hovered. To fix this, take a look here.

I'd stay on the CSS side of the house, but I've done very little Javascript.
CSS seems to be easier to standardize across browsers than Javascript, though that may be changing with the advent of Chrome's V8 and Firefox's upcoming new rendering tool.

Isn't there a mnemonic for remembering the sequence of declarations in CSS?