DEV Community

gaganjot singh
gaganjot singh

Posted on

7 3

BEST CSS BORDER STYLE

check out More Example

GSCODE

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up