5 einfaldir og hagnýtir CSS listastílar sem þú getur afritað og límt

 5 einfaldir og hagnýtir CSS listastílar sem þú getur afritað og límt

John Morrison

5 einfaldir og hagnýtir CSS listastílar sem þú getur afritað og límt

Hver elskar ekki góðan lista? Við notum þau stöðugt í álagningu okkar fyrir margvíslegar aðstæður. Í dag ætlum við að skoða nokkur einföld og hagnýt dæmi sem þú getur stolið og notað í þínu eigin verki.

Við byrjum á skemmtilegum lóðréttum lista, stillum svo upp lista með smámyndum. og texti, annar með bara myndum og að lokum röðuðum lista þar sem tölurnar eru öðruvísi stílaðar en restin af gerðinni. Það er fullt af frábærum hlutum sem hægt er að læra hér svo við skulum hoppa í!

Kanna Envato Elements

HelvetiList

Fyrir fyrsta listann okkar ætlum við að byrja á einföldum , lágmarks en frábær aðlaðandi hönnun sem er mjög háð fegurð leturfræðinnar. Við munum nota nokkra þunna Helvetica stíla og henda inn sléttri hreyfimynd á sveimi.

Demo: Skoðaðu kynninguna og kóðann á CodePen.

HTML

Markmið okkar hér er frekar einfalt. Búðu til deild (þú vilt líklega flokk eða auðkenni í lifandi verkefni), hentu síðan inn haus og óraðaðan lista með fimm listaatriðum.

1 2 3 4 5 6 7 8 9 10

HelvetiList

  • Zurich
  • Genf
  • Winterthur
  • Lausanne
  • Lucerne

CSS

Eins og við sáum í skjáskot hér að ofan, listaatriðin nota mjög þunna gerð, fíngerða skil og sveimaástand sem stækkar leturgerðina. Til að byrja, gefðu divinu breidd og stilltu almenna h2 stíla þína.

Næst skaltu nota listastíl-gerð af engum til að sleppa byssukúlunum og endurstilla allar spássíur eða fyllingu sem kunna að vera til staðar. Fyrir raunverulegu listaatriðin notaði ég örlítinn neðri ramma, sem gefur þessi litla skil. Ég notaði síðasta barnsvalið, en það er í raun ekkert mál ef það er vafri sem þekkir það ekki og ákveður að setja auka ramma neðst.

Taktu líka eftir því að í bæði skiptin sem ég stillti leturgerðina notaði ég CSS stuttmynd og notaði mismunandi þyngd. Til að klára, notaði ég nokkra tengistíla og stillti umskiptin til að stækka leturgerðina og breyta bakgrunnslitnum á sveimi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 40 31 3 3 3 3 39 40 41 42 div { width: 200px; } h2 { leturgerð: 400 40px / 1.5 Helvetica, Verdana, sans-serif; spássía: 0; fylling: 0; } ul {listi-stíll-gerð: enginn; spássía: 0; fylling: 0; } li { leturgerð : 200 20px / 1.5 Helvetica , Verdana , sans - serif ; landamæri - botn : 1px solid #ccc; } li: síðasta barn { landamæri: enginn; } li a { textaskreyting : enginn ; litur : #000; sýna: blokk; breidd: 200px; - webkit - umskipti : leturstærð 0.3s auðveld , bakgrunnslitur 0.3s auðveld ; - moz - umskipti: leturstærð 0.3s auðveld, bakgrunnur - litur 0.3svellíðan ; -o-umskipti: leturstærð 0,3s auðveld, bakgrunnslitur 0,3s auðveldur; -ms-umskipti: leturstærð 0.3s auðveld, bakgrunnslitur 0.3s auðveldur; umskipti: leturstærð 0.3s auðveld, bakgrunnslitur 0.3s auðveldur; } li a: hover { leturstærð: 30px; bakgrunnur: #f6f6f6; }

Smámyndalisti

Eitt mjög algengt snið sem þú munt sjá fyrir lista er grunnuppsetningin þín á "smámynd og texta", sem er frábær leið til að bæta við nokkrum ágætur sjónrænn áhugi á annars leiðinlegum málsgreinalista.

Þetta er afar fjölhæfur listastíll sem þú getur notað í hvaða fjölda verkefna sem er. Við skulum sjá hvernig það virkar.

Demo: Skoðaðu kynninguna og kóðann á CodePen.

HTML

HTML á þessum er aðeins flóknara. Hvert listaatriði þarf að hafa þrjú börn: mynd, fyrirsögn og málsgrein. Myndirnar sem ég nota eru 100px x 100px svo hafðu það í huga ef þú vilt aðlaga þetta í aðra stærð. Á heildina litið er þetta allt samt mjög einföld álagning sem ætti ekki að svíkja þig að minnsta kosti.

Sjá einnig: 40+ Hreinn & amp; Lágmarks áfangasíðusniðmát (ókeypis og atvinnumaður)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
  • Fyrirsögn

    Lorem ipsum dolor sit amet . . .

  • Fyrirsögn

    Lorem ipsum dolor sit amet . . .

  • Fyrirsögn

    Lorem ipsum dolor sit amet . . .

  • Fyrirsögn

    Lorem ipsum dolor sit amet . . .

CSS

Þessi furðu þarf ekki of mikinn kóða til að ná í. Enn og aftur erum við að hreinsa listastílana okkar og stilla CSS sem tengist leturfræði. Það sem þú þarft að skilja er að þú þarft að láta myndirnar þínar fljóta til vinstri svo að málsgreinarnar birtist við hliðina á þeim.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 * { spássía : 0 ; fylling: 0; } div { spássía: 20px; } ul {listi-stíll-gerð: enginn; breidd: 500px; } h3 { leturgerð: feitletrað 20px / 1.5 Helvetica, Verdana, sans-serif; } li img { fljóta : vinstri ; spássía: 0 15px 0 0; } li p { leturgerð : 200 12px / 1.5 Georgia , Times New Roman , serif ; } li { padding: 10px; flæða: sjálfvirkt; } li : hover { bakgrunnur : #eee; bendill: bendill; }

Staðlað smámyndarnet

Ef við erum að tala um óraðaða lista, ættum við að henda inn að minnsta kosti einu myndaneti, sem er nánast alltaf meðhöndlað með listum. Við munum ekki gera neitt of flott, það mun bara vera gagnlegt fyrir þig að hafa eyðublað af þessum kóða við höndina til að setja inn fljótt.

Demo: Skoðaðu kynninguna og kóðann á CodePen.

HTML

Markup fyrir hefur grunnbygginguna list-item>anchor>image . Ef þú ert ekki vanur að sjá þennan kóða gæti það virst frekar skrítið að nota lista fyrir þetta, en í raun er það nákvæmlega það sem þú ert að búa til: astór listi af myndum. Sú staðreynd að þeim er raðað í rist dregur ekki úr hugmyndinni um að þetta sé bara stór „ol listi“ í hjartanu.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

CSS

Fyrir þetta dæmi er grunnuppbyggingin sú að þú kastar nokkrum spássíur á hvert listaatriði þitt og flýtir þeim til vinstri. Ég notaði „overflow:auto“ bragðið til að hreinsa flotið, setti upp dökkan bakgrunn og henti ramma á myndirnar.

Til að gera kynninguna örlítið áhugavert bætti ég við sveimaáhrifum sem setur ljóma hægt og rólega á. Þetta er auðvitað algjörlega valfrjálst og er ekki eitthvað sem þú myndir nota í hverju verkefni.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 420 31 3 3 * { spássía: 0; fylling: 0; } líkami { bakgrunnur: #333; } div { breidd: 900px; spássía: 0 sjálfvirkt; flæða: sjálfvirkt; } ul {listi-stíll-gerð: enginn; } li img { fljóta : vinstri ; spássía: 10px; landamæri: 5px solid #fff; - webkit - umskipti: kassi - skuggi 0.5s vellíðan; - moz - umskipti : kassi - skuggi 0.5s vellíðan ; - o - umskipti : kassi - skuggi 0,5s vellíðan ; -ms - umskipti: kassi - skuggi 0,5s vellíðan; umskipti: kassi-skuggi 0,5s vellíðan; } li img: hover { - webkit - box - shadow : 0px 0px 7px rgba ( 255, 255 , 255 , 0,9 ) ; box-shadow: 0px 0px 7px rgba (255, 255, 255, 0.9); }

Lárétt valmynd

Annað sem forritarar nota lista fyrir eru láréttir flakkvalmyndir. Sem nýr þróunaraðili var kóðinn fyrir þetta bragð eitthvað sem ég gúglaði stöðugt svo vertu viss um að bókamerkja hann eða henda honum inn í bútasparnaðinn þinn.

Demo: Skoðaðu kynninguna og kóðann á CodePen.

HTML

Með smámyndatöflunni hér að ofan höfum við þegar lært hvernig á að fljóta listi hluti þannig að þeir birtast við hliðina á hvort öðru svo hér munum við nota sömu tækni, aðeins með færri hlutum. Taktu eftir því að ég hef sett inn „virkan“ bekk, sem er nokkuð hefðbundin venja sem við munum nota til að segja notandanum á hvaða síðu hann er núna.

1 2 3 4 5 6 7 8
  • Heim
  • Um
  • Portfolio
  • Tengiliður

CSS

Hér létum við listaatriðin okkar fljóta til vinstri, settum ramma aðeins hægra megin, fjarlægðum sjálfgefna tenglastíla og settum upp minn eigin og stíluðum svo báða sveima og virk ríki.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 40 31 3 3 3 3 39 40 41 42 43 44 45 46 47 * { spássía: 0; fylling: 0; } nav { spássía: 50px; } ul { flæða : sjálfvirkt ; list-style-type: enginn; } li { hæð: 25px; fljóta : vinstri ; spássía - hægri: 0px; landamæri -hægri: 1px solid #aaa; fylling: 0 20px; } li : síðasta barn { landamæri - hægri : enginn ; } li a { textaskreyting : enginn ; litur: #ccc; leturgerð: 25px / 1 Helvetica, Verdana, sans-serif; texti - umbreyta : hástafi ; - webkit - umskipti: öll 0.5s vellíðan; - moz - umskipti: öll 0.5s vellíðan; -o - umskipti: öll 0,5s vellíðan; -ms - umskipti: öll 0.5s vellíðan; umskipti: öll 0.5s vellíðan; } li a : hover { litur : #666; } li. virkur a {letur-þyngd: feitletrað; litur : #333; }

Big Numbers Ordered Listi

Við skulum ekki gleyma því að allir listar eru ekki óraðaðir listar! Það er örugglega fullt af gagnlegum forritum fyrir pantaða lista. Einn mjög erfiður hlutur að gera með raðaða lista er að stíla tölurnar öðruvísi en hinn textinn. Við skulum sjá hvernig þetta virkar.

Demo: Skoðaðu kynninguna og kóðann á CodePen.

HTML

Nú, hvernig ég byggði þetta verður ofboðslega umdeilt. Eins og þú sérð er ég í raun að setja inn tölurnar handvirkt þrátt fyrir að HTML geri þetta í raun sjálfkrafa fyrir þig. Það er samt góð ástæða fyrir þessu.

Til að koma þessari hugmynd af stað henti ég málsgrein í listaatriðin og kóðaði síðan li tegundina og li>p tegundina á mismunandi vegu. Það var hins vegar algjör martröð að reyna að koma öllu í lag með þessari aðferð. Á endanum, til að laga það, var CSS svo sóðalegt og viðbjóðslegt að ég hætti við það alvegí þágu þessarar einfaldari aðferð sem gerir í raun kleift að gera skýran, einfaldan CSS.

1 2 3 4 5 6 7
  1. 1.

    Lorem ipsum dolor sit amet , consectetur adipiscing elit . Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur . Fusce nec leo ut massa viverra venenatis . Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

  2. 2.

    Lorem ipsum dolor sit amet , consectetur adipiscing elit . Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur .

  3. 3.

    Lorem ipsum dolor sit amet , consectetur adipiscing elit . Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur .

    Sjá einnig: 30+ kaffipoka sniðmát (ókeypis og úrvals)

CSS

Eins og þú sérð í kóðanum hér að neðan, það sem ég gerði hér var að sleppa sjálfgefnum tölum og stilla síðan nær yfir í algert svo ég gæti ýtt þeim yfir til vinstri við málsgreinarnar, sem aftur krafðist auka fyllingu ámálsgreinar. Það er kannski ekki fallegasta lausnin í kóðanum, en það er stuttasta og einfaldasta leiðin sem ég gæti fundið upp til að gera það án furðulegra staðsetningargalla.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 div { breidd: 500p; spássía : 10px } ol { litur : #ccc; list-style-type: enginn; } ol li { staða : ættingi ; leturgerð: feitletrað skáletrað 45px/1.5 Helvetica, Verdana, sans-serif; spássía - botn: 20px; } li p { leturgerð : 12px / 1.5 Helvetica , sans - serif ; fylling - vinstri: 60px; litur : #555; } span { staðsetning: alger; }

Niðurstaða

Þarna hefurðu það, fimm ofureinfaldir en dauðir hagnýtir listastílar sem þú getur afritað og límt inn í þinn eigin kóða. Ef þú hefur einhverjar aðrar skapandi listahugmyndir sem þú vilt deila, láttu okkur vita í athugasemdunum hér að neðan!

John Morrison

John Morrison er vanur hönnuður og afkastamikill rithöfundur með margra ára reynslu í hönnunariðnaðinum. Með ástríðu fyrir að deila þekkingu og læra af öðrum hefur John skapað sér orðspor sem einn af fremstu hönnunarbloggurum í bransanum. Hann eyðir dögum sínum í að rannsaka, gera tilraunir og skrifa um nýjustu hönnunarstrauma, tækni og verkfæri, með það að markmiði að hvetja og fræða aðra hönnuði. Þegar hann er ekki týndur í heimi hönnunarinnar nýtur John þess að ganga, lesa og eyða tíma með fjölskyldu sinni.