The CSS border-image property is a kind of options we take without any consideration. And it’s not new in any respect! Actually, Andy Clarke has a reasonably current article that “revisits” the property and reveals simply how artistic we will get with it. Go learn that article — it’s value it.
The TL;DR is that we will use a picture or gradient as a border as an alternative of ordinary (ahem, boring) types, say, strong or dashed border strains. What I wish to do is take them a little bit additional to point out how we will animate border photos for much more fascinating person interfaces!
Like this:
Why border photos in any respect?
There’s a reasonably large caveat to frame photos: they don’t curve to frame shapes. That’s an enormous limitation for an animation that travels round a component like we’re doing right here. However we will work round that for this instance.
However that additionally begs the query: “Why work round that if there are different approaches?” Simply have a look at Temani Afif’s strategy that makes use of a CSS masks (he has a nice write-up on it):
I like border-image as a result of it’s tremendous environment friendly, particularly in the case of animating border photos and gradients. Primarily as a result of it’s simple to duplicate the designs throughout all of the borders — it’s automated — and likewise as a result of we will “slice” the pictures utilizing the border-image-slice property. It’s much like background-size and background-position the place a single slice of the picture can be utilized. Nonetheless the border picture slices can run throughout your entire borders, and animating it creates stunning results, as you’ll see.
The HTML
We’re doing nothing loopy right here. Only a div that incorporates a little bit of formatted textual content in it:
Bruce Wayne
What in regards to the picture? That’s arrange as a CSS background, so let’s soar proper in that.
Base types
We’re giving the .card set dimensions then dropping in a background picture on it:
.card {
width: 150px;
aspect-ratio: 0.69;
place: relative;
background: heart/90% no-repeat;
background-image: url("batman.jpg");
}Cool, cool. I’m additionally including a little bit styling to the textual content to verify it’s not proper on prime of the background:
The border picture
I’ll be utilizing a single-color CSS gradient as a result of (1) it’s a sort of background picture and (2) it’s a little bit simpler to show the animation.
I’ll additionally set all of the values of border-image individually in their very own longhand properties, so it’s clearer so that you can know which worth impacts the gradient during which means.
Let’s begin with the impact of a easy linear-gradient:
.card {
/* ... */
/* Creates a linear shade */
border-image-source: linear-gradient(-45deg, crimson 0%, clear 0%);
/* Controls how the gradient is carved */
border-image-slice: 1;
/* Units the bodily thickness of the border */
border-image-width: 5px;
}You’ll have seen within the demo that there’s a little hole between the animated border and the picture. We are able to push the border away from the .card utilizing the border-image-outset property:
.card {
/* ... */
border-image-source: linear-gradient(-45deg, crimson 0%, clear 0%);
border-image-slice: 1;
border-image-width: 5px;
/* Pushes the border away from the div */
border-image-outset: 5px;
}We’d like border-image-source and border-image-width to render the border. Initially, the picture supply — the gradient — is absolutely clear. As a result of each the crimson and clear colours are set to begin at 0%, the browser doesn’t have any area to mix the colours, and since clear comes second within the code, it will get the beginning place at 0% and fills the remainder of the gradient. We’re utilizing border-image-slice: 1 to create 1px slices of the gradient, which creates a easy fill of the gradient throughout the entire border.
Animating the border picture
There’s one thing else to recollect about gradients, particularly about animating them: we will’t by default. Transitioning (or interpolating) from one shade to a different is troublesome as a result of we’re basically transitioning the beginning and ending factors of a gradient, that are percentages.
That’s the place registering our personal customized property comes into play as a result of we will certainly animate CSS variables:
@property --p {
syntax: "";
initial-value: 0%;
inherits: false;
} And we will use that in our gradient:
.card {
/* ... */
border-image-source: linear-gradient(-45deg, crimson var(--p), clear 0%);
}Now let’s say that we wish --p to transition from its default worth of 0% to 100% when the .card is hovered:
.card {
/* ... */
border-image-source: linear-gradient(-45deg, crimson var(--p), clear 0%);
/* ... */
&:hover {
--p: 100%;
}
}This tells the browser that crimson ought to end its transition on the 100% mark (the very finish). The gradient will develop to be a strong crimson shade, just like the border is drawing itself:
Variations
We might have stopped with that final instance, however there’s a lot else we will do right here! We are able to change route, make it sooner or slower, cease in different positions, and even use various kinds of gradients. Significantly, it’s plenty of enjoyable.
Let’s strive utilizing a conic-gradient as an alternative of a linear one. We are able to animate the border-image-slice worth, and use border-image-repeat: spherical to tile the slices inside the borders. The spherical tiling tries to suit a complete variety of tiles within the border and if it couldn’t, the picture barely stretches or squeezes till the match happens.
.card {
/* Creates a pointy, increasing shade wheel utilizing the customized angle variable */
border-image-source: conic-gradient(from 0deg, crimson 0deg, clear 0%);
/* Repeats the sliced areas easily with out clipping */
border-image-repeat: spherical;
border-image-width: 5px;
border-image-slice: 1;
}We nonetheless have to register customized properties to maneuver the gradient round, this time to transition the border-image-slice worth (we’ll name it --n) and the conic-gradient’s angle (which we’ll name --a):
Notice: You can too animate border-image-slice instantly and never by way of a registered customized property. The end result will barely differ based mostly on how the browser handles these modifications.
/* Registers a customized property for the border-image-slice */
@property --n {
syntax: "";
initial-value: 1;
inherits: false;
}
/* Registers a customized property for the gradient angle */
@property --a {
syntax: "";
initial-value: 0deg;
inherits: false;
} Let’s drop these into our unique CSS:
.card {
border-image-source: conic-gradient(from var(--a), crimson var(--a), clear 0%);
border-image-width: 5px;
border-image-slice: var(--n);
border-image-repeat: spherical;
}…and inform the CSS precisely which properties we’re transitioning, which is sweet for efficiency:
.card {
border-image-source: conic-gradient(from var(--a), crimson var(--a), clear 0%);
border-image-width: 5px;
border-image-slice: var(--n);
border-image-repeat: spherical;
transition-property: --n, --a;
transition-duration: 0.6s;
}…after which make the properties transition on hover:
.card {
border-image-source: conic-gradient(from var(--a), crimson var(--a), clear 0%);
border-image-width: 5px;
border-image-slice: var(--n);
border-image-repeat: spherical;
transition-property: --n,--a;
transition-duration: 0.6s;
&:hover {
/* Will increase slicing depth to repeat/tile the border sample */
--n: 20;
/* Rotates the gradient full circle to attract the border in */
--a: 360deg;
}
}The slice worth (--n) is initially 1. It goes as much as 20 on hover. Meaning the slice will get larger (as much as 20px thick). You’ll discover this once you see the breaks within the borders.
Extra examples!
Like I mentioned earlier, there’s a lot we will do with animated border photos. We are able to animate a number of colours, use repeating gradients. Listed here are the examples I pulled collectively.
Your homework: choose these aside — and please let me know when you make another results! I’d like to see them.
