Animated Linear Gradient Border Primer Tutorial
Over a few days now at this blog, we’ve been trialling a CSS styling idea for when we use HTML iframe elements to allow the reader to try a web application as they read the blog posting content. This CSS styling, we hope, brings attention to this, as a blog post feature they should pay attention to.
As such …
- we wanted something colourful …
- we wanted something impactive …
- we wanted something animated
… and so we looked up animated linear gradient border and lobbed onto this favoured excellent link (thanks) and onto some CSS styling code that worked for us, and that we are going to embellish the “code” element (via <code class=”container demo animated”> … </code> HTML, or, in the case of iframe styling <div class=”container demo animated”><iframe></iframe></div> HTML) with, below, and placed into (good ol’) WordPress Twenty Ten theme’s header.php …
<style>
/* Thanks to https://codepen.io/bibby0912/pen/mErWyA for basis of idea below ...
applied at //www.rjmprogramming.com.au/ITblog/marquee-placeholder-primer-tutorial/ */
.container {
height: 100%;
width: 100%;
border: 8px solid transparent;
box-sizing: border-box;
padding: 1rem;
overflow: visible;
display:flex;
}
.demo {
background-image:
linear-gradient(white, white),
linear-gradient(270deg, #00D7B9, #B95DD7 50%, #FFB367 100%);
background-repeat: no-repeat;
background-origin: padding-box, border-box;
}
.animated {
background-image:
linear-gradient(white, white),
linear-gradient(180deg, green, lightblue 50%, yellow);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 200%;
background-position: 0 0, 0 100%;
background-origin: padding-box, border-box;
animation: highlight 1s infinite alternate;
}
@keyframes highlight {
100% {
background-position: 0 0, 0 0;
}
}
</style>
We hope it grabbed your attention!
If this was interesting you may be interested in this too.
