Časovnice ali časovnice so še en od dodatnih elementov, ki jih lahko vključite v spletno stran, da prikažete napredek ali razvoj v letih podjetja ali podjetja. Dobro vizualni grafični izraz, ki ve, kako ga elegantno sestaviti s tipografijo in vizualnimi elementi, lahko prikaže korake, ki jih je storitev ali izdelek sčasoma naredil.
Teh 29 rokov, ki jih najdete spodaj, je iz navpičnih časovnic kot bi bile horizontale. Najboljšega, ki ustreza vašim potrebam, boste našli na strani spletnega mesta, ki ga razvijate za stranko ali zase. Gremo z zbirko zelo zanimivih časovnic, ki so zelo vizualno prijetne.
Časovnica s pomikanjem
Časovnica, ki je v kodi HTML, CSS in JavaScript, da se elegantno postavi kot dober minimalističen kar poudari rdečo za seznam let na levi strani in črno za pisavo in H2. Najboljše pri tej časovni osi je, da se med pomikanjem po strani samodejno izvede sprememba leta. Odličen zaključek, dizajn in rezultat.
Časovnica v CSS
Ta časovna premica uporablja kodo CSS, da jo je mogoče celo ustrezno konfigurirati v nekaterih svojih lastnostih. Nima drsenja tako kot prejšnja, vendar je zanjo značilna vrsta škatel in modra barva, kar ji daje še en zelo eleganten pridih in dodajanje na seznam časovnih trakov te publikacije.
Odzivni drsnik časovne premice
Ta časovna premica je narejena s knjižnico Swiper JS, ki vključuje kodo HTML, CSS in JavaScript. Med napredovanjem po spletni strani nima pomikanja, ima pa postavi leta na pravo stran in gumb, s katerim lahko preidemo na naslednje, poleg tega, da lahko z miškinim kazalcem preidemo na določeno leto. Odlična animacija v vsakem od prehodov.
Napredna časovna premica
Ta časovna premica poleg uporabe uporablja HTML, CSS in JavaScript pojdite v enobarvo, natančno v rdečih tonih. Zanj je značilna tudi uporaba gumba, ki omogoča napredovanje ali vrnitev v časovni trak, označen s to izvrstno kodo rezultatov, da je povsem minimalističen.
Časovnica s fiksno glavo in Flexboxom
HTML in CSS koda za fiksno glavo, ki ostalo bo fiksno v trenutku, ko se pomikate na strani. Zelo subtilno je, da je časovni načrt, ki zelo zanima vsakega trenutnega razvijalca, ki želi, da ga poudarijo trenutni standardi spletnega oblikovanja.
Časovni načrt projekta
Ta časovnica uporablja CSS in HTML za predstavitev pomembne časovnice za uporabo določeno časovno obdobje za projekt. Ko se pomikamo skozi dneve v tednu, je popolno, da ga uporabimo za skupna orodja, ki jih je izdelalo podjetje samo.
Timeline
Časovnica v HTML, CSS in JavaScript, ki izstopa od ostalih za vizualno temo. In ko se premikamo po navpični časovni premici, bo vsakič, ko na časovni premici najdemo novo fotografijo, postala slika ozadja spletne strani, kamor smo postavili to kodo.
Hyperloop
Hyperloopu je časovna premica, ki precej izstopa po uporabljeni zasnovi in za to, da je programiran nič več kot v HTML in CSS. Zanj je značilna uporaba različnih velikosti v besedilni pisavi z navpično črto in vrsto polj, ki označujejo vsak pomemben trenutek časovne osi.
Navpična časovna premica
Intervalska časovna premica, ki se s svojim vizualnim dotikom distancira od ostalih. Ima zelo aktualno gradientno ozadje v zasnovi in vrsto polj, ki označujejo vsakega od teh intervalov. Programirano v CSS in HTML.
Časovnica v Flexboxu
Eden najboljših končnih časovnih rokov in to temelji na kartah vključiti vse informacije, ki jih potrebujemo za ta časovni interval. Razvito tudi v HTML in CSS, je treba upoštevati, da morajo imeti vse kartice enako višino in širino za izračun prostora za večje zaslone.
Časovnica v DIV
Minimalističen časovni načrt v oblikovanju in to je že bilo razvit samo v HTML in CSS, zato je lahko njegovo izvajanje zelo hitro. Zaradi enobarvnega zaključka je popolnoma primeren za izražanje časovnice v informacijskem mediju.
Časovnica v CSS in HTML
Lahko postavite Slike velikosti 400 × 300 v tej časovni osi, ki jo odlikuje zelena barva vrstic in besedilo datumov in dni. Nima animacij, zanj pa je značilna preprosta zasnova na vseh ravneh.
Časovni razpored komentarjev in povratnih informacij
Časovnica, ki se zelo razlikuje od ostalih, ker dopušča dajte kartice s fotografijami uporabnikov, ali vsaj to je najprej namen. Karte z odličnim vizualnim slogom uporabljajo senčenje za precej ravno časovnico brez animacij.
Časovno jutro v HTML in CSS
Popoln časovni načrt za odziv na to zanjo je značilno, da je HTML, CSS in ponujajo dokaj preprosto, a zelo premično časovnico.
Časovni vmesnik
Ta koda v HTML in CSS deluje popolnoma za predstavi delovni dan vadbe. Odziven je s sliko glave in vrsto gumbov, ki jo na zelo jasen in čist način prikažejo v vizualnem vidiku.
Časovna os samo v CSS
Za to časovno črto je značilno, da je v CSS in a dobro izbrana barvna serija: rdeča in zelena. Zelena za popolno pokrivanje celotne strani, bela za besedilo in ločnice ter rdeča za razlikovanje časovnega intervala, v katerem smo. Kliknemo lahko na vsak interval, da ga postavimo v polje, ki ga obkroža in poudari.
Odzivni časovni načrt V3
Prva od vodoravnih časovnih linij na seznamu v HTML, CSS in JavaScript. Vizualno izstopa uporaba črne in sive barve postaviti vodoravno črto z vrsto točk. Vsak interval je z večjo težo označen v viru in v besedilni vsebini.
Časovni trak, ugnezden v barvi
Ena od vodoravnih rokov najvišja vizualna kakovost na seznamu. Dobro interaktivna časovna premica z zelo subtilnimi in dobro predstavljenimi animacijami, ki nudi odlično uporabniško izkušnjo vsakič, ko pritisnete enega od časovnih intervalov. Izdelano je z HTML CSS / Sass in JavaScript / TypeScript (jquery.js).
Časovna odzivna zgodovina
Popoln časovni načrt za prikažite različne dogodke na slikah časovnega obdobja v zgodovini. Horizontalno in odzivno je bilo razvito v HTML, CSS in JavaScript.
Časovnica skupine
Ta časovni načrt izstopa za dober prehod izvedeno s horizontalno animacijo. Odlične barve in izvrstnega dizajna za poudarjanje vsakega časovnega intervala. V HTML, CSS in JavaScript je predstavljena vrsta kartic, nameščenih na reprezentativno sliko ozadja.
Vodoravna časovnica CSS in HTML
Naredil on znani Envato Tuts +, predstavljen nam je vodoravni časovni načrt z vrsto čistih in osnovnih kart v oblikovanju. Ploske barve in vodoravna črta z vrsto rdečih pik, ki prepletajo vsak interval.
Časovnica CSS, HTML in slick.js
Pastelni toni v oblikovanju za časovni trak, ki izstopa s predstavitvijo vsake slike prikazuje vsak časovni interval. Zaradi prehoda med vsako sliko in intervalom ta časovna premica izstopa.
Časovno zaporedje V1
Časovnica, ki izstopa gumbi na vsaki navpični črti vsakega intervala, da povežete celozaslonsko sliko ozadja vsakič, ko pritisnemo eno.
Vodoravna časovna premica HTML CSS
Na tej časovni premici, ki je označena z, ne boste mogli klikniti nikjer izvrstno oblikovanje z modro izbiro barvne palete in vrsto sendvičev za vsako časovnico. Animacij ni, je pa vizualno zelo prijetna za oko.
Časovnica Codyhouse
Ta časovni načrt , ki jo je predstavil Codyhouse, je enobarvna v oblikovanju in je razvit v HTML, CSS in JavaScript. Predstavlja minimalistično črto z nizom točk, ki jih je treba klikniti in povzroči vodoravno animacijo manj kot pol sekunde. Preprosto, a zmogljivo.
Vodoravna časovna premica
Še ena časovnica v HTML, CSS in JavaScript. Značilen z enobarvno barvo, vsebuje eleganten dizajn z zeleno barvo, s katero je čipka postavljena na vsako od točk, ki predstavljajo časovne intervale. Vsakič, ko pritisnemo eno, se začne zelo gladka stranska animacija.
Neimenovana časovnica
Edina črna časovnica s spodnjega seznama. Potem uporabi različne barve za razlikovanje vsako leto in besedilo hkrati z njegovimi mejami. Med vsakim besedilom je vidna animacija.
Časovnica
Ta časovni načrt postavlja poudarek na zeleni barvi biti popolnoma statičen.
Še ena vodoravna časovnica
Lahko postavite sliko blizu celotnega zaslona za časovnico, ki izstopa z uporabo modrih in sivih tonov ter vrsto krogov, ki predstavljajo vsako leto.
Ne spreglejte še ena serija menijev v CSS in HTML.