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)

5+ Year Member


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)

WebmasterWorld Senior Member 10+ Year Member

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)

5+ Year Member

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)

5+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month