check out More Example

1. First in series of pens where I just want to make a library of useful tricks I have used for websites. In this one, the key trick is multiline underline with any color I want. This is shown using a random gradient so I could practice some more javascript.

2. Features:

1) Clip-path for image masking rectangle border (webkit only).

2) Blend-mode for this mask.

3) Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!

4) Cool credits side-menu (click small button in the center of demo).

5) Vanilla js with just < 200 lines of code (basically it's just adds/removes classes).

6) Reusable/configurable. I will add some comments to css/js code if I don't forget about it :D

P.S. - background-attachment: fixed does not working with transforms, so I tried to achieve completly static bg-image during mask movement with translateY, but bg-image was "jumpy", so right now bg-image simply goes up when mask rotates, which is ok for me.

3. Sass button border hover effect mixin

4. single element animation icon~

4. Animating border-radius

5. CSS-only border animation on hover. It needs a solid background in order to work.