Cronologiile sunt un alt element suplimentar care poate fi integrat într-un site web pentru a prezenta progresul sau evoluția unei afaceri sau companii de-a lungul anilor. Această grafică atractivă din punct de vedere vizual, atunci când este compusă elegant cu tipografie și alte elemente vizuale, poate ilustra pașii parcurși de un serviciu sau produs de-a lungul timpului.
Aceste 29 de cronologii pe care le veți găsi mai jos variază de la verticală la orizontală. Cu siguranță veți găsi una perfectă care să se potrivească nevoilor dvs. și o veți plasa pe o pagină a site-ului web pe care îl dezvoltați pentru un client sau pentru dvs. Iată o colecție de cronologii foarte interesante și atrăgătoare din punct de vedere vizual.
Cronologie prin derulare
O cronologie construită cu HTML, CSS și JavaScript, prezentată elegant ca un design minimalist care pune accentul pe roșu pentru lista de ani din stânga și negru pentru tipografie și titlurile H2. Cel mai bun lucru este că anul se actualizează automat pe măsură ce derulați în jos pe pagină. Finisaj, design și rezultate excelente.
Cronologie în CSS
Această cronologie folosește cod CSS pentru a permite personalizarea unora dintre proprietățile sale. Spre deosebire de cea anterioară, nu are derulare , dar prezintă o serie de casete și o culoare albastră pentru a-i da o notă elegantă și a o adăuga la lista de cronologii din această publicație.
Glisor de cronologie receptiv
Această cronologie a fost creată folosind biblioteca Swiper JS pentru a încorpora cod HTML, CSS și JavaScript. Nu se derulează pe măsură ce navigați pe pagina web, dar afișează anii în partea dreaptă și include un buton pentru a trece la anul următor. De asemenea, puteți utiliza indicatorul mouse-ului pentru a sări la un anumit an. Animația pentru fiecare tranziție este excelentă.
Cronologie avansată
Această cronologie se remarcă prin utilizarea HTML, CSS și JavaScript, precum și prin designul său monocrom , în special în nuanțe de roșu. De asemenea, dispune de un buton care permite utilizatorilor să se deplaseze înainte sau înapoi prin cronologie, rezultând un design extrem de eficient și minimalist.
Cronologie cu antet fix și Flexbox
Cod HTML și CSS pentru un antet fix care va rămâne la locul său pe măsură ce derulați în jos pe pagină. Este remarcabil de subtil și o caracteristică valoroasă pentru orice dezvoltator web modern care dorește să iasă în evidență prin respectarea standardelor actuale de design web.
Cronologia proiectului
Această cronologie folosește CSS și HTML pentru a prezenta o cronologie a evenimentelor cheie pentru o anumită perioadă a proiectului . Pe măsură ce derulați, aceasta avansează prin zilele săptămânii, fiind perfectă pentru utilizarea în instrumente de colaborare dezvoltate chiar de companie.
Companiei
O cronologie construită cu HTML, CSS și JavaScript care se remarcă prin designul său vizual. Pe măsură ce derulați prin cronologia verticală, fiecare fotografie nouă pe care o întâlniți va deveni automat imaginea de fundal a paginii web unde se află acest cod.
Hyperloop
Hyperloopu este o cronologie care iese în evidență în primul rând prin designul său și prin faptul că este programată în întregime în HTML și CSS. Se caracterizează prin utilizarea unor dimensiuni diferite ale fontului, a unei linii verticale și a unei serii de casete care marchează fiecare moment important din cronologie.
Cronologie verticală
O cronologie împărțită în intervale care iese în evidență datorită stilului său vizual . Prezintă un fundal gradient modern și o serie de casete care marchează fiecare interval. A fost programată folosind CSS și HTML.
Cronologie în Flexbox
Una dintre cele mai rafinate cronologii, folosește fișe pentru a include toate informațiile necesare pentru o anumită perioadă de timp. Dezvoltată și în HTML și CSS, este important de reținut că toate fișele trebuie să aibă aceeași înălțime și lățime pentru a asigura afișarea corectă pe ecrane mai mari.
Cronologie în DIV
Un design minimalist al unei cronologii, dezvoltat exclusiv în HTML și CSS , ceea ce îl face rapid de implementat. Finisajul său monocrom îl face perfect pentru prezentarea unei cronologii într-o publicație de știri.
Cronologie în CSS și HTML
Puteți plasa imagini de 400x300 pe această cronologie, care se distinge prin culoarea verde a liniilor și textul pentru date și zile. Nu are animații și se caracterizează printr-un design simplu la toate nivelurile.
Cronologie pentru comentarii și feedback
Această cronologie este destul de diferită de celelalte, deoarece permite utilizatorilor să adauge carduri cu fotografiile lor , sau cel puțin aceasta este intenția inițială. Cu un stil vizual puternic, cardurile folosesc umbrire pentru o cronologie care altfel este destul de plată și lipsită de animații.
Cronologie dimineața în HTML și CSS
O cronologie perfectă pentru design responsiv, caracterizată prin HTML, CSS și oferind o cronologie destul de simplă, dar foarte prietenoasă cu dispozitivele mobile.
UI cronologie
Acest cod HTML și CSS este perfect pentru prezentarea programului de lucru al unei sesiuni de instruire . Este responsiv, cu o imagine în antet și o serie de butoane care afișează informațiile într-un mod foarte clar și vizual curat.
Cronologie numai în CSS
Această cronologie este caracterizată prin designul său CSS și o schemă de culori bine aleasă: roșu și verde . Verdele acoperă întreaga pagină, albul este folosit pentru text și separatoare, iar roșu distinge intervalul de timp curent. Dacă faceți clic pe fiecare interval, acesta este evidențiat cu o casetă în jurul său.
Cronologie receptivă V3
Prima dintre liniile de timp orizontale de pe listă, creată cu HTML, CSS și JavaScript. Iese în evidență vizual datorită utilizării negrului și griului pentru a crea o linie orizontală cu o serie de puncte. Fiecare interval este evidențiat cu o grosime a fontului și un conținut text mai mare.
Cronologie cuibărită în culori
Una dintre cele mai calitative cronologii orizontale de pe listă . O cronologie extrem de interactivă, cu animații subtile și bine prezentate, care oferă o experiență excelentă utilizatorului de fiecare dată când se dă clic pe un interval de timp. Este construită cu HTML, CSS/Sass și JavaScript/TypeScript (jquery.js).
Cronologie istorică receptivă
O cronologie perfectă pentru afișarea vizuală a diverselor evenimente ale unei perioade istorice. Este orizontală și responsivă, fiind dezvoltată în HTML, CSS și JavaScript.
Cronologia grupului
Această cronologie se remarcă prin tranziția sa animată orizontală bine executată . Se mândrește cu culori vibrante și un design rafinat care evidențiază fiecare interval de timp. Construită cu HTML, CSS și JavaScript, prezintă o serie de cărți suprapuse peste o imagine de fundal reprezentativă.
Cronologie orizontală CSS și HTML
Creată de cunoscutul Envato Tuts+ , această cronologie prezintă o structură orizontală cu o serie de fișe simple și curate. Folosește culori plate și o linie orizontală cu o serie de puncte roșii care marchează fiecare interval.
Cronologie CSS, HTML și slick.js
Tonuri pastelate în designul unei cronologii care iese în evidență prin prezentarea fiecărei imagini, reprezentând fiecare interval de timp. Tranziția dintre fiecare imagine și interval este cea care face ca această cronologie să fie cu adevărat remarcabilă.
Secvența cronologică V1
O cronologie care iese în evidență prin butoanele de pe fiecare linie verticală a fiecărui interval pentru a lega o imagine de fundal pe ecran complet de fiecare dată când apăsăm una.
Cronologie orizontală HTML CSS
Nu veți putea da clic nicăieri pe această cronologie, care se remarcă prin designul său rafinat, alegerea judicioasă a paletei de culori și o serie de bule de dialog pentru fiecare cronologie. Nu există animații, dar este foarte plăcută din punct de vedere vizual.
Cronologie Codyhouse
Această cronologie , prezentată de Codyhouse, are un design monocrom și este construită folosind HTML, CSS și JavaScript. Prezintă o linie minimalistă cu o serie de puncte care acționează ca intervale pentru a declanșa o animație orizontală de mai puțin de jumătate de secundă atunci când se face clic pe ele. Simplă, dar extrem de eficientă.
Cronologie orizontală
O altă cronologie creată cu HTML, CSS și JavaScript. Caracterizată prin designul său monocrom , are un aspect elegant, cu o notă de verde care evidențiază fiecare punct reprezentând un interval de timp. De fiecare dată când se dă clic pe un punct, începe o animație de derulare laterală lină.
Cronologie fără nume
Singura cronologie din listă este neagră în fundal. Apoi sunt folosite culori diferite pentru a diferenția fiecare an și textul, precum și limitele acestuia. O animație proeminentă face tranziția între fiecare intrare de text.
Cronologie
Această cronologie accentuează culoarea verde ca fiind complet statică.
O altă cronologie orizontală
Puteți plasa o imagine aproape pe tot ecranul pentru o cronologie care iese în evidență prin utilizarea tonurilor de albastru și gri, plus o serie de cercuri care reprezintă fiecare an.
Nu ratați o altă serie de meniuri în CSS și HTML.