Vremenske crte ili vremenski trakovi su još jedan od dodatnih elemenata koje možemo integrirajte u web stranicu kako biste prikazali napredak ili evoluciju u godinama kompanije ili kompanije. Dobro vizualni grafički izraz koji znajući kako ga elegantno komponirati s tipografijom i vizuelnim elementima, može pokazati korake koje je usluga ili proizvod preduzela tokom vremena.
Ovih 29 vremenskih rokova koje ćete naći u nastavku su iz vertikalnih vremenskih linija kao što bi bili horizonti. Pronaći ćete najboljeg koji odgovara vašim potrebama da biste ga pronašli na stranici web stranice koju razvijate za klijenta ili za sebe. Idemo sa kolekcijom vrlo zanimljivih vremenskih rokova koji su vrlo vizualno ugodni.
Kronologija pomicanjem
Vremenska crta koja je u HTML, CSS i JavaScript kodu kako bi se graciozno pozicionirala kao dobar minimalista što stavlja akcenat na crvenu za popis godina s lijeve strane, i na crnu za tipične slova i H2. Najbolja stvar u vezi s ovom vremenskom linijom je ta što će se tijekom pomicanja stranice automatski mijenjati godina. Odličan završetak, dizajn i rezultat.
Vremenska crta u CSS-u
Ova vremenska crta koristi CSS kôd da bi čak mogla biti pravilno konfigurirana u nekim svojim svojstvima. Nema pomicanje kao i prethodni, ali karakterizira ga niz kutija i plava boja, što mu daje još jedan vrlo elegantan dodir i dodaje na listu vremenskih trakova ove publikacije.
Klizač vremenske trake koji odgovara
Ova vremenska crta izrađena je s Swiper JS bibliotekom kako bi uključila HTML, CSS i JavaScript kôd. Nema pomicanja dok napredujemo kroz web stranicu, ali ima stavlja godine na desnu stranu i dugme pomoću kojeg možemo ići na sljedeću, osim što ćemo pomoću pokazivača miša ići na određenu godinu. Odlična animacija u svakom od prijelaza.
Napredni vremenski slijed
Ova vremenska crta se izdvaja po tome što koristi HTML, CSS i JavaScript uđite u jednobojnu boju, upravo u crvenim tonovima. Karakterizira ga i upotreba gumba koji vam omogućuje da unaprijed ili se vratite u vremensku liniju označenu ovim sjajnim kodom rezultata kako biste bili prilično minimalistički.
Vremenska crta sa fiksnim zaglavljem i Flexboxom
HTML i CSS kod za fiksno zaglavlje koje ostat će fiksno u trenutku kada se pomicamo na stranici. Izuzetno suptilno biti vremenski slijed od velikog interesa za bilo kojeg trenutnog programera koji želi biti istaknut trenutnim standardima web dizajna.
Vremenska linija projekta
Ova vremenska crta koristi CSS i HTML za predstavljanje važne vremenske crte za koju se koristi taj određeni vremenski period za projekat. Dok se pomicanjem krećemo kroz dane u tjednu, savršeno je primijeniti ga na zajedničke alate koje je napravila sama kompanija.
Timeline
Vremenska crta u HTML, CSS i JavaScript koji se izdvaja od ostalih za vizuelnu temu. I to je tako, dok se krećemo kroz pomicanje kroz vertikalnu vremensku liniju, svaki put kada pronađemo novu fotografiju na vremenskoj crti, ona će postati pozadinska slika web stranice na koju smo postavili ovaj kod.
Hyperloop
Hyperloopu je vremenska linija koja izdvaja se po dizajnu koji se koristi i za to što je programiran ništa više nego u HTML-u i CSS-u. Karakterizira ga upotreba različitih veličina u fontu teksta s okomitom crtom i nizom okvira koji označavaju svaki važan trenutak vremenske linije.
Okomita vremenska crta
Intervalna vremenska crta koja distancira se od ostalih svojim vizuelnim dodirom. Ima vrlo aktualnu gradijentnu pozadinu u dizajnu i niz kutija koje označavaju svaki od tih intervala. Programirano u CSS i HTML.
Vremenska crta u Flexboxu
Jedan od najbolje završenih rokova i to zasniva se na kartama uključiti sve informacije potrebne za taj vremenski interval. Također razvijeni u HTML-u i CSS-u, mora se uzeti u obzir da sve kartice moraju imati jednaku visinu i širinu da bi se izračunao prostor za veće ekrane.
Vremenska crta u DIV-u
Minimalistički vremenski slijed u dizajnu i to je bilo razvijen samo u HTML-u i CSS-u, tako da njegova implementacija može biti vrlo brza. Savršeno je pogodan za izražavanje vremenske linije u informativnom mediju zbog svoje monokromatske obrade.
Vremenska crta u CSS-u i HTML-u
Možete smjestiti Slike veličine 400 × 300 u ovom vremenskom slijedu koji se razlikuje po zelenoj boji linija i tekstu datuma i dana. Nema animacije i odlikuje se jednostavnim dizajnom na svim nivoima.
Vremenska linija za komentare i povratne informacije
Vremenska crta koja se jako razlikuje od ostalih za dopuštanje stavite kartice sa fotografijama korisnika, ili je barem to namjera u početku. Uz odličan vizualni stil, kartice koriste sjenčanje za prilično ravan vremenski slijed bez animacija.
Vremenska crta ujutro u HTML-u i CSS-u
Savršen vremenski slijed za odgovor na to karakterizira ga HTML, CSS i nude prilično jednostavan, ali vrlo mobilan vremenski slijed.
UI vremenske trake
Ovaj kod u HTML-u i CSS-u savršeno radi za predstavljaju radni dan treninga. Reagira zaglavnom slikom i nizom dugmadi koji je prikazuju na vrlo jasan i čist način u vizuelnom aspektu.
Vremenska crta samo u CSS-u
Ovu vremensku liniju karakterizira boravak u CSS-u i a dobro odabrana serija boja: crvena i zelena. Zelena za pokrivanje cijele stranice, bijela za tekst i crte za razdvajanje i crvena za razlikovanje vremenskog intervala u kojem se nalazimo. Možemo kliknuti na svaki interval da ga smjestimo u okvir koji ga okružuje i ističe.
Prilagodljivi vremenski slijed V3
Prvi od vodoravnih vremenskih slijedova na listi u HTML-u, CSS-u i JavaScript-u. Vizualno se ističe po upotreba crne i sive boje postaviti vodoravnu liniju sa nizom točaka. Svaki interval je istaknut većom težinom u izvoru i sadržaju teksta.
Vremenska crta smještena u boji
Jedan od horizontalnih vremenskih rokova najviši vizuelni kvalitet na listi. Vrlo interaktivna vremenska crta s vrlo suptilnim i dobro predstavljenim animacijama koje nude sjajno korisničko iskustvo svaki put kad se pritisne jedan od vremenskih intervala. Napravljen je sa HTML CSS / Sass i JavaScript / TypeScript (jquery.js).
Vremenski slijed prilagodljive povijesti
Savršena vremenska crta za prikazati različite događaje na slikama vremenskog intervala u istoriji. Horizontalan je i reagira na izrađene u HTML-u, CSS-u i JavaScript-u.
Vremenska crta grupe
Ova vremenska crta se ističe dobrom tranzicijom izvedeno uz horizontalnu animaciju. Odličnih boja i izvrsnog dizajna za isticanje svakog vremenskog intervala. U HTML-u, CSS-u i JavaScript-u predstavljen je niz karata postavljenih na reprezentativnu pozadinsku sliku.
Horizontalni CSS i HTML vremenski slijed
Napravio on poznati Envato Tuts +, predstavljen nam je vodoravni vremenski slijed sa nizom čistih i osnovnih karata u dizajnu. Ravne boje i vodoravna linija sa nizom crvenih tačaka koje spajaju svaki interval.
Vremenska crta CSS, HTML i slick.js
Pastelni tonovi u dizajnu za vremensku liniju koja izdvaja se prezentacijom svake od slika prikazuje svaki vremenski interval. Prijelaz između svake slike i intervala čini ovaj vremenski slik istaknutim.
Vremenski slijed V1
Vremenska linija koja se ističe tipke na svakoj vertikalnoj liniji svakog intervala za povezivanje pozadinske slike preko cijelog zaslona svaki put kad pritisnemo jedan.
Horizontalna vremenska crta HTML CSS
Nećete moći kliknuti nigdje na ovoj vremenskoj liniji koja je označena s izvrstan dizajn mudrim izborom palete boja i niz sendviča za svaki vremenski raspored. Nema animacija, ali vizuelno je oku ugodno.
Vremenska crta Codyhouse
Ovaj vremenski slijed koju je predstavio Codyhouse jednobojna je u dizajnu i razvijen je u HTML-u, CSS-u i JavaScript-u. Predstavlja minimalističku liniju sa nizom točaka kao intervalima na koje treba kliknuti i uzrokuje horizontalnu animaciju kraću od pola sekunde. Jednostavno, ali moćno.
Horizontalna vremenska crta
Još jedna vremenska crta izrađena u HTML-u, CSS-u i JavaScript-u. Karakterizira jedna boja, sadrži elegantan dizajn sa zelenom bojom da stavi čipku na svaku od tačaka koje predstavljaju vremenske intervale. Svaki put kad pritisnemo jedan, započinje vrlo glatka bočna animacija.
Neimenovana vremenska crta
Jedina crna vremenska crta s donje liste. Zatim koristi različite boje za razlikovanje svake godine i teksta u isto vrijeme kad i njegove granice. Ima istaknutu animaciju koja prolazi između svakog teksta.
Vremenska crta
Ova vremenska crta stavlja naglasak na zelenoj boji biti potpuno statičan.
Još jedna horizontalna vremenska crta
Možete postavite sliku blizu cijelog ekrana za vremensku crtu koja se ističe upotrebom plavih i sivih tonova plus niz krugova koji predstavljaju svaku godinu.
Ne propustite druga serija menija u CSS-u i HTML-u.