Skip to main content

 

👋 Hey there Docebo Community, and happy Friday!

 

Check out this awesome post on Medium:

 

🔗 Fantastic CSS border animation

 

This post popped up in my inbox today and I found it extremely interesting. I’m not quite savvy enough with CSS to understand everything this article covers in detail, but we have some experts in this community (I’m looking at you @gstager @Bfarkas @nick.tosto) who I’m sure could do some pretty awesome things in their platforms with some of the code shared in the post.

 

Here’s a snippet I found to be really cool:

 

Border length changes

 

 

div {
    position: relative;
    border: 1px solid #03A9F3;

    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }

    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }

    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }

    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}

 

You can check out some of the original author’s other templates here on CodePen.

Great article and adding interactive borders is a great upgrade to normal links around the platform to really make it a ‘call to action’!

Thanks, @Adam Ballhaussen 

I am guessing it would take some modifications to get this working in Docebo.

Particularly the use of  ::before  and  ::after  as I discovered with my use of those and the accordion. It was very subtle but once I finally saw it and realized where it was coming from, I had to make an update.

At any rate - looks like I have something to play with for a little bit.

@Adam Ballhaussen 

I managed to get this idea working in a Docebo widget.
I drug out the animation a bit.

I am going to tweak it a little more - make it a bit different - comment the peaches out of it, and do a write up for the community.

Thanks for the idea!

 

 

@gstager ^ all I can say

@Adam Ballhaussen

I managed to get this idea working in a Docebo widget.
I drug out the animation a bit.

I am going to tweak it a little more - make it a bit different - comment the peaches out of it, and do a write up for the community.

What I find amusing? Is I will go play with it for a bit had an 8-minute turn around.

@dklinger - LOL

I suppose I can make you wait until next week for the write up… 😆

Reply


Terms & ConditionsCookie settings