29 suurepärast disaini ajakava CSS-is ja natuke Javascripti

Kerige ajaskaala

Ajajooned või ajajooned on veel üks lisaelement, mida saame integreeruda veebisaidile, et näidata edusamme või arengut ettevõtte või ettevõtte aastate jooksul. Hästi visuaalne graafiline väljend, mis, teades, kuidas seda tüpograafia ja visuaalsete elementidega elegantselt komponeerida, võib näidata teenuse või toote ajas tehtud samme.

Need 29 ajaskaala, mille leiate allpool, on vertikaalsetest ajajoontest nagu oleksid horisontaalid. Leiate parima, mis sobib teie vajadustega, et leida see veebisaidi lehelt, mida arendate kliendi või enda jaoks. Läheme väga huvitavate ajagraafikute kogumiga, mis on visuaalselt väga meeldivad.

Ajaskaala kerides

Kerige ajaskaala

Ajaskaala, mis on HTML-is, CSS-is ja JavaScripti koodis, et positsioneerida ennast graatsiliselt kui hea minimalistlik mis paneb aktsendi punaseks vasakpoolsete aastate loendi jaoks ja mustaks fondi ja H2-de jaoks. Parim asi selle ajaskaala juures on see, et kui lehte sirvida, tehakse aasta muutus automaatselt. Suurepärane viimistlus, disain ja tulemus.

Ajaskaala CSS-is

CSS-i ajaskaala omadused

See ajaskaala kasutab CSS-koodi, et oleks võimalik selle mõnes atribuudis isegi asjakohaselt konfigureerida. Sellel pole kerimist nagu eelmine, kuid seda iseloomustab ruudude ja sinine värv, et anda sellele veel üks väga elegantne puudutus ja liituda selle väljaande ajajoonte loendiga.

Reageeriv ajaskaala liugur

Reageeriv ajaskaala liugur

See ajaskaala koostatakse Swiper JS-i teegiga, et see sisaldaks HTML-i, CSS-i ja JavaScripti koodi. Veebilehe kaudu liikudes pole sellel kerimist, kuid siiski asetab aastad paremale poole ja nupp, millega saame minna järgmisele, peale selle, et saaksime hiirekursorit kasutada konkreetsele aastale minekuks. Suurepärane animatsioon igas üleminekus.

Täpsem ajaskaala

Täpsem ajaskaala

See ajajoon paistab silma HTML-i, CSS-i ja JavaScripti kasutamise poolest minna monokollorisse, täpselt punastes toonides. Seda iseloomustab ka nupu kasutamine, mis võimaldab teil selle suurepärase tulemuskoodiga tähistatud ajaskaalal edasi liikuda või tagasi minna, et olla üsna minimalistlik.

Fikseeritud päise ja Flexboxiga ajaskaala

Ajaskaala on fikseeritud

HTML- ja CSS-kood fikseeritud päise jaoks see jääb fikseerituks hetkel, kui kerime lehel. Suurepärane peenus, et olla ajagraafik, mis pakub suurt huvi kõigile praegustele arendajatele, kes soovivad praeguste veebidisaini standarditega esile tõsta.

Projekti ajaskaala

Projekti ajaskaala

See ajaskaala kasutab CSS-i ja HTML-i, et esitada oluline ajaskaala, mida kasutada konkreetse ajaperioodi jooksul projekti jaoks. Kui kerime seda nädalapäevad läbi, on see ideaalne selle rakendamiseks ettevõtte enda koostöös kasutatavate tööriistade jaoks.

Timeline

Timeline

Ajaskaala sisse HTML, CSS ja JavaScript, mis eristuvad teistest visuaalse teema jaoks. Ja see on see, et vertikaalse ajaskaala sirvimisel saab iga kord, kui leiame ajaskaalalt uue foto, selle taustpildiks veebisaidi, kuhu oleme selle koodi paigutanud.

Hyperloop

Hyperloop

Hyperloopu on ajaskaala, mis paistab silma pigem kasutatud kujunduse poolest programmeerimise eest muud kui HTML ja CSS. Seda iseloomustab erineva suuruse kasutamine tekstifondis vertikaalse joonega ja rida kaste, mis tähistavad ajaskaala iga olulist hetke.

Vertikaalne ajaskaala

Vertikaalne ajaskaala

Intervallide ajaskaala, mis distantseerub visuaalse puudutusega muust. Sellel on kujunduses väga praegune gradiendi taust ja rida kaste, mis tähistavad kõiki neid intervalle. Programmeeritud CSS-is ja HTML-is.

Ajaskaala Flexboxis

Ajaskaala flexbox

Üks parimaid viimistletud ajajooni ja nii põhineb kaartidel lisada kogu selle ajaintervalli jaoks vajalik teave. Ka HTML-is ja CSS-is arendatuna tuleb arvestada, et suuremate ekraanide ruumi arvutamiseks peavad kõik kaardid olema sama kõrguse ja laiusega.

Ajaskaala DIV-is

Ajaskaala div

Minimalistlik ajaskaala kujunduses ja nii on olnud arendatud ainult HTML-is ja CSS-is, nii et selle rakendamine võib olla väga kiire. See sobib suurepäraselt ajaskaala väljendamiseks infokandjas tänu oma ühevärvilisele viimistlusele.

Ajaskaala CSS-is ja HTML-is

CSS-i ajaskaala

Saate paigutada 400 × 300 suurused pildid sellel ajaskaalal, mida eristab ridade roheline värv ning kuupäevade ja päevade tekst. Sellel pole animatsioone ja seda iseloomustab pigem lihtne disain kõigil tasanditel.

Kommentaarid ja tagasiside ajaskaala

Ajaskaala kommentaarid

Ajaskaala lubamisest teistest väga erinev pane kasutajate fotodega kaardidvõi vähemalt on see esialgu kavatsus. Suurepärase visuaalse stiili korral kasutavad kaardid varjundit animatsioonideta üsna tasase ajaskaala jaoks.

Ajaskaala hommik HTML- ja CSS-vormingus

Reageeriv ajaskaala

Ideaalne ajakava sellele reageerimiseks seda iseloomustab HTML, CSS ja pakuvad üsna lihtsat, kuid väga liikuvat ajajoont.

Ajaskaala kasutajaliides

Timeline

See HTML- ja CSS-kood sobib ideaalselt esitama tööpäeva trenni. See on reageeriv päise pildi ja mitmete nuppudega, mis näitavad seda visuaalselt väga selgelt ja puhtalt.

Ajaskaala ainult CSS-is

CSS-i ajaskaala

Seda ajaskaalat iseloomustab CSS-is olemine ja a hästi valitud värviseeria: punane ja roheline. Roheline, et katta kogu leht täielikult, valge teksti ja eraldusjoontega ning punane, et eristada ajavahemikku, milles viibime. Saame klõpsata igal intervallil, et asetada see kastiga, mis ümbritseb seda ja tõstab selle esile.

Reageeriv ajaskaala V3

Reageeriv ajaskaala V3

Esimene HTML-i, CSS-i ja JavaScripti loendis olevast horisontaalsest ajajoonest. Visuaalselt paistab silma mustade ja hallide värvide kasutamine horisontaaljoone asetamiseks punktide reaga. Iga intervall on rõhutatud suurema kaaluga nii allikas kui ka teksti sisu.

Ajaskaala pesitses värviliselt

Pesastatud

Üks horisontaalsetest ajajoontest kõrgeim visuaalne kvaliteet loendis. Hästi interaktiivne ajaskaala koos väga peene ja hästi esitatud animatsioonidega, et pakkuda suurepärast kasutuskogemust iga kord, kui ühte ajaintervalli vajutatakse. See on tehtud koos HTML CSS / Sass ja JavaScript / TypeScript (jquery.js).

Reageeriv ajaloo ajaskaala

Tundlik lugu

Ideaalne ajakava näidata erinevaid sündmusi piltidena ajaloo ajapilu. See on horisontaalne ja reageeriv, et see on välja töötatud HTML-is, CSS-is ja JavaScriptis.

Grupi ajaskaala

Ajaskaala rühm

See ajajoon paistab silma hea ülemineku poolest teostatud horisontaalse animatsiooniga. Suurepärase värvitooniga ja peen disain iga ajaintervalli esiletoomiseks. HTML-, CSS- ja JavaScripti vormingus esitatakse kaardirida, mis on asetatud tüüpilisele taustpildile.

Horisontaalne CSS ja HTML ajaskaala

Horisontaalne envato

Tema tehtud tuntud Envato Tuts +, meile esitatakse horisontaalne ajaskaala koos rea puhta ja põhikaardiga. Lamedad värvid ja horisontaaljoon punaste punktide seeriaga, mis lukustavad iga intervalli.

Ajaskaala CSS, HTML ja slick.js 

Pastellide ajaskaala

Pastelltoonid kujunduses ajaskaala jaoks paistab silma iga kujutise esitlusega näidates iga ajaintervalli. See üleminek iga pildi ja intervallide vahel muudab selle ajaskaala silmapaistvaks.

Ajaskaala järjestus V1

Ajaskaala järjestus

Ajaskaala, mis paistab silma nupud igal vertikaalsel joonel iga intervalli linkimiseks täisekraani taustpildi iga kord, kui ühele vajutame.

Horisontaalne ajaskaala HTML CSS

Ajaskaala HR

Te ei saa sellel ajaskaalal klõpsata kuskil, mida tähistab a peen disain värvipaleti mõistliku valiku abil ja võileibade seeria igale ajajoonele. Animatsioone pole, kuid visuaalselt on see silmale väga meeldiv.

Ajaskaala Codyhouse

Ajaskaala CodyHouse

See ajaskaala Codyhouse on ühevärviline disainis ning see on välja töötatud HTML-is, CSS-is ja JavaScriptis. See esitab minimalistliku joone koos punktide reaga klõpsatavate intervallidena ja põhjustab horisontaalse animatsiooni vähem kui poole sekundi jooksul. Lihtne, aga võimas.

Horisontaalne ajaskaala

Horisontaalne ajaskaala

Teine HTML-i, CSS-i ja JavaScripti koostatud ajaskaala. Iseloomustab ühevärvilinesisaldab elegantset rohelise värviga kujundust, et pits asetada igale ajaintervalli tähistavale punktile. Iga kord, kui me ühte vajutame, algab väga sujuv kõrvalanimatsioon.

Nimetu ajaskaala

Nimetu ajaskaala

Ainus must ajajoon alumisest nimekirjast. Siis ta kasutab igal aastal ja teksti eristamiseks erinevaid värve samal ajal selle piiridega. Sellel on silmapaistev animatsioon, mida saab iga teksti vahel läbida.

Ajaskaala

Ajaskaala

See ajaskaala paneb rohelise värvi aktsent olla täiesti staatiline.

Teine horisontaalne ajaskaala

Teine ajajoon

see võib asetage pilt täisekraani lähedale ajaskaala jaoks, mis paistab silma siniste ja hallide toonide pluss rida ringe, mis esindavad igal aastal.

Ära igatse veel üks CSS-i ja HTML-i menüüde sari.


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

Ole esimene kommentaar

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.