Hi Guys,
I am not sure why you would do it other than to get user attention on specific part of your HTML page. I found those little animated borders annoying anyway but they do work to get attention of your website visitor.
This post talk about it. We will be looking at a selection animation using GIFs added as borders to your DIVs
First of all much thanks to Mathew James for being such an inspiration and providing free GIF files needed for this effect. Anyway lets get back to the point and start doing some real work
The Markup
1 2 3 4 5 |
<div class="outer"> <div class="inner"> </div> </div> <hr style="margin-bottom:20px"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> </em></em></em> |
1 2 3 4 |
<em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em id="__mceDel"> <div class="outer-blackwhite"> <div class="inner bgblue"> <em id="__mceDel"> </div> <em id="__mceDel"><em id="__mceDel"> </div></em></em></em></em></em></em></em></em></em> |
No rocket science understanding the above HTML. its simple and straight forward.
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
div.outer,div.outer-blackwhite { background-repeat: repeat; background-image: url(data:image/gif;base64,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); width:100px; height: 100px; padding:1px; } div.outer-blackwhite { background-image: url(data:image/gif;base64,R0lGODlhCAAIAJAAAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQECgD/ACwAAAAACAAIAAACD4SDYZB6udpiaMJYsXuoAAAh+QQECgD/ACwAAAAACAAIAAACDYQRGadrzVRMB9FZ5SwAIfkEBAoA/wAsAAAAAAgACAAAAg8MDqGYaudeW9ChyOyltQAAIfkEBAoA/wAsAAAAAAgACAAAAg9MgGCXm+rQYtC0WGl9oQAAIfkEBAoA/wAsAAAAAAgACAAAAg+MgWCRernaYmjCWLF7qAAAIfkEBAoA/wAsAAAAAAgACAAAAg2MAwmna81UTAfRWeUsACH5BAQKAP8ALAAAAAAIAAgAAAIPRB6gmGrnXlvQocjspbUAACH5BAQKAP8ALAAAAAAIAAgAAAIPBIJhl5vq0GLQtFhpfaAAADs=); background-repeat: repeat; } div.inner { background: #0480be; color: #000; width: 100%; height: 100%; box-sizing: border-box; } div.bgblue { background: #49afcd } |
Result
Demo can also be reached from this URL
Demo on separate page
http://jaspreetchahal.org/examples/css-examples/anim-border/css-border-animated.html
Download
Background Image used is given below for you to download
I hope this helps
Cheers
Leave a Reply