CSS properties that solve annoying problems - YouTube

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;}



✍ Écrire un commentaire

les commentaires relevant du SPAM seront filtrés et dégagés direct...

Quelle est le sixième caractère du mot 61jaqhm ?