CSS-Tipps

 (markodenic.com)
21 Punkte von xguru 2021-04-28 | 2 Kommentare | Auf WhatsApp teilen

Eine Sammlung von Tipps, die man in anderen Tutorials nicht oft sieht

  • Tipp-Effekt (blinkender Cursor)

  • drop-shadow();-Filter

  • scroll-behavior: smooth; für sanftes Scrollen

  • Zentriert ausrichten

  • Bild-/Emoji-Cursor

  • Text kürzen

  • -webkit-line-clamp: Text auf eine bestimmte Zeilenzahl begrenzen

  • ::selection

  • resize: both;: alles in der Größe anpassbar machen

  • Mit :target ein Modal erstellen

  • calc()

  • :empty-Selektor

  • Benutzerdefinierte Scrollbar

  • position: sticky;

  • CSS Scroll Snap

  • Dynamische Tooltips mit attr()

  • Cursorfarbe mit caret-color ändern

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

  • Mit background-clip Überschriften mit eindrucksvollem Hintergrundtext erstellen

Verwandte Beiträge

2 Kommentare

 
alstjr7375 2021-04-30

Den Tipp mit dem Tippeffekt kannte ich noch nicht, ist aber nützlich.
 
xguru 2021-04-28

Heutzutage sind es beim Zentrieren in Artikeln zwar meist drei Zeilen … aber offenbar geht es auch so in zwei Zeilen.

.center {

display: grid;

place-items: center;

}