CODEWITHSUNDEEP
javascripthtmlcssdomcanvas
user2076675
user2076675

Reputation:

Is there any way to make a web page slightly glow without CSS box-shadow?

I'm trying to code a tough interface feature performantly

I'm trying to code an interface to which I apply a broad, faint glow like this (dark example, sorry):

enter image description here

What I've tried so far

I've considered outer-glow, filter, and canvas solutions, but none of them seem to offer a viable, performant result:

BUT severely damages performance, especially with wide glows.

BUT doubling the DOM and replicating all events within the DOM would not only be a big mess, it would likely damage performance in a serious way.

BUT (unless there's a way to read the whole window render and feed that into canvas directly) this involves a complex, faulty (security roadblocks and limited support for the functionality) process of rendering all the DOM elements as SVG and I would still have to keep that canvas version of the DOM in sync with the actual DOM, which will be a mess.

My question

So I'm out of ideas. Is there any way for me to make my interface glow, in a performant way?

I'm not very hopeful on this, but I did want to reach out and see if something I hadn't thought of with filters, canvas, or some other trick would make this glow effect possible in a web application while preserving performance.

Upvotes: 0

Views: 342

Answers (1)

Jonathan cartwright
Jonathan cartwright

Reputation: 142

This is probably not the route you were really looking for but, it would be able to produce the result you are trying to get. This approach would certainly be the most performant approach you could take, but of course you have to update the design.

The design update approach
You could approach this from the design side rather than a coding one. So rather than coding something. You would figure out what the final target colors are for your elements and modify your css. You would also need to modify some images potentially.

Upvotes: 1

Related Questions