29 frábærar hönnunartímar í CSS og með smá Javascript

Flettu tímalínuna

Tímalínurnar eða tímalínurnar eru annar aukaþátturinn sem við getum fella inn á vefsíðu til að sýna framfarir eða þróun á árum fyrirtækis eða fyrirtækis. Vel sjónræn myndræn tjáning sem að vita hvernig á að setja það glæsilega saman með leturgerð og sjónrænum þáttum getur sýnt skrefin sem þjónusta eða vara tekur í tímans rás.

Þessar 29 tímalínur sem þú munt finna hér að neðan eru frá lóðréttum tímalínum eins og láréttir væru. Þú finnur það besta sem hentar þínum þörfum til að finna það á síðu vefsíðunnar sem þú ert að þróa fyrir viðskiptavin eða sjálfan þig. Við erum að fara með safn mjög áhugaverðra tímalína sem eru mjög sjónrænt ánægjulegar.

Tímalína með því að fletta

Flettu tímalínuna

Tímalína sem er í HTML, CSS og JavaScript kóða til að stilla sig tignarlega sem góður lægstur sem setur hreiminn á rauðan fyrir áralistann til vinstri og á svartan fyrir letrið og H2s. Það besta við þessa tímalínu er að þegar þú flettir í gegnum síðuna verður árbreytingin sjálfkrafa gerð. Frábær frágangur, hönnun og árangur.

Tímalína í CSS

Eiginleikar CSS tímalína

Þessi tímalína notar CSS kóða til að geta jafnvel verið rétt stilltur í sumum eiginleikum þess. Það hefur ekki flett eins og sá fyrri, en það einkennist af röð af kössum og bláum lit til að gefa því annan mjög glæsilegan blæ og bæta við lista yfir tímalínur þessarar útgáfu.

Móttækilegur renna tímalínu

Móttækilegur renna tímalínu

Þessi tímalína er gerð með Swiper JS bókasafninu til að innihalda HTML, CSS og JavaScript kóða. Það hefur ekki flett þegar við komumst í gegnum vefsíðuna, en það gerir það setur árin á hægri hlið og hnapp sem við getum farið á næsta, fyrir utan að geta notað músarbendilinn til að fara í ákveðið ár. Frábært fjör í hverri umbreytingunni.

Háþróaður tímalína

Háþróaður tímalína

Þessi tímalína stendur upp úr með því að nota HTML, CSS og JavaScript, fyrir utan farðu í einlitinn, einmitt í rauðu tónum. Það einkennist einnig af því að nota hnappinn sem gerir þér kleift að komast áfram eða fara aftur í tímalínuna sem merktur er með þessum frábæra árangurskóða til að vera frekar lægstur.

Tímalína með föstum haus og Flexbox

Tímalína föst

HTML og CSS kóða fyrir fastan haus sem það verður fastur á því augnabliki sem við erum að fletta á síðunni. Af mikilli næmni að vera tímalína sem hefur mikinn áhuga fyrir alla núverandi verktaka sem vilja láta draga sig í ljós með núverandi stöðlum fyrir vefhönnun.

Tímalína verkefnis

Tímalína verkefnis

Þessi tímalína notar CSS og HTML til að kynna mikilvæga tímalínu til að nota fyrir það tiltekna tímabil fyrir verkefni. Þegar við flettum fer það í gegnum daga vikunnar, svo það er tilvalið að innleiða það fyrir samstarfsverkfæri sem fyrirtækið hefur búið til sjálft.

Timeline

Timeline

Tímalína í HTML, CSS og JavaScript sem sker sig úr öðrum fyrir sjónrænt þema. Og það er að þegar við flettum í gegnum lóðréttu tímalínuna, í hvert skipti sem við finnum nýja ljósmynd á tímalínunni, verður hún bakgrunnsmynd vefsíðunnar þar sem við höfum sett þennan kóða.

Hyperloop

Hyperloop

Hyperloopu er tímalína sem stendur fremur fyrir hönnuninni sem notuð er og fyrir að vera forritað ekkert meira en í HTML og CSS. Það einkennist af því að nota mismunandi stærðir í leturgerð textans með lóðréttri línu og röð af kössum sem merkja hvert mikilvægt augnablik tímalínunnar.

Lóðrétt tímalína

Lóðrétt tímalína

Tímalínubil sem fjarlægir sig hinum frá sjónrænum snertingum. Það hefur mjög núverandi hallandi bakgrunn í hönnuninni og röð af kössum sem merkja hvert þessara millibila. Forritað í CSS og HTML.

Tímalína í Flexbox

Tímalína flexbox

Ein besta tímasetningin og það er byggt á kortum að taka með allar upplýsingar sem við þurfum fyrir það tímabil. Einnig þróað í HTML og CSS, verður að taka tillit til þess að öll kortin verða að hafa sömu hæð og breidd til að reikna pláss fyrir stærri skjái.

Tímalína í DIV

Tímalína div

Lágmarks tímalína í hönnun og það hefur verið þróað aðeins í HTML og CSS, þannig að framkvæmd þess getur verið mjög hröð. Það hentar fullkomlega til að tjá tímalínu í upplýsingamiðli vegna einlita frágangs.

Tímalína í CSS og HTML

CSS tímalína

Þú getur sett 400 × 300 stærðar myndir í þessari tímalínu sem aðgreindist af grænum lit línanna og texta dagsetninga og daga. Það hefur engar hreyfimyndir og einkennist frekar af einfaldri hönnun á öllum stigum.

Athugasemdir og tímalína viðbragða

Athugasemdir við tímalínuna

Tímalína sem er mjög frábrugðin hinum til að leyfa setja kort með myndum notenda, eða að minnsta kosti er það ætlunin í fyrstu. Með frábærum sjónrænum stíl nota kortin skyggingu fyrir frekar flata tímalínu án hreyfimynda.

Tímalínumorgunn í HTML og CSS

Móttækileg tímalína

Fullkomin tímalína til að bregðast við því það einkennist af því að vera HTML, CSS og bjóða upp á nokkuð einfalda en mjög hreyfanlega tímalínu.

HÍ tímalínu

Timeline

Þessi kóði í HTML og CSS virkar fullkomlega fyrir kynna vinnudaginn af líkamsþjálfun. Það er móttækilegt með hausmynd og röð hnappa sem sýna það á mjög skýran og hreinan hátt í sjónrænum þætti.

Aðeins tímalína í CSS

Tímalína CSS

Þessi tímalína einkennist af því að vera í CSS og af a vel valin litasería: rauð og græn. Grænn til að hylja alla síðuna að fullu, hvítur fyrir texta og deililínur og rauður til aðgreiningar á því bili sem við erum í Við getum smellt á hvert bil til að setja það með kassa sem umlykur það og dregur það fram.

Móttækileg tímalína V3

Móttækileg tímalína V3

Fyrsta lárétta tímalínan á listanum í HTML, CSS og JavaScript. Sýnir sig sjónrænt fyrir notkun svarta og gráa lita að setja lárétta línu með röð punkta. Hvert bil er auðkennt með meiri þyngd í uppruna og í textainnihaldi.

Tímalína staðsett í lit.

Hreiður

Ein af láréttu tímalínunum hæstu sjónrænu gæði á listanum. Vel gagnvirk tímalína með mjög lúmskum og vel settum hreyfimyndum til að bjóða upp á mikla notendaupplifun í hvert skipti sem stutt er á eitt tímabilsins. Það er búið til með HTML CSS / Sass og JavaScript / TypeScript (jquery.js).

Móttækileg tímalína sögu

Móttækileg saga

Fullkomin tímalína fyrir sýna mismunandi atburði í myndum tíma rifa í sögunni. Það er lárétt og móttækilegt að hafa verið þróuð í HTML, CSS og JavaScript.

Hóptímalína

Tímalínuhópur

Þessi tímalína stendur upp úr fyrir góð umskipti framkvæmt með láréttu fjöri. Með mikinn lit og stórkostlega hönnun til að draga fram hvert tímabil. Það er í HTML, CSS og JavaScript að setja fram röð af kortum ofan á fulltrúa bakgrunnsmynd.

Lárétt CSS og HTML tímalína

Lárétt envato

Gerð af honum þekkt Envato Tuts +, okkur er kynnt lárétt tímalína með röð af hreinum og grunnkortum í hönnun. Flatir litir og lárétt lína með röð rauðra punkta sem fléttast saman hvert bil.

Tímalína CSS, HTML og slick.js 

Pastel tímalína

Pasteltónar í hönnuninni fyrir tímalínu sem stendur upp úr fyrir framsetningu hverrar myndar sýnir hvert tímabil. Það eru umskiptin á milli hverrar myndar og bila sem gera þessa tímalínu áberandi.

Tímalínuröð V1

Tímalínuröð

Tímalína sem stendur upp úr fyrir hnappa á hverri lóðréttri línu af hverju bili til að tengja bakgrunnsmynd í fullri skjá í hvert skipti sem við ýtum á eina.

Lárétt HTML CSS tímalína

Tímalína HR

Þú munt ekki geta smellt hvar sem er á þessari tímalínu sem er auðkenndur með a stórkostleg hönnun með skynsamlegu vali á litavali og röð af samlokum fyrir hverja tímalínuna. Engar hreyfimyndir eru til, en sjónrænt er það mjög ánægjulegt fyrir augað.

Tímalína Codyhouse

Tímalína CodyHouse

Þessi tímalína fram af Codyhouse er einn litur í hönnun og er þróað í HTML, CSS og JavaScript. Það sýnir lægstur línu með röð punkta sem smellt er á millibili og veldur láréttu fjöri innan við hálfa sekúndu. Einfalt, en öflugt.

Lárétt tímalína

Lárétt tímalína

Önnur tímalína gerð í HTML, CSS og JavaScript. Einkennist af einum lit., inniheldur glæsilegan hönnun með grænum lit til að setja blúndur á hvern punkt sem táknar tímabilin. Í hvert skipti sem við ýtum á einn byrjar mjög slétt hliðar fjör.

Nafnlaus tímalína

Nafnlaus tímalína

Eina svarta tímalínan frá neðsta listanum. Svo notar hann mismunandi litum til aðgreiningar á hverju ári og texta á sama tíma og takmörk þess. Það hefur framúrskarandi fjör til að fara á milli hvers texta.

Tímalína

Tímalína

Þessi tímalína setur hreimurinn á litnum grænum að vera algerlega kyrrstæður.

Önnur lárétt tímalína

Önnur tímalína

Það getur verið setja mynd nálægt fullum skjá fyrir tímalínu sem sker sig úr fyrir notkun á bláum og gráum plús röð af hringjum sem tákna hvert ár.

Ekki missa af önnur röð af valmyndum í CSS og HTML.


Innihald greinarinnar fylgir meginreglum okkar um siðareglur ritstjórnar. Til að tilkynna um villu smelltu hér.

Vertu fyrstur til að tjá

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.