Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Animated Borders
Everyone knows the border you put around HTML elements using CSS are static, right? I mean, you do know you can’t put a CSS border around an element and have it be animated, don’t you?If you could put an animated border around an element, it would really call attention to it. For example, on a sales page, you could bring attention to your benefits list or guarantee just by having an animated border around it.
Of course, we all know borders can’t be animated…
Made you look! This guaranteed attention-getter should only be used when you want to be darn sure your visitors read the contained message. Overuse will likely render the device ineffective and annoying . . . and it may cause embarrassing foot odor.
I’m guessing if a border could be animated, it would look something like the one around the guaranteed attention-getter over yonder.
Of course, we all know that’s not possi … well hey, how about that, it looks like a border can be animated after all!
But looks can be deceiving, my friend! That is NOT an animated border you see, it’s a division element with an animated background image and two pixels of padding. Inside that is another division with a white background and the text, so all you see of the animated background from the first division is the two pixels at the edge because of the padding.
Padding is transparent, so the animated background shows through. Tricky, eh!
Here’s the HTML with the CSS added inline:
<div style="float: right;
padding: 2px;
max-width: 290px;
margin: 0 0 12px 12px;
background-image: url('images/scroll.gif');">
<div style="background-color: #fff;
padding: 12px;
font-size: 1.3vw;">
<span style="display: block;
font-weight: bold;
text-align: center;
font-size: 1.4vw;">Guaranteed Attention-Getter</span>
<br>Made you look text message...
</div>
</div>
Tricky, but also very simple. It has to be for me to come up with it, after all, I'm no rocket surgeon.
Below are several animated images I made or found in the public domain. Of course, you could also make your own if you know how. It’s kind of fun to play around with them and see how they turn out when used like this. If you do, experiment with different sized backgrounds as well as the colors and motion speed and direction.
The 20 examples below include the background number and width of the padding. After the examples you'll find the backgrounds so you can download the one(s) you want.
The Examples
padding: 2px
padding: 3px
padding: 2px
padding: 3px
padding: 2px
padding: 1px
padding: 2px
padding: 3px
padding: 2px
padding: 3px
padding: 2px
padding: 3px
padding: 4px
padding: 2px
padding: 3px
padding: 3px
padding: 4px
padding: 2px
padding: 3px
padding: 2px
The Backgrounds
Background #1
Background #2
Background #3
Background #4
Background #5
Background #6
Background #7
Background #8
Background #9
Background #10
Background #11
Background #12
Background #13
Background #14
Background #15
Background #16
Background #17
Background #18
Background #19
Background #20
Background #1
Background #2
Background #3
Background #4
Background #5
Background #6
Background #7
Background #8
Background #9
Background #10
Background #11
Background #12
Background #13
Background #14
Background #15
Background #16
Background #17
Background #18
Background #19
Background #20
