Egendefinert Liste Nummer Styling

0
26

Hva med en klassisk CSS lure! Dette er ikke engang så vanskelig lenger, siden CSS counter-tilvekst og counter-reset og slike som er perfekt for dette. Jeg ville bare sørg for at du vet hvordan det fungerer, og hadde noen lett-å-kopi eksempler på klar.

La oss si at alt du ønsker å gjøre er stil dang tall:

Se Penn Egendefinert Liste Stil 2 av Chris Coyier (@chriscoyier) på CodePen.

Her er et eksempel fra CodePen Utfordringer sider:

Se Penn Egendefinert Liste Tellere ved Chris Coyier (@chriscoyier) på CodePen.

Den keyframers laget en Penn, den andre dagen som brukes ganske kule stiler. Her er en redux:

Se Penn Egendefinert Liste Stil 3 av Chris Coyier (@chriscoyier) på CodePen.

Oppskrift nettsteder er gode steder å se etter en egendefinert liste stiler, som lister over fremgangsmåten er slik en prevelant funksjonen. På Matten Marquis’ nettsted, han har noen morsomme seg. Jeg rev av hans CSS og flyttet den ut her:

Se Penn Wilto Tellere ved Chris Coyier (@chriscoyier) på CodePen.

Sørg for å sjekke ut den morsomme lille media query endre. Lea Verou mat nettstedet, selvfølgelig, har counter-basert nummerering som godt.

Her er en interessant demo fra Jonathan Snook som har en “tidslinje” se og bruker egne tellere for å merke hvert enkelt punkt:

Se Penn Tidslinjen CSS med Tellere av Jonathan Snook (@snookca) på CodePen.

Mer Informasjon

  • Regner Med CSS-Tellere og CSS Rutenett
  • Nummerering I Stil
  • Morsomme Tider med CSS Tellere
  • Stil Listen Markører i CSS
  • counter-tilvekst og counter-reset i Almanakken, og den teoretiske ::markør
  • Automatisk Nummerering Med CSS Tellere
  • Bestilte Lister med Unicode Symboler