CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Awais Umar
Awais Umar

Reputation: 2075

How to make whole page black except for some portion?

I am trying to make an effect in which the whole page would be dark except for a specific part that'll be transparent. That part would be a circle which would be moving randomly. Now where ever this circle goes on the page, content under the circle would be able to be seen while the whole remaining page would remain dark.

Where I AM?
I have created the script that'll move the circle randomly on the page but i can't get the effect. Don't know what to do.

Please take a look on the following image. It'll give you a better idea of what i am trying to achieve. enter image description here

Now consider that this transparent circle is moving randomly on the page ( i have already made the script for that). Kindly take a look on this fiddle. It'll show where i am. Thank you..

Upvotes: 4

Views: 691

Answers (2)

Playdome.io
Playdome.io

Reputation: 3225

Try using CSS Masks:

Just draw a circle in photoshop and use CSS techniques to apply the mask on the image.

CSS:

 -webkit-mask-image: url('image.png');

More info here: http://thenittygritty.co/css-masking and here: http://www.html5rocks.com/en/tutorials/masking/adobe/

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115099

This is simple matter of adding a giant box shadow to the moving div.

No extra elements required.

Unprefixed CSS 

box-shadow: 0 0 0 9999px black;

JSfiddle Demo

Upvotes: 11

Related Questions