Blurry glass effect.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Blurry glass effect.

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

It'll only work in IE... using the "filter" construct system they have, you can add blur to the effects list.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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...
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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.
???
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Bumpy Wumpy...
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
Post Reply