#CSS #Pattern : Fancy #backgrounds with CSS #gradients
▻https://css-pattern.com
The biggest collection of background Patterns
Explore 144 CSS-only patterns made with CSS gradients and optimized with CSS variables.
You can also surprise yourself with a random CSS Pattern! ▻https://random.css-pattern.com
Toujours par l’auteur de ►https://css-tip.com dont on causait ici ►https://seenthis.net/messages/1001462
Il faut pas oublier la version animée : ▻https://animated.css-pattern.com
Ça pourrait servir à faire des fonds d’écran de connexion aussi :)
On pourrait possiblement aussi imaginer une saisie qui reprendrait tous les types et qui permettrait de les configurer, et ça donnerait une config à utiliser pour un thème ou un écran.
The Ultimate CSS Shapes Collection
▻https://css-shape.com
The Ultimate Collection of CSS-only Shapes
Pure #CSS #shapes made with a single-element, modern CSS and an optimized code. All the shapes are here, look no further!
Par l’auteur de ►https://css-tip.com dont on causait ici ►https://seenthis.net/messages/1001462
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
