We Keep Coding

See through effect with CSS (like iOS 7/Aero)

I am trying to design an application that runs on Node-Webkit. I have this crazy idea for the background, but I have no idea how I should approach implementing this with CSS.
This is the app how it looks right now:
I would like to give all dark green/blue backgrounds a see through effect (there are two, the darker for the top and the slightly lighter for the toolbar). Like this: (mock up, background is maybe a little too blurred)
I do not aim for a solution that has real see-through windows (like aero and iOS 7/OS X 10.10). A faked effect with a predefined, static background image is fine (which does not have to move when the window position change).
The implementation has to be memory and performance efficient.
I want to specify the type of background (dark or light) by setting the class of each element (like the tabs, toolbars, etc) to 'bg-dark' and 'bg-light'.
The approach I would take is this:
create two images, one for the darker background and one for the lighter background. (1920x1080px each, because my app must handle full screen nicely)
give each element a background class 'bg-dark' or 'bg-light'. This class defines a CSS background image.
with javascript, for each element in a certain class, calculate a value for background-position.
The issue that I see with this approach is that for each element, webkit/blink has to load the entire background image to memory. Is this true? Is there a better, more sane way to do this? It doesn't have to be cross-browser friendly, as I only need it for a Node-Webkit app (which uses one of the latest blink engines).
Edit:
Note that CSS opacity does not do the trick. I want the background to be kind of blurred, so simple transparency is not sufficient. Also, if the selected tab was actually translucent (opacity < 1), the dark topbar whould show through (which is not what I want).

Please monitor #issue132.
It would be a feature later.

In CSS there is a feature called transparency. Maybe this will get you through this.
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
With this you don't need to load another image which will consume memory and bandwith.
€dit: missed source: http://css-tricks.com/css-transparency-settings-for-all-broswers/

opacity is a way to do that.
But beware that it'll make entire container transparent.
ex:
container{
/* IE 4-8 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* All Modern Browsers */
opacity: 0.5;
}
In order to make only background transparent, I'll Suggest You to use transparent background-color.
AS:
container{
background:rgba(150,255,255,0.5); /*IE 9+*/
}
rgba stands for red,green,blue & alpha. I think that's what you're looking for.
Hope it'll help you.

Translucent effect in css or jQuery?

I've been searching for some CSS or jQuery that will achieve a translucent effect. Most of what I've seen are people using translucent as a synonym for transparent, and that's not really accurate or what I'm trying to get.
I would like a box and when this box passes over objects, it distorts the objects underneath. Think a bathroom window. It allows light to pass through, but not a clear picture. I've attached an image showing what I want to achieve.
My thinking is I would apply this effect on the top image (the white box in the sample image) but it might possibly be something else. Also, I'm pretty sure this will be javascript but I'm including CSS as an option in case there's something out there I didn't know could produce this type of thing.

Just use a transparent PNG, especially if you need a texture like your example.
Otherwise you can set the opacity of the inner div to some value < 1

As been suggested:
If you only need the effect to appear over an image (and not on top of html text etc.)
The number of images the effect should appear over is limited
Then you could prepare an alternate version of each image with the translucent effect applied, then use the alternate image inside the effect box as background image, where the background-position is calculated based on the box position.
Or you could look into this more complicated way: http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

There is an alternative to the opacity or translucent image solutions listed in the other answers. You could try using a CSS3 filter with blur effect:
img {
-webkit-filter: blur(10px);
filter: blur(10px);
}
Please note however, that this is still in the experimental phase and subject to change. It also may note be supported by all browser vendors. For a list of compatible browsers, check here.
This list from CanIUse may also be helpful for you to look at.
In addition, here is another good resource on CSS Filters.

Looks like a good candidate is the jQuery Blur plugin. Seems to do exactly what I'm looking for. Thanks for everyone's suggestions.
http://www.blurjs.com/

An extention of the idea proposed by #Dryden Long
Here is a working Example: jsFiddle
You can create a translucent version of the image in GIMP/photoshop. Then set the css background property of the child div to fixed:
.parent-div {
position:relative;
background: url(normal.png) no-repeat 0 0 ;
}
.child-div {
width: 100px;
height:100px;
background: url(distorted.png) no-repeat <X> <Y> ; /* x y relative to the parent*/
background-attachment:fixed;
}

background image dosnt show

I have a weird problem. I'm testing stuff before I start working on a site, so I'm making different pages with different images in them.
I'm working with a image I did in photoshop (background image), and for some reason it doesn't show on the page in Chrome, FireFox, or IE9.
Here is the simple code in css:
body
{
width:auto;
height:1000px;
background:red images\BackGroundBig.jpg repeat-y fixed top ;
}
Is there something wrong with that?
When I change this to only: background-color:red, it's showing as a red background.

Wrong syntax:
background:red url("images/BackGroundBig.jpg") repeat-y fixed top ;

Separately you can get it like these
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Altogether
background:Color url("path") repeat x y;

Brightening an image using styles or Javascript

I would like to brighten an image on my webpage on mouseover using css or javascript.
Ive seen some examples using opacity and filters in styles but they dont seem to work for me.
Thanks in advance
CP

[UPDATE]
A pure CSS solution would be to use CSS filters:
img:hover {
filter: brightness(1.5);
}
Here we add 50% brightness to all images on hover.
Why not? You can always set the background of the parent container to #fff (white) and then lower the opacity of the image.
HTML:
<div class="white">
<img src="image.jpg" alt="Image" />
</div>
CSS:
.white { background: #fff; }
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
Another solution is to use a JavaScript library, such as Pixastic.

You could use CSS sprites. Create 2 versions of the image: one normal, one bright and combine them into 1 image using Photoshop or whatever you use.
There's a good explanation of what CSS sprites are here.
Of course, this may not be something you could use on your site. For example, it's probably not something you'd want to use on large images (they'd double in size). You also couldn't do it this way if the images you want to brighten come from outside sources or are uploaded by users for example. It would work well for things like navigation bar images and other UI elements.

I would use something liek:
filter: alpha(opacity=80);
opacity: 0.8;
As far as I know, this is the only way to accomplish it in CSS. Is that what you are after?

Font anti-aliasing issues with jQuery.fadeIn in IE8?

I'm banging my head against the wall with an issue I'm having in IE8. I am using the fadeIn function on jQuery to make the site content fade in. This works perfectly fine in all of the other browsers, but when the fadeIn finishes in IE8 the font anti-aliasing seems to change, causing the text to shift slightly.
You can see the site at http://www.ipulse.biz. The code I'm using to cause the fade in is quite simple, as shown below.
var showContent = function() {
$('#content div:first').fadeIn(1000);
$('#navigation').fadeIn(500);
} // end showContent
The code is called by a setInterval function, if that makes any difference.

As previously explained, this is caused by Cleartype in Internet Explorer- but there is a workaround that will at least make this issue tolerable.
$('#navigation').fadeIn(500, function(){
if ($.browser.msie){this.style.removeAttribute('filter');}
});
That should force IE to clear the transparency and thus render the text normally.
It still isn't pretty, unfortunately.

This is caused by ClearType disappearing in Internet Explorer, which is quite annoying.
http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

I know my answer comes a bit too late, but how about thinkin' vice-versa?
IE7 / IE8 don't keep anti-alias for Faded text, so, if you have a single color background (e.g. black), you can create an empty div, background-color: #000; position: absolute; display:block; and put it over the text element.
If your request is to have a text FadeIn effect you just have to apply the FadeOut to the "black" layer over it, and vice-versa.
This way the text anti-alias is kept intact.

Sorry for the very late reply, but I had the same problem and was searching for a solution when I came across this topic. I didn't find a working solution in this topic, but I came up with a simple solution that seems to fix the problem perfectly.
In stead of using:
$('.element').fadeIn(500)
use fadeTo and fade to 99%:
$('.element').fadeTo(500, 0.99)
You won't see a difference in the 1% and because it doesn't reach 100% opacity, IE doesn't seem to apply cleartype.
Let me know if this works for anyone else.

it needs to be called after the fade effect is completed (e.g. 500ms after etc.)

I fixed this by adding in the css for the required text
filter:alpha(opacity=99);
this will only effect ie. I still get a small shift in ie7 but it's exceptable.
You can see it working here http://thriive.com.au/

Found a ready solution for that problem.
http://jquery.malsup.com/fadetest.html

I have a solution: Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})

I also had problems with transparent PNG's in faded area's, but combining the above JS for removing the filter attribute with a tiny bit of css the image black 'border' was gone while fading.
Is my case it was a element that uses a css-sprite, so i only had to add this to my sprite class in the css:
.sprite{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */
zoom: 1;
}

I'm not using JQuery but I half-solved this issue by using the following CSS:
div
{
opacity: .15;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
opacity: 1;
-ms-filter:"";
}
The fully opaque text is anti-aliased now, but the translucent isn't. It's not a huge issue for the translucent text though.