The Complex But Awesome CSS border-image Property
▻https://www.smashingmagazine.com/2024/01/css-border-image-property
Did you know border-image property was such a powerful — and flexible — CSS property? Despite the challenge it takes to understand the syntax, there are ways to keep the code clean and simple. Plus, there is often more than one “right” way to get the same result. It’s a complicated and robust CSS feature.
via la-grange.net
plein de trucs sympa, merci !
Very complex indeed ^^
Mais des trucs bien sympas cf :
Our first experiment is to add a gradient overlay above an existing background. This is a fairly common pattern to improve the legibility of text by increasing the contrast between the text color and the background color.
.overlay {
border-image: fill 0 linear-gradient(#0003,#000);
} Our next example is a common design pattern where we want the background of an element to extend to the screen’s full width. We often refer to this as a “break-out” background because the element typically needs to break outside the constrained width of its parent container in order to stretch across the full screen.
.full-background {
border-image: conic-gradient(pink 0 0) fill 0//0 100vw;
}Pour référence, c’est la personne qui partage ses tips sur ▻https://seenthis.net/messages/1001462
