5 enkla och praktiska CSS-liststilar du kan kopiera och klistra in

Vem älskar inte en bra lista? Vi använder dem ständigt i vår markering för en mängd olika situationer. Idag ska vi titta på några enkla och praktiska exempel som du kan stjäla och använda i ditt eget arbete.

Vi börjar med en rolig animerad vertikal lista, och sedan skapa en lista med miniatyrer och text, en annan med bara bilder och slutligen en ordnad lista där siffrorna är stylade annorlunda än resten av typen. Det finns massor av bra saker att lära sig här så låt oss hoppa in!

HelvetiList

För vår första lista kommer vi att börja med en enkel, minimal men super attraktiv design som är starkt beroende av typografiens skönhet. Vi kommer att använda vissa tunna Helvetica-stilar och kasta i en slät animering på svävaren.

demo: Kolla in demo och kod på CodePen.

html

Vår markering här är död enkel. Skapa en div (du kommer förmodligen vilja ha en klass eller ett ID i ett live-projekt), och sedan kasta i en rubrik och en orörd lista med fem listobjekt.

<h2>HelvetiList</h2> <ul> <li>zurich</li> <li>genever</li> <li>Winterthur</li> <li>Lausanne</li> <li>Lusern</li> </ul>

CSS

Som vi såg på skärmdumpen ovan använder listobjekten mycket tunn typ, subtila separatorer och ett svängtillstånd som förstorar teckensnittet. För att börja, ge div en bredd och sätt in dina generella h2-stilar.

Använd sedan en lista-stil-typ av ingen för att avmarkera kulorna och återställ eventuella marginaler eller vadderingar som kan vara närvarande. För de faktiska listobjekten tillämpade jag en liten bottengräns, som ger den lilla delaren. Jag använde den sista barnväljaren, men det är verkligen ingen sak om det finns en webbläsare som inte känner igen det och bestämmer sig för att kasta en extra kant längst ner.

Observera också att båda gånger jag ställde in teckensnittet, använde jag CSS stenografi och applicerade olika vikter. För att avsluta tillämpade jag några länkstilar och ställde övergången för att förstora teckensnittet och ändra bakgrundsfärgen på svävaren.

div {bredd: 200px; } h2 {font: 400 40px / 1.5 Helvetica, Verdana, sans-serif; marginal: 0; vaddering: 0; } ul {list-style-type: none; marginal: 0; vaddering: 0; } li {font: 200 20px / 1.5 Helvetica, Verdana, sans-serif; border-bottom: 1px solid #ccc; } li: sista barnet {gränsen: ingen; } li a {text-decoration: none; färg: # 000; display: block; bredd: 200px; -webkit-övergång: font-size 0.3s lätthet, bakgrundsfärger 0.3s lätthet; -moz-övergång: font-size 0.3s lätthet, bakgrundsfärger 0.3s lätthet; -o-övergång: font-size 0.3s lätthet, bakgrundsfärger 0.3s lätthet; -ms-övergång: font-size 0.3s lätthet, bakgrundsfärger 0.3s lätthet; övergång: font-size 0.3s lätthet, bakgrundsfärger 0.3s lätthet; } li a: sväva {font-size: 30px; bakgrund: # f6f6f6; }

Miniatyrlista

Ett riktigt vanligt format som du ser för listor är din grundläggande miniatyr och text? setup, vilket är ett bra sätt att lägga till lite snyggt visuellt intresse för en annars tråkig lista över stycken.

Det här är en extremt mångsidig liststil som du kan använda på ett antal projekt. Låt oss se hur det fungerar.

demo: Kolla in demo och kod på CodePen.

html

HTML på den här är lite mer komplicerad. Varje listobjekt behöver ha tre barn: en bild, en rubrik och ett stycke. Bilderna som jag använder är 100px med 100px så kom ihåg om du vill anpassa detta till en annan storlek. Sammantaget är detta fortfarande allt väldigt enkelt uppmärksamhet som inte borde ge dig det bästa.

<ul> <li> <img src="//lesptitesaffairesdemayl.be/img/images_1/5-simple-and-practical-css-list-styles-you-can-copy-and-paste_3.jpg"> <h3>html</h3> <p>Markeringen för har grundstrukturen för <em>list-item> ankare> image</em>. Om du inte brukar se den här koden kan det tyckas ganska konstigt att använda en lista för detta, men det är precis det du skapar: en stor lista med bilder. Det faktum att de är ordnade i ett nät inte negerar tanken att det är bara en stor "ol lista" på hjärta. </p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/5-simple-and-practical-css-list-styles-you-can-copy-and-paste_4.jpg"> <h3>html</h3> <p>Med miniatyrnätet ovan har vi redan lärt oss hur man flyter listobjekt så att de visas bredvid varandra så här använder vi samma teknik, bara med färre föremål. Lägg märke till att jag har kastat i en? Aktiv? klass, vilket är en ganska vanlig praxis som vi ska använda för att berätta för användaren vilken sida de är på.</p> <textarea wrap="soft" readonly=""> <ul> <li>Hem</li> <li>Handla om</li> <li>Portfölj</li> <li>Kontakta</li> </ul>

CSS

Här flyttade vi våra listobjekt till vänster, satte en gräns endast på höger sida, avlägsna standardlänkstilarna och konfigurera min egen, och sedan utformade både svängaren och aktiva tillstånd.

* {marginal: 0; vaddering: 0; } nav {margin: 50px; } ul {översvämning: auto; lista-stil-typ: none; } li {höjd: 25px; flyta till vänster; marginal-höger: 0px; gräns-höger: 1px solid #aaa; vaddering: 0 20px; } li: sista barnet {gränsen-höger: ingen; } li a {text-decoration: none; färg: #ccc; typsnitt: 25px / 1 Helvetica, Verdana, sans-serif; text-transform: stor bokstav; -webkit-övergång: alla 0.5 s enkelhet; -moz-övergång: alla 0.5 s enkelhet; -o-övergång: alla 0,5 s enkelhet; -ms-övergång: alla 0,5 s enkelhet; övergång: alla 0,5 s enkelhet; } li a: svävar {färg: # 666; } li.active a {font-weight: bold; färg: # 333; }

Stornummer beställd lista

Låt oss inte glömma att alla listor inte är oordnade listor! Det finns definitivt många användbara applikationer för beställda listor. En riktigt knepig sak att göra med beställda listor är att siffrorna är annorlunda än den andra texten. Låt oss se hur det här fungerar.

demo: Kolla in demo och kod på CodePen.

html

Nu, hur jag byggt detta kommer att bli super kontroversiell. Som du kan se lägger jag faktiskt manuellt in siffror trots att HTML faktiskt gör det automatiskt för dig. Det finns dock en bra anledning till detta.

För att starta den här tanken slängde jag en paragraf i listobjekten, sedan kodade li-typen och li> p-typen på olika sätt. Att försöka få allt att ställa upp ordentligt med denna metod var dock en total mardröm. I slutändan, för att fixa den CSS var så rörigt och otäck att jag övergav det helt för denna enklare metod som faktiskt möjliggör tydlig, enkel CSS.

<ol> <li>1.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Presentera ultraljuds ante, ac laoreet nulla vestibulum adipiscing. Namn är precis i augue auktor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Namn accumsan libero en elit aliquet quis ullamcorper arcu tincidunt. Presentera purpura turister, consectetur quis congue vel, pulvinar på lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li> <li>2.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Presentera ultraljuds ante, ac laoreet nulla vestibulum adipiscing. Namn är precis i augue auktor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li> <li>3.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Presentera ultraljuds ante, ac laoreet nulla vestibulum adipiscing. Namn är precis i augue auktor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li> </ol>

CSS

Som du kan se i koden nedan var det jag gjorde här, dugga standardnumren och ställde mina spänner till absolut så att jag kunde trycka dem över till vänster om punkterna, vilket i sin tur krävde lite extra vaddering på punkterna. Det kanske inte är den snyggaste lösningen kodvis, men det är det kortaste och mest enkla sättet att jag skulle kunna göra det utan att göra bizarra positioneringsfel.

div {width: 500px; marginal: 10px} ol {färg: #ccc; lista-stil-typ: none; } ol li {position: relativ; typsnitt: fet kursiv 45px / 1,5 Helvetica, Verdana, sans-serif; marginalbotten: 20px; } li p {font: 12px / 1.5 Helvetica, sans-serif; padding-left: 60px; färg: # 555; } span {position: absolute; }

Slutsats

Där har du det, fem super enkla men döda praktiska liststilar för att du ska kopiera och klistra in i din egen kod. Om du har några andra kreativa listidéer som du vill dela, meddela oss i kommentarerna nedan!