Animating CSS border-image | CSS-Tricks
The CSS border-image property is one of those features we take for granted. And it’s not new at all! In fact, Andy Clarke has a fairly recent article that “revisits” the property and shows just how creative we can get with it. Go read that article — it’s worth it.
The TL;DR is that we can use an image or gradient as a border instead of standard (ahem, boring) styles, say, solid or dashed border lines. What I want to do is take them a little further to show how we can animate border images for even more interesting user interfaces!
There’s a pretty big caveat to border images: they don’t curve to border shapes. That’s a big limitation for an animation that travels around an element like we’re doing here. But we can work around that for this example.
But that also begs the question: “Why work around that if there are other approaches?” Just look at Temani Afif’s approach that uses a CSS mask (he has a great write-up on it):
I like border-image because it’s super efficient, especially when it comes to animating border images and gradients. Mainly because it’s easy to replicate the designs across all the borders — it’s automatic — and also because we can “slice” the images using the border-image-slice property. It’s similar to background-size and background-position where a single slice of the image can be used. However the border image slices can run across the entire borders, and animating it creates beautiful effects, as you’ll see.
We’re doing nothing crazy here. Just a div that contains a bit of formatted text in it:
<div class=card><strong>Bruce Wayne</strong></div>
What about the image? That’s set up as a CSS background, so let’s jump right in that.
We’re giving the .card set dimensions then dropping in a background image on it:
background: center/90% no-repeat;
background-image: url("batman.jpg");
}
Cool, cool. I’m also adding a little styling to the text to make sure it’s not right on top of the background:
The TL;DR is that we can use an image or gradient as a border instead of standard (ahem, boring) styles, say, solid or dashed border lines. What I want to do is take them a little further to show how we can animate border images for even more interesting user interfaces!
There’s a pretty big caveat to border images: they don’t curve to border shapes. That’s a big limitation for an animation that travels around an element like we’re doing here. But we can work around that for this example.
But that also begs the question: “Why work around that if there are other approaches?” Just look at Temani Afif’s approach that uses a CSS mask (he has a great write-up on it):
I like border-image because it’s super efficient, especially when it comes to animating border images and gradients. Mainly because it’s easy to replicate the designs across all the borders — it’s automatic — and also because we can “slice” the images using the border-image-slice property. It’s similar to background-size and background-position where a single slice of the image can be used. However the border image slices can run across the entire borders, and animating it creates beautiful effects, as you’ll see.
We’re doing nothing crazy here. Just a div that contains a bit of formatted text in it:
<div class=card><strong>Bruce Wayne</strong></div>
What about the image? That’s set up as a CSS background, so let’s jump right in that.
We’re giving the .card set dimensions then dropping in a background image on it:
background: center/90% no-repeat;
background-image: url("batman.jpg");
}
Cool, cool. I’m also adding a little styling to the text to make sure it’s not right on top of the background:
Kategori:
Go ve Rust
Bu konuyu EL11.Net forumunda tartışmak ister misiniz?
Forumda Gör
