We Keep Coding

Can I blur the entire site except for some items

We have a large application where we want to blur the entire site except for a few items during a walkthrough. As if it is an overlay.
We have explored things such as:
1. Apply blur to the body, but that means all underlaying items will be blurred.
2. Using html2canvas to create a copy in a canvas, however this is too performance intensive.
We can not do large dom manipulations nor heavy jQuery use due to our clients being on slow machines often without graphics cards and the size of the application.
Any suggestions?
Edit: I should also add that we only require it to work in webkit browsers.

Yeah you can do this with a plugin name Foggy..
Check this...It will help you

Simply toggle a blur class. See JSFiddle.
<style>
.blur {
opacity: 0.4;
}
.blur p {
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0);
}
.blur img {
-webkit-filter: blur(3px);
filter: blur(3px);
}
</style>
<script>
$(function(){
$('.box').hover(function () {
$('.box').addClass('blur');
$(this).removeClass('blur');
});
});
</script>
<div class="box blur">
<p>A</p>
<img src="example.png">
</div>
<div class="box">
<p>B</p>
</div>
Source: http://tympanus.net/Tutorials/ItemBlur/

I might be missing the point here, but if you ONLY require support for webkit browsers, then why not just use the -webkit-filter:
nav, header, main, footer {
-webkit-filter: grayscale(1) blur(5px);
}
*:hover {
-webkit-filter: none;
}
It's pretty responsive for me on my old MacBook Pro and the cool thing is that you have so many options to add grayscale, adjustments for brightness, saturation, contrast, opacity, etc. And, it would be fairly simple and lightweight to script a demo in jQuery for your walkthrough, since all you would need to do is remove or add the -webkit-filter to your desired elements.
DEMO >
(I just reused a Bootply I had as an example since it had a fair amount of content).

I'm not sure what your browser requirements are, or how archaic the technology you're developing for is, but you might check out blur.js I could see it not being too heavy, dependent on how much content you have.
Worst case you could probably put a full-width, full-height div between your active area and the rest of the site using absolute positioning and a z-index, and then run blur on that so that the active area has the appearance of being the only unblurred thing.

I had the same problem.
The only solution I found was to have a transparent layer over the content with a hole in it.
.layer{
position:fixed;
width: 80px;
height: 80px;
top: 20px;
left: 20px;
box-shadow : 0 0 0 1000px red;
opacity: 0.5;
}
http://jsfiddle.net/zLYjA/
It's a good solution if you have a slow machine. But you need to do a bit of work to determine the position of the element you want to show.

i am giving a simple approach for creating a modal.
You can do this by blurring all the items except the items you don't want to be.
Float those items over the blurred ones with higher z-index
for ex:
html:
<div class="blur">../*items to be blured */..</div>
<div class=floated-item">../*items not to be blured */..</div>
CSS:
.blur{
opacity:0.4;
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
}
.floated-item{
z-index:999;
position:fixed;
margin-top:10%;
margin-left:10%;
}

Serving different css box shadows for different browsers without browser detection?

I noticed that each browsers renders box shadow blur radius slightly different so I want to even that out. However, as they use the unprefixed version I need to serve different stylesheets for different browsers. What is the most reliable method?
For example: Mozilla uses moz_style.css, Chrome uses chrome_style.css
Im doing this using user agent detection but I heared it is not very reliable:
<script>
if(BrowserDetect.browser=="Chrome") {
document.write('<link rel="stylesheet" href="css/chrome.css" type="text/css" media="all" />')
}
</script>

Surely box-shadow as a CSS property already makes use of vendor prefixes for a few different browsers. If you take a look at this random box-shadow snippet I pulled from elsewhere on the web you'll see that it uses different declarations for webkit, firefox on top of the primary box shadow property:
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
I know for example that the Opera vendor prefix is -o so you may be able to append that vendor prefix to the box shadow property to cover Opera browsers although I am not sure if it's supported. Also you have IE specific box shadow rules as well:
.ieShadow{
display:block;
position:absolute;
z-index:2;
top:5px;
left:5px;
right:-5px;
bottom:-5px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
-ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
background-color:#444;
}
Browser "Sniffing" with Javascript is not seen to be the way go anymore to detect browsers.
So yes all in all, surely your box shadow code can just vary from one vendor prefixed property to another?
EDIT: Some enlightenment on the subject reveals that it really isn't all that simple. Vendor prefixes are a bit of a mess really.
This gives you a good idea of the browsers using the webkit engine and the main box-shadow property:
.box_shadow {
-webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+
}
So I guess specific browser targeting is not achievable with vendor prefixes in CSS (??!)

drop shadow on HTML objects

I am trying to get a dropshadow effect going on selected HTML elements (input text, select, div etc).
The solutions given by many internet users were using CSS3 solution where it uses:
-moz-box-shadow
-webkit-box-shadow
box-shadow
However, this will not work on IE8 (possibly other IE versions)
Is there any way of creating this effect without using these CSS3 elements?

use this css for ie-8
.shadow
{
width:300px;
height:200px;
background-color:red;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=3)
}

I am not quite sure how it can be done without CSS3 but what I know is
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
will work in all browsers.

use CSS3 pie for a ridiculously cross-browser solution.

Web-kit css div shadow: is it possible to put it onto div with pure css or images are needed?

So what I need is simple: user presses something, user sees a shadow effect on new div (div centered window) on top of all page (with 1/4 size for example) alike
Is it possible with some pure web-kit css art? Or javascript+images combination is needed? And how to do such thing?

What you are looking for can be called a modal window. It can be done using CSS3 properties, but it is supported only in IE9+, Firefox 4, Chrome, and Opera.
For a cross-browser solution, you should look at javascript scripts which can render the same effect. There are many popular packages like Lightbox, ShadowBox, ThickBox, FaceBox, etc.
If you are using ASP.NET, there is the ModalPopupExtender in the AJAXToolkit, which will give you the effect.

You need two things a div for your dialog box with box-shadow and another div that lies behind your dialog box with an opacity of 50% or so. This can be done with some css in most every browser including ie. Read this article on how to get box-shadow work in all browser: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
so your html will look like this:
<div class="overlay"/>
<div class="dialogbox">someContent</div>
and your css:
.overlay {
position:absolute;
height: 100%;
width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
opacity: 0.5;
}
.dialogbox{
width: 200px;
height: 150px;
margin: auto;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

From this quote:
Web-kit css div shadow: is it possible
to put it onto div with pure css
and this one:
user sees a shadow effect on new div
It seems as though you're asking if it's possible to create the "shadow" effect around the inner div using CSS.
Chrome's settings page is using CSS3's box-shadow to do this:
-webkit-box-shadow: 0 5px 80px #505050;
box-shadow works in these browsers: http://caniuse.com/css-boxshadow
and the cross-browser CSS is:
-webkit-box-shadow: 0 5px 80px #505050;
-moz-box-shadow: 0 5px 80px #505050;
box-shadow: 0 5px 80px #505050;
http://jsfiddle.net/XHAbV/
If you need it to work in older versions of IE, you can use CSS3 PIE to emulate the box-shadow in those browsers.
If you're after the JavaScript side of how to do this (a modal window), the other answer covers it quite thoroughly.

iPhone-like jQuery Scrollbar

I'm trying to find a jQuery scrollbar that looks like the one of the iPhone: a simple black bar without the up or down buttons. I've found a few scripts but most tend to do so much more than I need. I basically have a div with a fixed height that is set on overflow:auto to which I would like to apply this scrollbar. Help would greatly be appreciated!

Matteo Spinelli has an iPhone-like scrollbar inside of his iScroll library. You should try looking into whether or not you can adopt it to your needs.

What are your browser requirements?
You should try to avoid javascript solutions since they will increase the complexity of your page. If a third-party scrollbar javascript library breaks, you will have to debug it yourself (been there, done that).
Chrome has full support for CSS3 scrollbars, something like this should make an iPhone like scrollbar
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
IE allows styling scrollbars with vendor specific tags, but its very limited. e.g.:
scrollbar-base-color: #663366;
scrollbar-face-color: #99CCCC;
scrollbar-track-color: #996699;
scrollbar-arrow-color: #330033;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-shadow-color: #663366;
scrollbar-darkshadow-color: #000000;
Here is a jsFiddle with the styled scrollbars:
http://jsfiddle.net/APmLZ/3/