Aangepaste Lijst Aantal Styling

0
31

Wat dacht u van een klassieke CSS truc! Dit is zelfs niet zo moeilijk meer, sinds CSS heeft counter-increment en teller-reset en dergelijke, dat is perfect voor dit. Ik wilde alleen maar zorg ervoor dat je wist hoe het werkt en had een aantal eenvoudig te kopiëren voorbeelden bij de hand.

Laten we zeggen dat alles wat je wilt doen is de stijl van de dang nummers:

Zie de Pen Aangepaste Lijst Stijl 2 door Chris Coyier (@chriscoyier) op CodePen.

Hier is een voorbeeld van de CodePen Uitdagingen pagina ‘ s:

Zie de Pen Aangepaste Lijst met items door Chris Coyier (@chriscoyier) op CodePen.

De keyframers gemaakt van een Pen op de andere dag dat gebruikt wordt vrij koele stijlen. Hier is een redux:

Zie de Pen Aangepaste Lijst Stijl 3 van Chris Coyier (@chriscoyier) op CodePen.

Recept sites zijn de beste plaatsen om te zoeken naar aangepaste lijst stijlen, zoals lijsten van de stappen zijn een prevelant functie. Op Mat Marquis’ – site, hij heeft een paar leuke exemplaren. Ik opgelicht zijn CSS en verhuisde het hier:

Zie de Pen Wilto Tellers van Chris Coyier (@chriscoyier) op CodePen.

Zorg ervoor om te controleren de leuke kleine media query wijzigen. Lea Verou het voedsel van de site, natuurlijk, is counter-based nummering.

Hier is een interessante demo van Jonathan Snook dat een “tijdlijn” look en maakt gebruik van aangepaste items een label voor elke sectie:

Zie de Pen Tijdlijn CSS met Tellers door Jonathan Snook (@snookca) op CodePen.

Meer Informatie

  • Tellen Met CSS Tellers en CSS Grid
  • De Nummering In Stijl
  • Leuke Tijden met CSS Tellers
  • Lijst stijl Markers in CSS
  • counter-increment en teller-reset in de Almanak, en de theoretische ::marker
  • Automatische Nummering Met CSS Tellers
  • Geordende lijst met Unicode-Symbolen