[GoLUG] Fancy HTML, CSS, and maybe JS visual effects tools

[Ron / BCLUG]

Ron / BCLUG wrote on 2023-11-22 21:27:

> The link http://bclug.ca:8008/tools/ will give an nginx "fancy-index" to
> 3 tools (directories):
> 
> * curled-corners:
>      * a visual effect to make it look like an element is on paper
>        that is curling up at the corner(s)
>      * this is a work in progress
>      * when resizing a window, the effect can drift outside the wrong
>        edges of the styled element - this needs work, there may not
>        be a one-size-fits-all solution

Through laborious tweaking, the issues are solved, and it looks great 
(IMHO) at any size.

>      * JS will probably be used to measure the element and adjust
>        the CSS variables to ensure pleasant visuals at any size

No JS required.

>      * JS may be implemented to make the corner curl effect change
>        with mouse movement

That still sounds cool though.


One thing I haven't been able to implement, and may not be do-able, is 
to have multiple ::before and/or ::after pseudo selectors on a single 
element. The last one encountered takes precedence.

So, .curled_corners_top works, but .curled_corners_left doesn't, since a 
::before would be needed on the top-left and bottom-left border elements.

Also, no .curled_corners_all for the same reason.

I'm out of ideas (for now).


Final task (if I don't come up with an idea for fixing this issue) is to 
split the CSS file into a generic styles and an effect-specific file for 
easy importing into any project. (Now *completed*!)


Encountered some interesting issues with z-index stacking contexts and 
mouse events. z-index: 0; seems to fix it.

Shadows are z-index: -1; to sit behind their elements.
The enclosing container had a z-index: -10; to sit below the shadows.
Then mouse events wouldn't trigger.
Fun times.



Any feedback welcome.


rb