Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Using transparent .png as filter over content

12:01 am on Mar 7, 2009 (gmt 0)

New User

5+ Year Member

joined:Mar 6, 2009
posts: 2
votes: 0


website content is shown on a crt screen imitating graphics. The content has the effect of refresh frequency.

Method tried:

I displayed the content, text, links, images, etc, in a div.
directly on top of it I positioned an another div element with higher z-index. The content was nicely filtered with the divs background image "horizontal lines, which could be animated".


The higher z-index element prevents any interaction with the content by mouse.


Is there any way to accomplish this?

2:05 am on Apr 3, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0

In short, you are just using an old trick to try and stop people from pulling your content, and assuming that a transparent cover will stop them. IMO, don't waste your time. It isn't going to even slow down the competent, and the incompetent are not a threat.

Better to protect content by monitoring for anything stolen and then doing C&Ds and DMCAs.

7:46 am on Apr 3, 2009 (gmt 0)

New User

5+ Year Member

joined:Mar 6, 2009
posts: 2
votes: 0

Thanks for the reply D_Blackwell, but you have misunderstood my intentions. Perhaps I wasnt clear enough.

Ultimate goal is to achieve graphical interface with a filter layer on top of the content.


layer 0
the content, text, images, videos etc.

layer 1
png-image gif-animation.

Layer 1�2 function is to have a such effect that it resembles the old ctr flickering. See the skeleton at <snip>

One suggestion that i have tried yet is that I lock an 1x1px div at the top left of the "screen" and allow the image to span over the div�s border. Might not work.

Also i have seen on some websites a falling snowflakes across the display. Those are accomplished by javascript i presume?

Anyone tried anything similar? Help is appreciated!

No URI's please, see TOS [webmasterworld.com]

[edited by: limbo at 3:58 pm (utc) on April 3, 2009]

5:43 pm on Apr 14, 2009 (gmt 0)

Full Member

5+ Year Member

joined:Mar 3, 2009
posts: 227
votes: 0

I have been messing with transparency designs for a while now. There is a way to do what you want do and still have people able to interact with the site. However there is an issue. PNGs are the only image format that will give you the type of transparency that you need. But they can only be static. You can only animate gifs.

So if you want a flicker effect you will have to find a java script to do so. But think twice about doing so. Most people don't like visiting a site with "too much going on".

But if you want to go static you will be doubling your work (content, css, images) neat effect but not really wise for file size and upkeep. Maybe think about doing it on just sections of your page.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members