Afatet kohore janë një element tjetër shtesë që mund të integrohet në një faqe interneti për të shfaqur progresin ose evolucionin e një biznesi ose kompanie gjatë viteve. Ky grafik tërheqës vizualisht, kur kompozohet në mënyrë elegante me tipografi dhe elementë të tjerë vizualë, mund të ilustrojë hapat e ndërmarrë nga një shërbim ose produkt me kalimin e kohës.
Këto 29 linja kohore që do të gjeni më poshtë variojnë nga vertikale në horizontale. Me siguri do të gjeni atë të përsosur që i përshtatet nevojave tuaja dhe do ta vendosni në një faqe të faqes së internetit që po zhvilloni për një klient ose për veten tuaj. Ja një koleksion me linja kohore shumë interesante dhe vizualisht tërheqëse.
Afati kohor duke lëvizur
Një vijë kohore e ndërtuar me HTML, CSS dhe JavaScript, e paraqitur në mënyrë elegante si një dizajn minimalist që thekson të kuqen për listën e viteve në të majtë dhe të zezën për tipografinë dhe titujt H2. Pjesa më e mirë është se viti përditësohet automatikisht ndërsa lëvizni poshtë faqes. Përfundim, dizajn dhe rezultate të shkëlqyera.
Afati kohor në CSS
Kjo vijë kohore përdor kodin CSS për të lejuar personalizimin e disa prej vetive të saj. Ndryshe nga ajo e mëparshmja, nuk ka funksion lëvizjeje , por përmban një sërë kutish dhe një ngjyrë blu për t'i dhënë një prekje elegante dhe për ta shtuar në listën e vijave kohore në këtë botim.
Slider i përgjegjshëm i kronologjisë
Kjo vijë kohore u krijua duke përdorur bibliotekën Swiper JS për të përfshirë kodin HTML, CSS dhe JavaScript. Nuk lëviz ndërsa shfletoni faqen e internetit, por shfaq vitet në anën e djathtë dhe përfshin një buton për të kaluar në vitin tjetër. Gjithashtu mund të përdorni treguesin e miut për të kaluar në një vit specifik. Animacioni për secilin tranzicion është i shkëlqyer.
Afati i përparuar kohor
Kjo vijë kohore dallohet për përdorimin e HTML, CSS dhe JavaScript, si dhe për dizajnin e saj monokrom , konkretisht në nuanca të kuqe. Gjithashtu përmban një buton që u lejon përdoruesve të lëvizin përpara ose prapa në vijën kohore, duke rezultuar në një dizajn shumë efektiv dhe minimalist.
Afati kohor me kokë fikse dhe Flexbox
Kodi HTML dhe CSS për një kokë fikse që do të mbetet në vend ndërsa lëvizni poshtë faqes. Është jashtëzakonisht delikate dhe një veçori e vlefshme për çdo zhvillues modern të uebit që kërkon të dallohet duke iu përmbajtur standardeve aktuale të dizajnit të uebit.
Afati kohor i projektit
Kjo vijë kohore përdor CSS dhe HTML për të paraqitur një vijë kohore të ngjarjeve kryesore për një periudhë specifike të projektit . Ndërsa shfletoni, ajo përparon nëpër ditët e javës, duke e bërë atë perfekte për përdorim në mjetet bashkëpunuese të zhvilluara nga vetë kompania.
Kohështrirje
Një vijë kohore e ndërtuar me HTML, CSS dhe JavaScript që dallohet nga të tjerat për shkak të dizajnit të saj vizual. Ndërsa shfletoni vijën kohore vertikale, çdo foto e re që hasni do të bëhet automatikisht imazhi i sfondit të faqes së internetit ku ndodhet ky kod.
Hyperloop
Hyperloopu është një vijë kohore që dallohet kryesisht për dizajnin e saj dhe faktin se është programuar tërësisht në HTML dhe CSS. Karakterizohet nga përdorimi i madhësive të ndryshme të shkronjave, një vijë vertikale dhe një seri kutish që shënojnë çdo moment të rëndësishëm në vijën kohore.
Afati vertikal
Një vijë kohore e ndarë në intervale që dallohet nga të tjerat për shkak të stilit të saj vizual . Ajo paraqet një sfond modern me gradient dhe një seri kutish që shënojnë çdo interval. Është programuar duke përdorur CSS dhe HTML.
Afati kohor në Flexbox
Një nga linjat kohore më të rafinuara, përdor karta për të përfshirë të gjithë informacionin e nevojshëm për një periudhë të caktuar kohore. Gjithashtu i zhvilluar në HTML dhe CSS, është e rëndësishme të theksohet se të gjitha kartat duhet të kenë të njëjtën lartësi dhe gjerësi për të siguruar shfaqjen e duhur në ekranet më të mëdha.
Afati kohor në DIV
Një dizajn minimalist i vijës kohore i zhvilluar vetëm në HTML dhe CSS , duke e bërë të shpejtë për t’u zbatuar. Përfundimi i tij monokrom e bën të përsosur për prezantimin e një kronologjie në një media lajmesh.
Afati kohor në CSS dhe HTML
Mund të vendosni imazhe 400x300 në këtë vijë kohore, e cila dallohet nga ngjyra jeshile e vijave dhe teksti për datat dhe ditët. Nuk ka animacione dhe karakterizohet nga dizajni i saj i thjeshtë në të gjitha nivelet.
Afatet kohore të komenteve dhe reagimeve
Kjo vijë kohore është mjaft e ndryshme nga të tjerat sepse u lejon përdoruesve të shtojnë karta me fotot e tyre , ose të paktën ky është qëllimi fillestar. Me një stil të fortë vizual, kartat përdorin hijezim për një vijë kohore që përndryshe është mjaft e sheshtë dhe i mungojnë animacionet.
Koha në mëngjes në HTML dhe CSS
Një afat kohor perfekt për dizajnin responsiv, i karakterizuar nga HTML, CSS dhe duke ofruar një afat kohor mjaft të thjeshtë por shumë miqësor për celularët.
Ndërfaqja e kronologjisë
Ky kod HTML dhe CSS është perfekt për të paraqitur orarin e punës së një sesioni trajnimi . Është i përgjegjshëm, me një imazh të kokës dhe një seri butonash që shfaqin informacionin në një mënyrë shumë të qartë dhe vizualisht të pastër.
Afati kohor vetëm në CSS
Kjo vijë kohore karakterizohet nga dizajni i saj CSS dhe një skemë ngjyrash e zgjedhur mirë: e kuqe dhe jeshile . E gjelbra mbulon të gjithë faqen, e bardha përdoret për tekstin dhe ndarësit, dhe e kuqja dallon intervalin kohor aktual. Klikimi mbi secilin interval e nxjerr në pah atë me një kuti përreth.
Afati kohor i përgjegjshëm V3
E para nga vijat kohore horizontale në listë, e krijuar me HTML, CSS dhe JavaScript. Bie në sy vizualisht për shkak të përdorimit të ngjyrës së zezë dhe gri për të krijuar një vijë horizontale me një seri pikash. Çdo interval është i theksuar me peshë më të madhe të shkronjave dhe përmbajtje teksti.
Afati kohor i vendosur me ngjyra
Një nga linjat kohore horizontale me cilësinë më të lartë në listë . Një linjë kohore shumë interaktive me animacione delikate dhe të paraqitura mirë që ofrojnë një përvojë të shkëlqyer për përdoruesin sa herë që klikohet një interval kohor. Është ndërtuar me HTML, CSS/Sass dhe JavaScript/TypeScript (jquery.js).
Afati kohor i historisë së përgjegjshme
Një vijë kohore perfekte për shfaqjen vizuale të ngjarjeve të ndryshme të një periudhe historike. Është horizontale dhe responsive, pasi është zhvilluar në HTML, CSS dhe JavaScript.
Afati kohor i grupit
Kjo vijë kohore dallohet për tranzicionin e saj të animacionit horizontal të ekzekutuar mirë . Ajo krenohet me ngjyra të gjalla dhe një dizajn të mrekullueshëm që nxjerr në pah çdo interval kohor. E ndërtuar me HTML, CSS dhe JavaScript, ajo paraqet një seri kartash të mbivendosura në një imazh sfondi përfaqësues.
Afati kohor horizontal i CSS dhe HTML
Krijuar nga i njohuri Envato Tuts+ , kjo vijë kohore paraqet një paraqitje horizontale me një seri kartash të pastra dhe bazike. Përdor ngjyra të sheshta dhe një vijë horizontale me një seri pikash të kuqe që shënojnë çdo interval.
Timeline CSS, HTML dhe slick.js
Tonet pastel në dizajnin e një linje kohore që bien në sy për prezantimin e çdo imazhi, duke përfaqësuar çdo interval kohor. Është kalimi midis çdo imazhi dhe intervali që e bën këtë linjë kohore vërtet të jashtëzakonshme.
Sekuenca kohore V1
Një vijë kohore që dallohet për butonat në secilën vijë vertikale të secilit interval për të lidhur një imazh sfondi në ekran të plotë sa herë që shtypim një të tillë.
Kronologjia horizontale HTML CSS
Nuk do të jeni në gjendje të klikoni askund në këtë vijë kohore, e cila shquhet për dizajnin e saj të mrekullueshëm, zgjedhjen e mençur të paletës së ngjyrave dhe një seri flluskash fjalimi për secilën vijë kohore. Nuk ka animacione, por vizualisht është shumë e këndshme.
Afati kohor i Codyhouse
Kjo vijë kohore , e prezantuar nga Codyhouse, paraqet një dizajn monokrom dhe është ndërtuar duke përdorur HTML, CSS dhe JavaScript. Ajo paraqet një vijë minimaliste me një seri pikash që veprojnë si intervale për të shkaktuar një animacion horizontal prej më pak se gjysmë sekonde kur klikohet. E thjeshtë, por shumë efektive.
Afati kohor horizontal
Një tjetër vijë kohore e krijuar me HTML, CSS dhe JavaScript. E karakterizuar nga dizajni i saj monokrom , ajo paraqet një paraqitje elegante me një prekje të gjelbër që nxjerr në pah çdo pikë që përfaqëson një interval kohor. Sa herë që klikohet një pikë, fillon një animacion i lëmuar me lëvizje anësore.
Afati kohor i paemëruar
E vetmja vijë kohore në listë është e zezë në sfond. Ngjyra të ndryshme përdoren më pas për të dalluar çdo vit dhe tekstin, si dhe kufijtë e tij. Një animacion i spikatur kalon midis çdo hyrjeje teksti.
Afati kohor
Kjo vijë kohore thekson që ngjyra e gjelbër të jetë plotësisht statike.
Një tjetër kronologji horizontale
Mund të vendosni një imazh pothuajse në ekran të plotë për një vijë kohore që dallohet për përdorimin e toneve blu dhe gri, plus një seri rrathësh që përfaqësojnë çdo vit.
Mos humbisni një seri tjetër menush në CSS dhe HTML.