Blurry glass effect.
Moderator: General Moderators
Blurry glass effect.
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.
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.
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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.
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.
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...
How would I do that?
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...
How would I do that?
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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:
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.
Code: Select all
table, div, form {
background-image: url(your_blurry_image.jpg);
background-repeat: no-repeat;
}
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.
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?
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?