Any way to add inset box-shadow ... #Solved

Question

So...we have ball...again :D

It moves from 1 side to other...

I want to highlight sides , so I did it with borders and now thought about same way for shadows,but the only way I found is changing it each time it moves to wall...

So it will be like - reach right side - highlight right shadow;
reach left - highlight left shadow,but...

Still didn't found good way to highlight all of reached wall shadows for X seconds.
(My way doesn't support shadow highlight for more then 1 of them).

That's exectly the question :

How to highlight reached wall's shadow for X seconds and do not let it lose highlight till timer will not be over (even if it hit other(highlighted) wall) :D

Code here:
https://code.sololearn.com/Wa18Bsr20HY4

Answer 1

With 1000ms delay ( you can change it easy ), solution for handling box-shadow as border-shadow ( adapt the values to what you need ;) ):
https://code.sololearn.com/WaGb2G3N4VDR/?ref=app

Answer 2

As I first specify, I'm not JQuery user: I was just guessing that, but I've noticed the 300ms delay only after search for how to use css() JQuery method... and I have not searched more, because I misunderstood your question ( thinking your problem was you cannot set a border highlited more longer than since another one become highlighted :P ... but It seems I was wrong and JSON object is working as well, without overwriting all styles ^^ )

Answer 3

I don't be an user of JQuery, but you are using the css() method with an object literral as parameter: this will override all the 'style' attribute of an element... Instead, use the method with 2 parameters: first the style property to set, and second the value to set ( this will overwrite only the specified property ).

And obviously, set a delay value greater than 300ms ( with 1000ms to get 1s as specified in your question, I was able to highlight each side independently ):

// your code ( extract ):

$('#area').css({
'border-bottom': '0.1px RGB(0, 255, 150) solid'
});
setTimeout(function() {
$('#area').css({
'border-bottom': '0.1px gold solid'
});
}, 300)

// fixed code:

$('#area').css(
'border-bottom', '0.1px RGB(0, 255, 150) solid'
);
setTimeout(function() {
$('#area').css(
'border-bottom', '0.1px gold solid'
);
}, 1000)

Answer 4

Unfortunally, shadows only works for the box, not for each border independently...
You need to workaround, and there could be many ways... but one could be to add html element to handle your visuals borders as independant html elements, and set them independantly shadows properties ( applied to each box, not each border ).

Answer 5

@visph
Seems so,edited topic a bit in this case (more "shadow" words :D)

Answer 6

@visph

Yep...seems like good way,but pretty huge in code :)

Also,my (JSON) css ({//styles}) didn't removed anythin', all previus styles still works after bouncing , are you sure it should remove somethin' o_O ?

I always use JSON in case of adding new styles...

Answer 7

Reduced even more timeout , so now even if we can't have 2 walls at once it doesn't matter , with150ms it's okay :)

#Solved

Answer 8

@visph
Aight,you won , it works better :D
I'll take it :D
(But guess I'll still use faster delay,it looks more dynamic as for me + maybe i'll change color model closer to yours - like green-yellow,seems nice)

Answer 9

@visph
That's about borders ,borders works good by now :)
(Yep,maybe I'll increase timing and replace css+timeout with animation)...(or maybe not,cause I wanted it to be fast :D)

Question about shadows,not borders :)