Astuces CSS

 (markodenic.com)
21 points par xguru 2021-04-28 | 2 commentaires | Partager sur WhatsApp

Recueil d’astuces qu’on ne voit pas souvent dans d’autres tutoriels

  • Effet de saisie (curseur clignotant)

  • Filtre drop-shadow()

  • scroll-behavior: smooth; défilement fluide

  • Centrer des éléments

  • Curseur image/emoji

  • Tronquer du texte

  • -webkit-line-clamp : couper le texte à un nombre de lignes donné

  • ::selection

  • resize: both; rendre tout redimensionnable

  • Créer une modal avec :target

  • calc()

  • Sélecteur :empty

  • Barre de défilement personnalisée

  • position: sticky;

  • CSS Scroll Snap

  • Tooltip dynamique avec attr()

  • Changer la couleur du curseur avec caret-color

  • :in-range, :out-of-range

  • Créer un titre à l’arrière-plan stylé avec background-clip

À lire aussi

2 commentaires

 
alstjr7375 2021-04-30

Je ne connaissais pas l’effet de frappe, mais c’est utile.
 
xguru 2021-04-28

Ces derniers temps, pour centrer on voit souvent 3 lignes dans les articles… mais apparemment on peut aussi le faire en 2 lignes comme ça.

.center {

display: grid;

place-items: center;

}