29 diseinu denbora lerro bikain CSSn eta Javascript pixka batekin

Denbora-lerroak edo denbora-lerroak ahal ditugun elementu gehigarrietako bat dira webgune batean integratu aurrerapenak edo bilakaera erakusteko enpresa edo enpresa bateko urteetan. Ikusmen oneko adierazpen grafikoa, tipografiaz eta elementu bisualekin dotore konposatzen jakinda, zerbitzu edo produktu batek denboran zehar emandako urratsak erakuts ditzakeena.

Jarraian aurkituko dituzun 29 denbora-lerro hauek dira denbora-lerro bertikaletatik horizontala litzatekeen bezala. Zure beharretara egokitzen den onena aurkituko duzu bezeroarentzat edo zeure buruarentzat garatzen ari zaren webguneko orrialde batean kokatzeko. Ikusmen aldetik oso atseginak diren denbora-lerro oso interesgarrien bildumarekin goaz.

Kronologia korrituz

HTML, CSS eta JavaScript kodean dagoen denbora lerroa bere burua modu bikainean kokatzeko minimalista ona horrek azentua gorriz jartzen du urteen zerrendarako ezkerreko aldean, eta beltza letra-tipo eta H2-rako. Kronograma honen gauzarik onena hau da: orrialdean zehar joan ahala, urteko aldaketa automatikoki egingo dela. Akabera, diseinu eta emaitza bikainak.

Denbora-lerroa CSSn

Denbora-lerro honek CSS kodea erabiltzen du bere propietate batzuetan modu egokian konfiguratu ahal izateko. Ez du korritzerik aurrekoan bezala, baina lauki eta kolore urdinak ditu, beste ukitu dotore bat emateko eta argitalpen honetako denbora lerroen zerrendarekin bat egiteko.

Erantzungarria den kronologia graduatzailea

Denbora-lerro hau Swiper JS liburutegiarekin egina dago HTML, CSS eta JavaScript kodea sartzeko. Ez du korritzerik web orrialdean aurrera egin ahala, baina bai urteak eskuinaldean kokatzen ditu eta hurrengo batera joateko botoia, urte zehatz batera joateko saguaren erakuslea erabiltzeaz gain. Animazio bikaina trantsizio bakoitzean.

Denbora-lerro aurreratua

Denbora-lerro hau HTML, CSS eta JavaScript erabiltzeagatik nabarmentzen da sartu monokolorera, hain zuzen tonu gorrietan. Emaitza-kode bikain honek markatutako denbora-lerroan nahiko minimalista izateko aurrera edo atzera egitea ahalbidetzen duen botoia erabiltzearen ezaugarria da.

Denbora-lerroa goiburu finkoarekin eta Flexbox

HTML eta CSS kodea goiburu finko baterako finkatuta egongo da korritzen dugun unean orrian. Subtiltasun handikoa, egungo diseinu estandarrengatik nabarmendu nahi duen edozein garatzailerentzat interes handiko kronologia izateko.

Proiektuaren kronograma

Denbora-lerro honek CSS eta HTML erabiltzen ditu erabili beharreko denbora-lerro garrantzitsua aurkezteko denbora tarte zehatz hori proiektu baterako. Korritzen ari garen heinean asteko egunetan zehar, beraz, ezin hobea da enpresak berak egindako lankidetza tresnetarako ezartzea.

Timeline

Denbora-lerro bat HTML, CSS eta JavaScript gainerakoetatik nabarmentzen direnak gai bisualerako. Eta hau da, denbora-lerro bertikalean zehar mugitzen goazela, denbora-lerroan argazki berri bat aurkitzen dugun bakoitzean, kode hau jarri dugun web orriaren atzeko irudia bihurtuko dela.

Hyperloop

Hyperloopu denbora lerro bat da nabarmentzen da erabilitako diseinuagatik eta HTML eta CSS programetan baino ez izateagatik. Testuaren letra-lerroan lerro bertikalarekin eta denbora-lerroaren une garrantzitsu bakoitza markatzen duten lauki batzuekin tamaina desberdinak erabiltzearen ezaugarria da.

Denbora-lerro bertikala

Hori tarteko denbora-lerroa gainerakoengandik bere ukitu bisualarengatik aldentzen da. Diseinuan gaur egungo degradatuaren atzeko planoa du eta tarte horietako bakoitza markatzen duten lauki multzoa. CSS eta HTML programatuta.

Kronologia Flexbox-en

Amaitutako kronogramarik onenetako bat eta hori kartetan oinarrituta dago denbora tarte horretarako behar dugun informazio guztia sartzeko. HTML eta CSSn ere garatuta, kontuan hartu behar da karta guztiek altuera eta zabalera bera izan behar dutela pantaila handiagoetarako espazioa kalkulatzeko.

Kronologia DIV-n

Diseinuaren denbora-lerro minimalista eta hori izan da HTML eta CSS bertsioetan soilik garatu da, beraz, bere inplementazioa oso azkarra izan daiteke. Oso egokia da informazio-euskarri batean denbora-lerroa adierazteko, akabera monokromoa duelako.

Denbora-lerroa CSS eta HTMLn

Jarri dezakezu 400 × 300 tamainako irudiak lerroen kolore berdea eta data eta egunen testua bereizten den denbora lerro honetan. Ez du animaziorik eta maila guztietan duen diseinu sinplea du ezaugarri.

Iruzkinak eta iruzkinak

Baimentzen duten besteengandik oso desberdina den denbora lerroa jarri txartelak erabiltzaileen argazkiekin, edo hori da hasieran behintzat asmoa. Ikusizko estilo bikainarekin, kartek itzalak erabiltzen dituzte animaziorik gabeko denbora lerro nahiko laua lortzeko.

Kronologia goizean HTML eta CSS formatuan

Erantzuteko kronograma ezin hobea HTML, CSS izatea du ezaugarri eta nahiko erraza baina oso mugikorra den kronograma eskaini.

Denbora-lerroaren interfazea

HTML eta CSS kode hau ezin hobeto funtzionatzen du lanaldia aurkeztu entrenamendu batena. Goiburuko irudiarekin eta ikusizko alderdian oso modu garbi eta garbian erakusten duten botoi sortarekin sentikorra da.

Denbora-lerroa CSS-n soilik

Denbora-lerro hau CSS-n egotea eta a ondo aukeratutako kolore serieak: gorria eta berdea. Berdea orrialde osoa guztiz estaltzeko, zuria testurako eta lerro zatitzaileetarako eta gorria gu gauden denbora tartea bereizteko. Tarte bakoitzaren gainean klik egin dezakegu inguratzen duen eta nabarmentzen duen kutxa batekin kokatzeko.

V3 erantzuteko denbora-lerroa

Zerrendako denbora-lerro horizontaletako lehena HTML, CSS eta Javascript-en. Bisualki nabarmentzen da kolore beltzak eta grisak erabiltzea puntu batzuk dituen lerro horizontala jartzeko. Tarte bakoitza pisu handiagoarekin nabarmentzen da iturburuan eta testuaren edukian.

Denbora-lerroa koloretan kokatuta dago

Denbora-lerro horizontaletako bat zerrendako ikusizko kalitate altuena. Denbora-lerro interaktiboa, animazio oso sotilak eta ondo aurkeztuta dituena, erabiltzaileen esperientzia bikaina eskaintzeko denbora tarte bat sakatzen den bakoitzean. -Rekin egina dago HTML CSS / Sass eta JavaScript / TypeScript (jquery.js).

Erantzunezko historiaren kronograma

Denbora-lerro ezin hobea erakutsi gertakari desberdinak iruditan historiako denbora tarte batena. Horizontala eta sentikorra da HTML, CSS eta JavaScript-en garatu izana.

Taldearen kronograma

Denbora-lerro hau trantsizio on batengatik nabarmentzen da animazio horizontal batekin burutua. Kolore bikaina eta diseinu bikaina, denbora tarte bakoitza nabarmentzeko. HTML, CSS eta Javascript-en dago atzeko planoko irudi ordezkari batean gainjarritako karta sorta aurkezteko.

CSS eta HTML kronologia horizontala

Berak egina Envato Tuts + ezaguna, denbora-lerro horizontala aurkezten zaigu diseinuaren oinarrizko karta garbi eta oinarrizkoen serie batekin. Kolore lauak eta lerro horizontala tarte bakoitza elkarren artean lotzen duten puntu gorri batzuekin.

Denbora-lerroaren CSS, HTML eta slick.js 

Tonu pastelak diseinuan, denbora-lerro baterako irudi bakoitzaren aurkezpenagatik nabarmentzen da denbora tarte bakoitza erakutsiz. Irudi eta tarte bakoitzaren arteko trantsizioa da denbora lerro hau nabarmentzen duena.

V1 kronologia sekuentzia

Nabarmentzen den denbora lerroa lerro bertikal bakoitzaren botoiak tarte bakoitzaren pantaila osoko atzeko planoko irudia lotzeko bat sakatzen dugun bakoitzean.

Denbora-lerro horizontala HTML CSS

Ezingo duzu inon klik egin a-k nabarmendutako denbora-lerro honetan diseinu bikaina kolore-paleta aukeraketa jakintsuaren arabera eta ogitarteko batzuk denbora-lerro bakoitzerako. Ez dago animaziorik, baina bisualki oso atsegina da.

Denbora-lerroa Codyhouse

Denbora-lerro hau Codyhouse-k aurkeztua kolore bakarra da diseinuan eta HTML, CSS eta JavaScript-en garatzen da. Lerro minimalista bat aurkezten du, puntu batzuk dituena, klik egin beharreko tarte gisa eta segundo erdi baino gutxiagoko animazio horizontala eragiten du. Sinplea, baina indartsua.

Denbora-lerro horizontala

HTML, CSS eta JavaScript-en egindako beste kronograma bat. Kolore bakarrarekin bereizten da, kolore berdea duen diseinu dotorea dauka, tarteak irudikatzen dituzten puntu bakoitzean parpailak jartzeko. Bat sakatzen dugun bakoitzean, alboko animazio oso leuna hasten da.

Izenik gabeko kronograma

Beheko zerrendako kronologia beltz bakarra. Gero erabiltzen du kolore desberdinak urtero eta testua bereizteko bere mugen aldi berean. Testu bakoitzaren artean pasatzeko animazio bikaina du.

Denbora-lerroa

Denbora-lerro honek jartzen du berdea koloreko azentua erabat estatikoa izateko.

Beste denbora-lerro horizontal bat

Ahal jarri irudia pantaila osotik gertu tonu urdin eta grisen erabileragatik eta urtero irudikatzen duten zirkulu batzuen erabileragatik nabarmentzen den denbora-lerroarentzat.

Ez galdu CSS eta HTMLko beste menu sorta bat.