5 egyszerű és praktikus CSS lista stílus, amit másolhat és beilleszthet

 5 egyszerű és praktikus CSS lista stílus, amit másolhat és beilleszthet

John Morrison

5 egyszerű és praktikus CSS lista stílus, amit másolhat és beilleszthet

Ki ne szeretné a jó listákat? Folyamatosan használjuk őket a jelöléseinkben a legkülönbözőbb helyzetekben. Ma megnézünk néhány egyszerű és praktikus példát, amelyeket ellophatsz és felhasználhatsz a saját munkádban.

Egy vicces animált függőleges listával kezdünk, majd egy listát készítünk miniatűrökkel és szöveggel, egy másikat csak képekkel, végül pedig egy rendezett listát, ahol a számokat másképp stilizáljuk, mint a többi típust. Rengeteg nagyszerű dolgot tanulhatunk itt, úgyhogy vágjunk bele!

Envato Elements felfedezése

HelvetiList

Az első listánkhoz egy egyszerű, minimális, de szuper vonzó dizájnnal kezdünk, amely nagyban függ a tipográfia szépségétől. Néhány vékony Helvetica stílust használunk, és egy sima animációt dobunk be a lebegtetéskor.

Demo: Nézze meg a demót és a kódot a CodePen oldalon.

HTML

A mi jelölésünk itt nagyon egyszerű. Hozzon létre egy div-et (valószínűleg egy osztály vagy ID kell egy élő projektben), majd dobjon be egy fejlécet és egy rendezetlen listát öt listaelemmel.

1 2 3 4 5 6 7 8 9 10

HelvetiList

  • Zürich
  • Genf
  • Winterthur
  • Lausanne
  • Luzern

CSS

Ahogy a fenti képernyőképen láttuk, a listaelemek nagyon vékony betűtípust, finom elválasztókat és egy hover állapotot használnak, amely felnagyítja a betűtípust. Kezdetnek adjunk a div-nek szélességet, és állítsuk be az általános h2 stílusokat.

Ezután alkalmazzunk egy none típusú list-style-type-ot, hogy a gömböcskék eltűnjenek, és visszaállítsuk az esetlegesen jelenlévő margókat vagy kitöltést. A tényleges listaelemekre egy enyhe alsó keretet alkalmaztam, ami biztosítja a kis elválasztót. Én a last-child szelektorral dolgoztam, de nem nagy ügy, ha van olyan böngésző, amelyik nem ismeri ezt fel, és úgy dönt, hogy egy extra keretet dob az aljára.

Figyeld meg azt is, hogy mindkét alkalommal, amikor a betűtípust állítottam be, CSS rövidítést használtam, és különböző súlyokat alkalmaztam. Befejezésként alkalmaztam néhány linkstílust, és beállítottam az átmenetet, hogy a betűtípust nagyítsa, és a háttérszínt megváltoztassa a lebegtetéskor.

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 34 35 36 37 38 39 40 41 42 div { width : 200px ; } h2 { font : 400 40px / 1.5 Helvetica , Verdana , sans - serif ; margin : 0 ; padding : 0 ; } ul { list - style - type : none ; margin : 0 ; padding : 0 ; } li { font : 200 20px / 1.5 Helvetica , Verdana , sans - serif ; border - bottom : 1px solid #ccc; } li : last - child { border : none ; } li a { text - decoration : none ; color : #000; display : block ; width : 200px ;- webkit - transition : font - size 0.3s ease , background - color 0.3s ease ; - moz - transition : font - size 0.3s ease , background - color 0.3s ease ; - o - transition : font - size 0.3s ease , background - color 0.3s ease ; - ms - transition : font - size 0.3s ease , background - color 0.3s ease ; transition : font - size 0.3s ease , background - color 0.3s ease ; } li a : hover { font - size: 30px ; background : #f6f6f6f6; }

Miniatűr lista

Az egyik leggyakoribb formátum, amelyet a listáknál látni fogsz, az alapvető "miniatűr és szöveg" beállítás, amely nagyszerű módja annak, hogy egy egyébként unalmas bekezdésekből álló listát vizuálisan érdekessé tegyél.

Lásd még: 30+ Ingyenes brosúra sablonok Wordhöz (háromrétegű, félrétegű és több)

Ez egy rendkívül sokoldalú listastílus, amelyet bármilyen projektben használhatsz. Lássuk, hogyan működik.

Demo: Nézze meg a demót és a kódot a CodePen oldalon.

Lásd még: 20+ A legjobb Photoshop textúrák (ingyenes & Pro)

HTML

A HTML itt egy kicsit bonyolultabb. Minden listaelemnek három gyermeke kell, hogy legyen: egy kép, egy címsor és egy bekezdés. Az általam használt képek 100px x 100px-esek, így ezt tartsd szem előtt, ha más méretre akarod szabni. Összességében ez az egész még mindig nagyon egyszerű jelölés, ami a legkevésbé sem okozhat gondot.

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
  • Címlapon

    Lorem ipsum dolor sit amet . . . .

  • Címlapon

    Lorem ipsum dolor sit amet . . . .

  • Címlapon

    Lorem ipsum dolor sit amet . . . .

  • Címlapon

    Lorem ipsum dolor sit amet . . . .

CSS

Ez meglepő módon nem igényel túl sok kódot. Ismét töröljük a listastílusokat és beállítunk néhány tipográfiával kapcsolatos CSS-t. A dolog, amit meg kell értened, hogy a képeket balra kell lebegtetned, hogy a bekezdések mellettük jelenjenek meg.

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 * { margin : 0 ; padding : 0 ; } div { margin : 20px ; } ul { list - style - type : none ; width : 500px ; } h3 { font : bold 20px / 1.5 Helvetica , Verdana , sans - serif ; } li img { float : left ; margin : 0 15px 0 0 ; } li p { font : 200 12px / 1.5 Georgia , Times New Roman , serif ; } li { padding : 10px ; overflow : auto ; } li : hover { background : #eee; cursor : pointer ; }

Szabványos miniatűr rács

Ha már rendezetlen listákról beszélünk, akkor legalább egy képrácsot is be kell dobnunk, amelyeket szinte mindig listákkal kezelünk. Nem fogunk semmi túlságosan csicsásat csinálni, csak hasznos lesz, ha a gyors beillesztéshez kéznél tartod ennek a kódnak egy formáját.

Demo: Nézze meg a demót és a kódot a CodePen oldalon.

HTML

A jelölés a következő alapszerkezettel rendelkezik list-item>anchor>image Ha nem vagy hozzászokva ehhez a kódhoz, akkor elég furcsának tűnhet, hogy egy listát használsz erre a célra, de valójában pontosan ezt hozod létre: egy nagy lista képeket. Az a tény, hogy ezek egy rácsba vannak rendezve, nem semmisíti meg az ötletet, hogy ez csak egy nagy lista.

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

CSS

Ennél a példánál az alapszerkezet az, hogy minden egyes listaelemre dobsz némi margót, és balra lebegteted őket. Én az "overflow:auto" trükkel töröltem a lebegtetést, sötét hátteret állítottam be, és a képekre dobtam egy keretet.

Hogy a demót kissé érdekesebbé tegyem, hozzáadtam egy hover-effektust, amely lassan fényt vet fel. Ez természetesen teljesen opcionális, és nem olyasmi, amit minden projektnél alkalmaznál.

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 34 35 * { margin : 0 ; padding : 0 ; } body { background : #333; } div { width : 900px ; margin : 0 auto ; overflow : auto ; } ul { list - style - type : none ; } li img { float : left ; margin : 10px ; border : 5px solid #fff; - webkit - transition : box - shadow 0.5s ease ; - moz - transition : box - shadow 0.5s ease ; - o - transition : box - shadow 0.5s ease ; - ms - transition : box - shadow 0.5s easeease ; transition : box - shadow 0.5s ease ; } li img : hover { - webkit - box - shadow : 0px 0px 7px rgba ( 255 , 255 , 255 , 255 , 255 , 0.9 ) ; box - shadow : 0px 0px 7px rgba ( 255 , 255 , 255 , 255 , 255 , 0.9 ) ; }

Vízszintes menü

Egy másik dolog, amire a fejlesztők listákat használnak, a vízszintes navigációs menük. Új fejlesztőként ennek a trükknek a kódját folyamatosan gugliztam, így mindenképpen tegye könyvjelzőbe, vagy dobja be a snippets mentőjébe.

Demo: Nézze meg a demót és a kódot a CodePen oldalon.

HTML

A fenti miniatűr rácsnál már megtanultuk, hogyan lehet a listaelemeket úgy lebegtetni, hogy azok egymás mellett jelenjenek meg, így itt ugyanezt a technikát fogjuk használni, csak kevesebb elemmel. Figyeljük meg, hogy beledobtam egy "aktív" osztályt, ami egy eléggé szabványos gyakorlat, amit arra fogunk használni, hogy megmondjuk a felhasználónak, hogy éppen melyik oldalon van.

1 2 3 4 5 6 7 8
  • Home
  • A oldalról
  • Portfólió
  • Kapcsolat

CSS

Itt a listaelemeket balra lebegtetjük, csak a jobb oldalra teszünk egy keretet, eltávolítjuk az alapértelmezett linkstílusokat és beállítjuk a sajátomat, majd a lebegő és az aktív állapotot is stilizáljuk.

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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 * { margin : 0 ; padding : 0 ; } nav { margin : 50px ; } ul { overflow : auto ; list - style - type : none ; } li { height : 25px ; float : left ; margin - right : 0px ; border - right : 1px solid #aaa; padding : 0 20px ; } li : last - child { border - right : none ; } li a { text - decoration : none ; color : #ccc; font : 25px / 1 Helvetica , Verdana , sans - serif ; text - transform : uppercase.; - webkit - transition : all 0.5s ease ; - moz - transition : all 0.5s ease ; - o - transition : all 0.5s ease ; - ms - transition : all 0.5s ease ; transition : all 0.5s ease ; } li a : hover { color : #666; } li . active a { font - weight : bold ; color : #333; }

Nagy számok rendezett lista

Ne felejtsük el, hogy nem minden lista rendezetlen lista! Határozottan sok hasznos alkalmazása van a rendezett listáknak. Az egyik igazán trükkös dolog a rendezett listákkal az, hogy a számokat másképp stilizáljuk, mint a többi szöveget. Lássuk, hogyan működik ez.

Demo: Nézze meg a demót és a kódot a CodePen oldalon.

HTML

Most, hogy hogyan építettem ezt fel, szuper ellentmondásos lesz. Mint láthatod, kézzel adom meg a számokat annak ellenére, hogy a HTML ezt automatikusan megteszi helyetted. Ennek jó oka van.

Ennek az ötletnek az elindításához egy bekezdést dobtam a listaelemek közé, majd a li és a li>p típusokat különböző módon kódoltam. Azonban az, hogy ezzel a módszerrel mindent megfelelően sorba tudtam állítani, egy totális rémálom volt. Végül a CSS kijavítása annyira rendetlen és csúnya volt, hogy teljesen elhagytam ezt az egyszerűbb módszer javára, amely valóban lehetővé teszi a világos, egyszerű CSS-t.

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 ,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 .

CSS

Amint az alábbi kódban látható, amit itt tettem, az volt, hogy az alapértelmezett számokat kiürítettem, majd abszolútra állítottam a terjedelmeket, így a bekezdések bal oldalára tudtam tolni őket, ami viszont szükségessé tett némi extra kitöltést a bekezdéseken. Lehet, hogy nem ez a legszebb megoldás kódilag, de ez a legrövidebb és legegyszerűbb módja annak, hogy bizarr pozícionálási hibák nélkül tudtam kitalálni, hogy ezt megtehessem.

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 { width : 500px ; margin : 10px } ol { color : #ccc; list - style - type : none ; } ol li { position : relative ; font : bold italic 45px / 1.5 Helvetica , Verdana , sans - serif ; margin - bottom : 20px ; } li p { font : 12px / 1.5 Helvetica , sans - serif ; padding - left : 60px ; color : #555; } span { position : absolute ; }

Következtetés

Tessék, itt van öt szuper egyszerű, de halálosan praktikus lista stílus, amit másolhatsz és beilleszthetsz a saját kódodba. Ha van más kreatív listaötleted, amit szeretnél megosztani velünk, írd meg nekünk a hozzászólásokban!

John Morrison

John Morrison tapasztalt tervező és termékeny író, aki több éves tapasztalattal rendelkezik a tervezési iparban. A tudás megosztása és a másoktól való tanulás iránti szenvedélyével John a szakma egyik legjobb dizájnbloggerjeként szerzett hírnevet. Napjait kutatással, kísérletezéssel és a legújabb tervezési trendekről, technikákról és eszközökről írva tölti, azzal a céllal, hogy inspirálja és oktassa a tervezőtársakat. Amikor nem veszett el a dizájn világában, John szívesen túrázik, olvas, és a családjával tölti az idejét.