Animated Border

  • 8 August 2022
  • 4 replies
  • 92 views

Userlevel 7
Badge +6

This is the promised write-up based on the following post. @dklinger @Adam Ballhaussen 

Here is the look based on some additional tweaking. I chose to thicken the border and added my previous barrel text into the div. I also chose to change the color of the barrel text on hover with the border animation.

As expected, there was some tweaking to be done in order to make this work in Docebo. 

For starters, Docebo did not like the use of the ampersands  &:hover::before, &:hover::after  and I have found that sometimes it will choke on the code when declaring multiple selectors so I separated them and typed it all out.

The other main modification I made is the creation of the magicBorder class. I did this so that I could isolate this particular div and not have magic borders all over my platform. Here is how the CSS looked in the end.

/** Test Border Magic **/

div.magicBorder {
position: relative;
width: 90%;
height:90%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
border: 2px solid #ff0000;
}

div.magicBorder::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
}

div.magicBorder::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
}

div.magicBorder::before {
top: -5px;
left: -5px;
border-top: 3px solid #ff0000;
border-left: 3px solid #ff0000;
}

div.magicBorder::after {
right: -5px;
bottom: -5px;
border-bottom: 3px solid #ff0000;
border-right: 3px solid #ff0000;
}

div.magicBorder:hover::before {
width: calc(100% + 7px);
height: calc(100% + 7px);
transition: .5s;
}

div.magicBorder:hover::after {
width: calc(100% + 7px);
height: calc(100% + 7px);
transition: .5s;
}

div.magicBorder:hover .barrelText h3 {
color:#ff0000;
transition: .5s;
}

/** End Test Border Magic **/

All you really have to do for the HTML is throw a div out there with the right class but I chose to put the barrel text animation inside so there is a little extra.

<div class="magicBorder">
<div id="barrel" class="flipSign">
<div id="barrelBox">
<h4>Learning is</h4>
<div class="barrelText">
<h3>
fun<br />
important<br />
invigorating<br />
uplifting<br />
life<br />
fun
</h3>
</div>
</div>
</div>
</div>

 


4 replies

Userlevel 7
Badge +4

👏👏👏👏👏

Thanks as always @gstager!

Userlevel 7
Badge +4

As always, nicely done sir!

Curious about your line: “sometimes it will choke on the code when declaring multiple selectors”. I have never run into this and HEAVILY use multiple selectors (make excel files that basically automatically combine and create all of the CSS blocks so I don’t have to manually update and such.) Were you ever able to see a commonality when this happened?

Userlevel 7
Badge +6

@Bfarkas - I will admit that the commonality is probably me.

I have used multiple selectors as well and have had it work just fine but other times it will refuse. I most likely went and fat-fingered something, didn’t notice, and got frustrated and just typed them up separate.

Userlevel 7
Badge +4

@Bfarkas - I will admit that the commonality is probably me.

I have used multiple selectors as well and have had it work just fine but other times it will refuse. I most likely went and fat-fingered something, didn’t notice, and got frustrated and just typed them up separate.

Ha! Appreciate the honesty Greg. Yeah, that is why when I start doing heavy CSS work for things like this, I tend to build out some tools either using Power Automate, SharePoint, or excel, where I can enter things like, here is a table of pages to apply things too, and then there is an output sheet that gives me everything built and copied correctly, super handy as person with fat fingers himself, plus lets updates be delegated to those without the specific knowledge, since they just need to add to existing tables. Well worth the 30 minutes or so it usually takes to write them. (concatenation is your friend :) )

Reply