
Je me note quelques astuces intéressantes. Toutefois, une remarque en passant... ARRÊTEZ DE FAIRE DES VIDÉOS DE PROGRAMMATION... à quoi ça rime ? on ne peut pas faire de copier coller, pas de récup auto de snippets, pas de tests... à part faire grimper votre popularité sur les raizosocio... pfff.
Oui, je sais qu'en description il a mis les snippets : mais il pouvait les inclures dans une page de blog, non ? Ou alors plus personne ne sait lire à part moi et on ne m'a rien dit ?!
un effet glow ou une ombre qui suit le background de la div.
L'astuce consiste à utiliser des pseudo éléments héritant du background de la div et à les blur.
.gradient-shadow {
background: linear-gradient(
45deg,
hsl(var(--clr-orange)),
hsl(var(--clr-blue))
);
position: relative;
isolation: isolate;
}
.gradient-shadow::before,
.gradient-shadow::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: inherit;
/* border: 10px dotted white; */
}
.gradient-shadow::before {
filter: blur(0.75em);
}
.gradient-shadow::after {
opacity: 0.5;
filter: blur(2em);
}
Faire en sorte que la répartition du texte sur plusieurs lignes soit meilleure
En gros, le navigateur essaie de couper le texte de façon plus homogène
// pour les titres (peu de lignes)
h1{ text-wrap: balance;}
// pour les paragraphes etc (beaucoup de lignes): pas d'orphelin sur la dernière ligne
p{text-wrap:pretty;}
► Commentaires

