Page 1 of 1

Blurry glass effect.

Posted: Mon Sep 18, 2006 10:19 pm
by JellyFish
How can I get a table to be semi-transparent using Javascript, css, or just planing html or anything, and slightly blurred when looked through if you know what I mean???

This is what I'm trying to accomplish with a table: http://www.notebookshoppe.com/images/wi ... 5342_2.jpg

The part where the window is blurring the background and you can see through it.

Thanks for reading and all help is appreciated.

Posted: Mon Sep 18, 2006 10:47 pm
by feyd
It'll only work in IE... using the "filter" construct system they have, you can add blur to the effects list.

Posted: Mon Sep 18, 2006 10:56 pm
by JellyFish
what source code would I write? I've used "filter:alpha(opacity=50);" before but how would I make the blur effect?

A link to all of the filter's abilities would be adequate...

Posted: Mon Sep 18, 2006 11:05 pm
by JellyFish

Posted: Mon Sep 18, 2006 11:33 pm
by JellyFish
Yeah but you see. I don't think this would pull of the effect. I need the background to blur not the table that's semi-transparent.

Can someone make an examples of how you think this should be done?

Posted: Mon Sep 18, 2006 11:38 pm
by feyd
There are two separate structures: the effects and the text. The text is not a child of the effects, but is instead positioned above the effects to give that illusion.

The only alternate is using CSS alone with some clever background settings to include a blurred image.

Posted: Thu Sep 21, 2006 12:21 am
by JellyFish
I don't understand what you mean? But I am interested in this statement:
The only alternate is using CSS alone with some clever background settings to include a blurred image.
???

Posted: Thu Sep 21, 2006 12:31 am
by Chris Corbyn
I would just make a background image in your favourite image manipulation program and get it lined up to look right over the top of the original. The effects you want will certainly not be available in all browsers (at least if we want standards compliant code).

You can always make the background image too big so that if the table changes in size it has enough of a margin to compensate.

Posted: Thu Sep 21, 2006 5:10 pm
by JellyFish
I think I understand what you mean now.

But even if I made a background image and a blurred background image (I think this is called masking btw) I'd also need to take inconsideration the other HTML elements that come into play, tables, images, text, etc. These all need to be blurred when behind the table that's blurring the background... :D

How would I do that?

Posted: Sun Oct 01, 2006 6:06 pm
by JellyFish
Bumpy Wumpy...

Posted: Sun Oct 01, 2006 6:24 pm
by Chris Corbyn
You can apply a background image to almost all block level elements by using a class in a stylesheet, or even applying it to all elements by default:

Code: Select all

table, div, form {
    background-image: url(your_blurry_image.jpg);
    background-repeat: no-repeat;
}
If you have some very large non-repeating image as the main background I'm sorry but you really do need to make separate background images for each element in order to create the effect you need.

The browsers except IE support PNG's with 24-bit alpha transparency which you could probably use a background image to get a similar sort of effect but in IE they will show up as yucky looking grey images.

Posted: Thu Oct 05, 2006 3:00 pm
by JellyFish
I see what you're saying. Have two background images, one that's normal and it set to the whole body of the webpage, and one that's the same only blurred and set to the table elements as a background. And whenever you move the table around the backgrounds possition changes using javascript to create the effect.

Now one problem. The other html elements on top of the body's background will not have the blur effect when layered with the table that's creating the effect. The effect is blown...

Is this the way you meant of doing it. Or did I missunderstood?