In today's article, I'm going to describe how to add dynamic colored borders to an element in your webpage, similar to the one you see on this page. After that, I'll talk about some details specific to the implementation in this page, which is statically generated with constexpr.js.
Let's say this is the element you want to add a dynamic border to:
1. First thing your should do is wrap this element inside another div, and add a tiny amount of padding to the outer div. That padding will act as the border you see on this page.
2. After that add some colors to the wrapper div. A linear-gradient should do the job:
3. Now we animate the background:
To be honest, this looks more like diwali material than holi material, but whatever.
Another method of doing this is adding an
- It doesn't play well with
::afterpseudo-element extends outside of the content bounds, so it might interfere with the surrounding elements. So you can not use this method if your target element is right next to some other element.
The implementation in this website
You can find the source of this page here.
Every page on this site contains these two constexpr script tags:
The rendering code on this page waits for the site global rendering to finish, which generates the following
And adds another wrapper around it that does the holi decoration:
Since all this code is constexpr, this wrapping is done at compile time.