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

[Steve Litt]

Ron / BCLUG said on Sat, 25 Nov 2023 19:28:09 -0800

>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.

Don't actually do this in production, but what happens if you label the
first one !important? By the way, I consider !important as bad as gotos
or the Cobol ALTER statement.

>
>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.

I can't help because you're miles ahead of me. I never even heard about
z-index until this email. It's pretty cute though.

SteveT

Steve Litt 

Autumn 2023 featured book: Rapid Learning for the 21st Century
http://www.troubleshooters.com/rl21