Časovnice so še en dodaten element, ki ga je mogoče integrirati v spletno mesto za prikaz napredka ali razvoja podjetja skozi leta. Ta vizualno privlačna grafika, elegantno sestavljena s tipografijo in drugimi vizualnimi elementi, lahko ponazori korake, ki jih je storitev ali izdelek naredil skozi čas.
Teh 29 časovnic, ki jih boste našli spodaj, segajo od navpične do vodoravne postavitve. Zagotovo boste našli popolno, ki bo ustrezala vašim potrebam, in jo postavili na stran spletnega mesta, ki ga razvijate za stranko ali zase. Tukaj je zbirka zelo zanimivih in vizualno privlačnih časovnic.
Časovnica s pomikanjem
Časovnica, zgrajena s HTML-jem, CSS-jem in JavaScriptom, elegantno predstavljena kot minimalistična oblika , ki poudarja rdečo barvo za letni seznam na levi in črno barvo za tipografijo in naslove H2. Najboljše pri tem je, da se leto samodejno posodablja, ko se pomikate po strani navzdol. Odlična izdelava, oblikovanje in rezultati.
Časovnica v CSS
Ta časovnica uporablja kodo CSS za prilagajanje nekaterih svojih lastnosti. Za razliko od prejšnje nima drsenja , ima pa vrsto okvirčkov in modro barvo, ki ji dajejo eleganten pridih in jo dodajajo na seznam časovnic v tej publikaciji.
Odzivni drsnik časovne premice
Ta časovnica je bila ustvarjena z uporabo knjižnice Swiper JS, ki vključuje kodo HTML, CSS in JavaScript. Med navigacijo po spletni strani se ne pomika, vendar prikazuje leta na desni strani in vključuje gumb za premik na naslednje leto. Za skok na določeno leto lahko uporabite tudi kazalec miške. Animacija za vsak prehod je odlična.
Napredna časovna premica
Ta časovnica izstopa po uporabi HTML-ja, CSS-ja in JavaScripta ter po enobarvni zasnovi , zlasti v rdečih odtenkih. Ima tudi gumb, ki uporabnikom omogoča premikanje naprej ali nazaj po časovnici, kar ima za posledico zelo učinkovito in minimalistično zasnovo.
Časovnica s fiksno glavo in Flexboxom
Koda HTML in CSS za fiksno glavo, ki bo ostala na mestu, ko se pomikate navzdol po strani. To je izjemno subtilna in dragocena funkcija za vsakega sodobnega spletnega razvijalca, ki želi izstopati z upoštevanjem trenutnih standardov spletnega oblikovanja.
Časovni načrt projekta
Ta časovnica uporablja CSS in HTML za predstavitev časovnice ključnih dogodkov za določeno obdobje projekta . Med pomikanjem se premikate skozi dneve v tednu, zaradi česar je odlična za uporabo v orodjih za sodelovanje, ki jih je razvilo podjetje samo.
Timeline
Časovnica, zgrajena s HTML-jem, CSS-jem in JavaScriptom, ki se od ostalih razlikuje po svoji vizualni zasnovi. Ko se pomikate po navpični časovnici, vsaka nova fotografija, na katero naletite, samodejno postane slika ozadja spletne strani, kjer se nahaja ta koda.
Hyperloop
Hyperloopu je časovnica, ki izstopa predvsem po svoji zasnovi in dejstvu, da je v celoti programirana v HTML in CSS. Zanjo je značilna uporaba različnih velikosti pisav, navpična črta in vrsta okvirčkov, ki označujejo vsak pomemben trenutek na časovnici.
Navpična časovna premica
Časovnica, razdeljena na intervale, ki izstopa od ostalih zaradi svojega vizualnega sloga . Ima moderno gradientno ozadje in vrsto okvirčkov, ki označujejo vsak interval. Programirana je bila s CSS in HTML.
Časovnica v Flexboxu
Ena najbolj izpopolnjenih časovnic, ki uporablja kartice za vključitev vseh informacij, potrebnih za določeno časovno obdobje. Prav tako je razvita v HTML in CSS, zato je pomembno upoštevati, da morajo imeti vse kartice enako višino in širino, da se zagotovi pravilen prikaz na večjih zaslonih.
Časovnica v DIV
Minimalistična časovnica, razvita izključno v HTML in CSS , omogoča hitro implementacijo. Zaradi enobarvne obdelave je idealna za predstavitev časovnice v novicah.
Časovnica v CSS in HTML
Na to časovnico lahko postavite slike velikosti 400x300 , ki jo odlikuje zelena barva črt in besedila za datume in dneve. Nima animacij in jo odlikuje preprosta zasnova na vseh ravneh.
Časovni razpored komentarjev in povratnih informacij
Ta časovnica se precej razlikuje od drugih, saj uporabnikom omogoča dodajanje kartic s svojimi fotografijami , oziroma vsaj to je prvotni namen. Kartice imajo močan vizualni slog, pri čemer senčenje ustvari časovnico, ki je sicer precej ravna in brez animacij.
Časovno jutro v HTML in CSS
Popolna časovnica za odzivno oblikovanje, za katero so značilni HTML in CSS , ter dokaj preprosta, a zelo prijazna do mobilnih naprav časovnica.
Časovni vmesnik
Ta koda HTML in CSS je odlična za predstavitev delovnega urnika usposabljanja . Je odzivna, z glavo slike in vrsto gumbov, ki prikazujejo informacije na zelo jasen in vizualno čist način.
Časovna os samo v CSS
To časovnico zaznamujeta CSS zasnova in dobro izbrana barvna shema: rdeča in zelena . Zelena barva pokriva celotno stran, bela je uporabljena za besedilo in ločila, rdeča pa označuje trenutni časovni interval. S klikom na posamezen interval ga označite z okvirjem.
Odzivni časovni načrt V3
Prva od horizontalnih časovnic na seznamu, ustvarjena s HTML, CSS in JavaScript. Vizualno izstopa zaradi uporabe črne in sive barve za ustvarjanje horizontalne črte z nizom pik. Vsak interval je označen z večjo težo pisave in besedilno vsebino.
Časovni trak, ugnezden v barvi
Ena najkakovostnejših horizontalnih časovnic na seznamu . Zelo interaktivna časovnica s subtilnimi in dobro predstavljenimi animacijami, ki zagotavljajo odlično uporabniško izkušnjo vsakič, ko kliknete časovni interval. Zgrajena je s HTML, CSS/Sass in JavaScript/TypeScript (jquery.js).
Časovna odzivna zgodovina
Popolna časovnica za vizualni prikaz različnih dogodkov zgodovinskega obdobja. Je horizontalna in odzivna, razvita v HTML, CSS in JavaScript.
Časovnica skupine
Ta časovnica izstopa po dobro izvedenih horizontalnih animacijskih prehodih . Ponaša se z živahnimi barvami in izvrstnim dizajnom, ki poudari vsak časovni interval. Zgrajena je s HTML, CSS in JavaScript ter predstavlja vrsto kartic, ki so naložene na reprezentativno sliko ozadja.
Vodoravna časovnica CSS in HTML
Ta časovnica, ki jo je ustvaril znani Envato Tuts+ , ima vodoravno postavitev z vrsto čistih, osnovnih kartic. Uporablja enobarvne barve in vodoravno črto z vrsto rdečih pik, ki označujejo vsak interval.
Časovnica CSS, HTML in slick.js
Pastelni toni v oblikovanju časovnice, ki izstopajo pri predstavitvi vsake slike, ki predstavlja vsak časovni interval. Prav prehod med posameznimi slikami in intervali naredi to časovnico resnično izjemno.
Časovno zaporedje V1
Časovnica, ki izstopa po gumbih na vsaki navpični črti vsakega intervala, ki ob vsakem pritisku na gumb povežejo sliko ozadja v celozaslonskem načinu.
Vodoravna časovna premica HTML CSS
Na tej časovnici, ki izstopa po izvrstni zasnovi, premišljeni izbiri barvne palete in vrsti govornih mehurčkov za vsako časovnico, ne boste mogli klikniti nobenega mesta . Ni animacij, vendar je vizualno zelo prijetna.
Časovnica Codyhouse
Ta časovnica , ki jo predstavlja Codyhouse, ima enobarvno zasnovo in je zgrajena z uporabo HTML, CSS in JavaScript. Predstavlja minimalistično črto z vrsto točk, ki delujejo kot intervali, ki ob kliku sprožijo vodoravno animacijo, krajšo od pol sekunde. Preprosto, a zelo učinkovito.
Vodoravna časovna premica
Še ena časovnica, ustvarjena s HTML-jem, CSS-jem in JavaScriptom. Zanjo je značilna enobarvna zasnova z elegantno postavitvijo z zeleno barvo, ki poudarja vsako točko, ki predstavlja časovni interval. Vsakič, ko kliknete točko, se začne gladka animacija stranskega pomikanja.
Neimenovana časovnica
Edina časovnica na seznamu je črna v ozadju. Za razlikovanje posameznih letnic in besedila ter njegovih meja se nato uporabijo različne barve. Med posameznimi vnosi besedila poteka izrazita animacija prehodov.
Časovnica
Ta časovnica poudarja, da je zelena barva popolnoma statična.
Še ena vodoravna časovnica
Za časovnico, ki izstopa po uporabi modrih in sivih tonov ter nizu krogov, ki predstavljajo vsako leto, lahko postavite skoraj celozaslonsko sliko .
Ne zamudite še ene serije menijev v CSS in HTML.