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

Scale the contents of a div by a percentage?

Building a CMS of sorts where the user can move around boxes to build a page layout (basic idea anyway).
I'd like to pull the actual contents in from the database and build out the "page", but have it display at 50% scale.
I realize I could have 2 sets of CSS - one for the actual front-facing page, and one for the admin tool and just shrink everything accordingly, but that seems like a pain to maintain.
I was hoping there might be some kind of jquery or CSS or something that would allow me to populate a div and give it the properties (?) of 50% scale.

You can simply use the zoom property:
#myContainer{
zoom: 0.5;
-moz-transform: scale(0.5);
}
Where myContainer contains all the elements you're editing. This is supported in all major browsers.

This cross-browser lib seems safer - just zoom and moz-transform won't cover as many browsers as jquery.transform2d's scale().
http://louisremi.github.io/jquery.transform.js/
For example
$('#div').css({ transform: 'scale(.5)' });
Update
OK - I see people are voting this down without an explanation. The other answer here won't work in old Safari (people running Tiger), and it won't work consistently in some older browsers - that is, it does scale things but it does so in a way that's either very pixellated or shifts the position of the element in a way that doesn't match other browsers.
http://www.browsersupport.net/CSS/zoom
Or just look at this question, which this one is likely just a dupe of:
complete styles for cross browser CSS zoom

Alternative to CSS3 transform: rotate(xdeg) in CSS2 or Javascript to rotate text

My problem is that I use a html to pdf generator (acts_as_flying_saucer) that support CSS2 and javascript but not css3 so I can't use the transform: rotate(-90deg) (of course with different engines like webkit and stuff).
I tried PDFKit and Wicked_pdf but they didn't have full CSS2 support whereas I needed the position: fixed to set my footers on all pages to the bottom of the page.
SO my question is if there is a way to get vertical text with either CSS2 and / or Javascript /JQuery? CSS3 is out of the question unfortunately. :(

In IE the writing-mode is available.
<span style="writing-mode: tb-rl;">CSS2?</span>
See more info: http://msdn.microsoft.com/en-us/library/ms535153%28v=vs.85%29.aspx

No it's not possible without rotate. I don't know just crazy idea using canvas.
http://jsfiddle.net/LBsuQ/

Transparent background progress bar?

I'm trying to find an animated progress bar with a transparent background. I would prefer to achieve it using JQuery, Javascript and/or CSS. Is this possible? I'd like something much like this: http://www.fcm.travel/progress_bar.gif Has anyone come across such a thing?
The other questions I've seen on here show static bars, nothing animated much like the example.

You can make anything transparent with CSS. The following makes 75% opacity (25% transparent)
style="opacity: .75; filter: alpha(opacity=75)"
(The extra filter rule is for IE)
Edit: If you care that it works as often as possible on older browsers, you would add the old -webkit- and -moz- rules
style="opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; -webkit-opacity: .75"
In the event the browser does not support opacity settings, it would automatically default back to 100% opacity which is not transparent or translucent at all

I'm not sure what you mean by transparent, but jquery ui has a progress bar: http://jqueryui.com/demos/progressbar/#animated

Technically, Animated PNG would be neat for this. However the support for it isn't really that wide last time I checked.
So what you could do, seeing you are open for JavaScript solutions, is create a spritemap image based on 24 bit PNG's so it has nice transparancy, that contains every state for the animation. Then with JavaScript and a decent enough timer/interval, simply change the background position for the image so it looks like it's showing a live animation.

I've just made something that would interest You few days ago, take a look at this progress bar

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?