Tidslinjene eller tidslinjene er et av de ekstra elementene vi kan integrer deg på et nettsted for å vise fremgang eller evolusjon i år med et selskap eller et selskap. Et godt visuelt grafisk uttrykk som, å vite hvordan man komponerer det elegant med typografi og visuelle elementer, kan vise trinnene som en tjeneste eller et produkt tar over tid.
Disse 29 tidslinjene du finner nedenfor er fra vertikale tidslinjer som horisontalene. Du finner den beste som passer dine behov for å finne den på en side på nettstedet du utvikler for en klient eller for deg selv. Vi går med en samling veldig interessante tidslinjer som er veldig visuelt tiltalende.
Tidslinje ved å bla
En tidslinje som er i HTML, CSS og JavaScript-kode for å posisjonere seg elegant som en god minimalistisk som setter aksent på rødt for listen over år på venstre side, og på svart for skrift og H2-er. Det beste med denne tidslinjen er at når du blar gjennom siden, vil årskiftet automatisk gjøres. Flott finish, design og resultat.
Tidslinje i CSS
Denne tidslinjen bruker CSS-kode for til og med å kunne konfigureres riktig i noen av egenskapene. Det har ikke rulling som den forrige, men den er preget av en serie bokser og en blå farge for å gi den en annen veldig elegant touch og legge til listen over tidslinjer i denne publikasjonen.
Responsiv tidslinjebryter
Denne tidslinjen er laget med Swiper JS-biblioteket for å inkludere HTML-, CSS- og JavaScript-kode. Det har ikke rulling når vi går videre gjennom websiden, men det gjør det plasserer årene på høyre side og en knapp som vi kan gå til neste med, bortsett fra å kunne bruke musepekeren til å gå til et bestemt år. Flott animasjon i hver av overgangene.
Avansert tidslinje
Denne tidslinjen skiller seg ut for å bruke HTML, CSS og JavaScript, bortsett fra gå inn i monocolor, nettopp i de røde tonene. Det er også preget av bruk av en knapp som lar deg gå videre eller gå tilbake i tidslinjen som er merket av denne flotte resultatkoden for å være ganske minimalistisk.
Tidslinje med fast topptekst og Flexbox
HTML og CSS-kode for en fast overskrift som Det vil forbli løst i det øyeblikket vi ruller på siden. Av stor subtilitet å være en tidslinje med stor interesse for enhver nåværende utvikler som ønsker å skille seg ut med gjeldende standarder for webdesign.
Prosjektets tidslinje
Denne tidslinjen bruker CSS og HTML for å presentere en viktig tidslinje å bruke til den spesifikke tidsperioden for et prosjekt. Når vi ruller går det gjennom ukedagene, så det er perfekt å implementere det for samarbeidsverktøy laget av selskapet selv.
Tidslinje
En tidslinje i HTML, CSS og JavaScript som skiller seg ut fra resten for det visuelle temaet. Og det er at når vi ruller gjennom den vertikale tidslinjen, vil hver gang vi finner et nytt fotografi på tidslinjen, bli bakgrunnsbildet til websiden der vi har plassert denne koden.
Hyperloop
Hyperloopu er en tidslinje som skiller seg ut ganske mye for designet som er brukt og for å være programmert ikke mer enn i HTML og CSS. Det er preget av bruken av forskjellige størrelser i tekstfonten med en loddrett linje og en serie bokser som markerer hvert viktige øyeblikk på tidslinjen.
Vertikal tidslinje
En intervall tidslinje som tar avstand fra resten ved sitt visuelle preg. Den har en veldig aktuell gradientbakgrunn i designet og en serie bokser som markerer hvert av disse intervallene. Programmert i CSS og HTML.
Tidslinje i Flexbox
En av de beste ferdige tidslinjene og det er basert på kort å inkludere all informasjon vi trenger for det tidsintervallet. Også utviklet i HTML og CSS, må det tas i betraktning at alle kortene må ha samme høyde og bredde for å beregne plass til større skjermer.
Tidslinje i DIV
En minimalistisk tidslinje i design og det har vært utviklet bare i HTML og CSS, så implementeringen kan være veldig rask. Den er perfekt egnet for å uttrykke en tidslinje i et informasjonsmedium på grunn av sin monokrome overflate.
Tidslinje i CSS og HTML
Du kan plassere 400 × 300 bilder i størrelse i denne tidslinjen preget av den grønne fargen på linjene og teksten til datoene og dagene. Den har ingen animasjoner og er heller preget av sin enkle design på alle nivåer.
Tidslinje for kommentarer og tilbakemeldinger
En tidslinje som er veldig forskjellig fra de andre for å tillate sette kort med brukernes bilder, eller i det minste er det meningen først. Med flott visuell stil bruker kortene skyggelegging for en ganske flat tidslinje uten animasjoner.
Tidslinjemorgen i HTML og CSS
En perfekt tidslinje for responsive det den er preget av å være HTML, CSS og tilbyr en ganske enkel, men veldig mobil tidslinje.
Tidslinje UI
Denne koden i HTML og CSS fungerer perfekt for presentere arbeidsdagen av en treningsøkt. Det er responsivt med et topptekstbilde og en serie knapper som viser det på en veldig klar og ren måte i det visuelle aspektet.
Tidslinjen bare i CSS
Denne tidslinjen er preget av å være i CSS og av en velvalgte fargeserier: rød og grønn. Grønn for å dekke hele siden helt, hvit for tekst og skillelinjer, og rød for å skille tidsintervallet vi er i. Vi kan klikke på hvert intervall for å plassere den med en boks som omgir den og fremhever den.
Responsiv tidslinje V3
Den første av de horisontale tidslinjene i listen i HTML, CSS og JavaScript. Skiller seg visuelt ut for bruk av svarte og grå farger å plassere en horisontal linje med en serie punkter. Hvert intervall er uthevet med større vekt i kilden og i tekstinnholdet.
Tidslinjen ligger i fargen
En av de horisontale tidslinjene høyeste visuelle kvalitet på listen. En godt interaktiv tidslinje med veldig subtile og godt presenterte animasjoner som gir en flott brukeropplevelse hver gang et av tidsintervallene trykkes. Den er laget med HTML CSS / Sass og JavaScript / TypeScript (jquery.js).
Responsiv historie tidslinje
En perfekt tidslinje for viser de forskjellige hendelsene i bilder av en tidsluke i historien. Det er horisontalt og responsivt å ha blitt utviklet i HTML, CSS og JavaScript.
Gruppens tidslinje
Denne tidslinjen skiller seg ut for en god overgang utført med en horisontal animasjon. Med flott farge og et utsøkt design for å fremheve hver av tidsintervallene. Det er i HTML, CSS og JavaScript å presentere en serie kort overlagt på et representativt bakgrunnsbilde.
Horisontal CSS og HTML tidslinje
Laget av ham kjent Envato Tuts +, blir vi presentert med en horisontal tidslinje med en serie med rene og grunnleggende kort i design. Flate farger og en vannrett linje med en serie røde prikker som henger sammen hvert intervall.
Tidslinje CSS, HTML og slick.js
Pastelltoner i designet for en tidslinje som skiller seg ut for presentasjonen av hvert av bildene viser hvert tidsintervall. Det er overgangen mellom hvert av bildene og intervallene som gjør at denne tidslinjen skiller seg ut.
Tidslinjesekvens V1
En tidslinje som skiller seg ut for knappene på hver loddrett linje av hvert intervall for å koble et bakgrunnsbilde i fullskjerm hver gang vi trykker på ett.
Horisontal tidslinje HTML CSS
Du vil ikke kunne klikke hvor som helst på denne tidslinjen som er uthevet av a utsøkt design med et klokt valg av fargepalett og en serie smørbrød for hver av tidslinjene. Det er ingen animasjoner, men visuelt er det veldig behagelig for øyet.
Tidslinje Codyhouse
Denne tidslinjen presentert av Codyhouse er enfarget i design og er utviklet i HTML, CSS og JavaScript. Den presenterer en minimalistisk linje med en rekke punkter som intervaller som skal klikkes og forårsaker den horisontale animasjonen på mindre enn et halvt sekund. Enkelt, men kraftig.
Horisontal tidslinje
En annen tidslinje laget i HTML, CSS og JavaScript. Karakterisert av enfargen, den inneholder en elegant design med en grønn farge for å sette blonder på hvert av punktene som representerer tidsintervallene. Hver gang vi trykker på en, starter en veldig jevn sideanimasjon.
Uansett tidslinje
Den eneste svarte tidslinjen fra bunnlisten. Så bruker han forskjellige farger for å skille hvert år og teksten samtidig som grensene. Den har en enestående animasjon å passere mellom hver av tekstene.
Tidslinje
Denne tidslinjen setter aksenten på fargen grønn å være helt statisk.
Nok en horisontal tidslinje
Det kan plasser et bilde nær fullskjerm for en tidslinje som skiller seg ut for bruk av blått og grått, pluss en serie sirkler som representerer hvert år.
Ikke gå glipp en annen serie menyer i CSS og HTML.