0

I'm struggling with that problem for quite some time now so I decided to ask to have a definitive (and hopefully positive) answer.

Is there any way, using any web friendly language, to allow me to apply a spot light effect to a whole web page ?

Just like in this picture for instance:

enter image description here

This is an illustration made with some kind of software which has nothing to do with the web but that's the result I'm actually looking for: a unique and 3D-like illumination applied dynamically to each and every element of the page.

In terms of static design, gradients and shadows are easy to achieve using CSS but that wouldn't get me there as one thing that css fails to do is to fake a unique illumination that would light everything consistently, even if the web page is resized and the inner elements are dynamic.

Each element can emulate illumination and a shadow source on its own but they won't share a unique and consistent source of light together.

So, is there any trick of the trade or any other language (javascript or anything else) that would help me achieve what I'm looking for ?

This seems such an obvious feature to me and yet, I've never seen anything like this online so far.

Thanks for your input

EDIT: it seems unclear for a user, so here is an illustration to show the problem:

enter image description here

With CSS, each div can have its own light simulated (with gradient and shadow) but then each of them has its own personal pseudo light source "embedded" with it. Move any div and the pseudo-light and shadow associated with it will remain at the same place relative to the element, wherever it is on the page. Because the pseudo-light source relative to each div is static. That is ok for one shot illustrations that will emulate global light but on a real time situation when divs can be moved around and screen resized, multiple static pseudo-lights will not make it look like a global illumination. The global lighting is inconsistent.

in this case, NO global illumination is emulated, just a series of local pseudo-illuminations. One by element.

enter image description here

With a 3D global light however, each div is illuminated by the same unique global light source. When moving elements on the surface, the illumination and shadow will be updated according to the new position of those elements relative to the global light. That way, moving and resizing elements feel real. It looks like everything on the page (divs, text and even the background itself) is illuminated by the same unique light source. This is what I mean by global illumination.

Which is what I want to achieve. Natively or as a workaround, with css or javascript or any other language that is web-friendly, as long as it allosw me to get there with more or less the same performances as any other web page.

3
  • I do not fully understand your question. Are you trying to make all elements use the same drop shadow? What does this mean "but that wouldn't get me there as one thing that css fails to do is to fake a unique illumination that would light everything consistently"? You can use consistent shadows for all objects. Or you could use the same direction but change the intensity.
    – AndrewH
    Apr 5, 2021 at 14:31
  • 1
    Or do you want the drop shadow to change depending on where the mouse is?
    – AndrewH
    Apr 5, 2021 at 14:34
  • Ok, it took me some time but I edited my original post to answer your concerns. No, I don't want to make the light follow my mouse. I want one unique light source that remains static. But I want that light to feel real. Because even tough the light remains static, the elements (divs) can be moved or resized. And if their gradient and shadow isn't updated according to the main light source, it feels totally fake. I hope the edited original question will make you understand my problem. If not, let me know, I will try my best to make it cristal clear. Apr 5, 2021 at 16:03

2 Answers 2

5

The only ways to do this are to:

  1. Use "actual" 3D rendering (like WebGL) for the UI which isn't usually recommended for UI because it's harder to make UIs with just WebGL, especially making them accessible. Or

  2. Loop through each instance of each relevant item, calculate where it is with respect to your fake light, and adjust the shadows based on that info. The calculations are pretty simple.

In both cases you need to redo the shadow calculations if things are moved or resized. Make sure to throttle any resize events. The only thing that is expensive is if you need to animate the light/change of shadow position because shadows are not cheap to render.

1
  • Thanks. Those were my conclusions but I wondered if there was anything else I didn't know/think about. I've seen a great plugin that does that with shadows in an efficient way (updating them according to the mouse position). It's shine.js. But: it's only applicable to elements on a one by one basis, and it's only for shadows, not gradients/lights. It's half way there but the other critical half to achieve what I want is missing unfortunately. bigspaceship.github.io/shine.js Apr 5, 2021 at 16:35
1

One probable option would be using a parallax script, and on one layer add the shadows as transparent PNG and on the main layer add the objects projecting that shadow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.