javascript - Create a transparent mask overlay in CSS -


so i'm making game character moves in dark cave torch. want torch light area around character players can see character. able image, image must @ least 2000 x 2000px cover enough area around character. because image 2000 x 2000 fps dropped 50 30. anyway in css? notice visible area under black area not image divs backgrounds. btw i'm making html/javascript game if wonder.

game desing

you can use box-shadow property generates shadow around css object. have 'negative' shadow, can use 'inset' property applied whole screen :

box-shadow: inset 3px -5px 81px 97px rgba(0,0,0,0.89); 

the first , second px properties allow move negative shadow around center. have blur radius, spread radius, , rgb color (with opacity)

you can play these settings see results, example in this tool. (don't forget inset toggle @ end).


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -