29 kalendarju ta 'disinn kbir fis-CSS u bi ftit Javascript

Skrollja l-kalendarju

L-iskedi jew l-iskedi huma ieħor mill-elementi żejda li nistgħu daħħal ġo websajt biex turi progress jew evoluzzjoni fi snin ta 'kumpanija jew kumpanija. Espressjoni grafika viżiva sew li tkun taf kif tikkomponiha b'mod eleganti b'tipografija u elementi viżwali, tista 'turi l-passi meħuda minn servizz jew prodott matul iż-żmien.

Dawn id-29 kalendarju li ssib hawn taħt huma minn skedi ta ’żmien vertikali kif ikunu l-orizzontali. Issib l-aħjar wieħed li jaqbel mal-bżonnijiet tiegħek biex issibha fuq paġna tal-websajt li qed tiżviluppa għal klijent jew għalik innifsek. Aħna sejrin b'ġabra ta 'skedi ta' żmien interessanti ħafna li huma viżwalment pjaċevoli.

Kronoloġija billi tiskrollja

Skrollja l-kalendarju

Kronoloġija li tinsab f'kodiċi HTML, CSS, u JavaScript biex tpoġġi lilha nnifisha b'mod grazzjuż bħala minimalista tajjeb li jpoġġi l-aċċent fuq aħmar għal-lista ta 'snin fuq in-naħa tax-xellug, u fuq iswed għat-tipa u l-H2s. L-aħjar ħaġa dwar din il-kalendarju hija li hekk kif tiskrollja l-paġna, il-bidla fis-sena ssir awtomatikament. Finitura, disinn u riżultat mill-aqwa.

Kronoloġija fis-CSS

Propjetajiet tal-kalendarju CSS

Din il-kalendarju tuża kodiċi CSS biex saħansitra tkun tista 'tiġi kkonfigurata sew f'xi wħud mill-proprjetajiet tagħha. Ma għandux scrolling bħal dik ta ’qabel, iżda hija kkaratterizzata minn sensiela ta’ kaxxi u kulur blu biex tagħtih mess ieħor eleganti ħafna u żżid mal-lista tal-iskedi ta ’żmien ta’ din il-pubblikazzjoni.

Slider tal-kalendarju li jirrispondi

Slider tal-kalendarju li jirrispondi

Din il-kalendarju hija magħmula bil-librerija Swiper JS biex tinkludi kodiċi HTML, CSS u JavaScript. M'għandux scrolling hekk kif nimxu 'l quddiem fuq il-paġna tal-web, imma għandu ipoġġi s-snin fuq in-naħa tal-lemin u buttuna li biha nistgħu mmorru għal dik li jmiss, apparti li nkunu nistgħu nużaw il-mouse pointer biex immorru għal sena speċifika. Animazzjoni kbira f'kull waħda mit-transizzjonijiet.

Kronoloġija avvanzata

Kronoloġija avvanzata

Din il-kalendarju tispikka għall-użu ta 'HTML, CSS u JavaScript, apparti minn mur fil-monokolur, preċiżament fit-toni ħomor. Huwa kkaratterizzat ukoll mill-użu ta 'buttuna li jippermettilek tavvanza jew tmur lura fil-kalendarju mmarkat minn dan il-kodiċi ta' riżultat kbir biex tkun pjuttost minimalista.

Kronoloġija b'intestatura fissa u Flexbox

Kronoloġija fissa

Kodiċi HTML u CSS għal header fiss li se tibqa 'fissa fil-mument li nagħmlu scrolling fil-paġna. Ta 'sottilezza kbira li tkun kalendarju ta' interess kbir għal kwalunkwe żviluppatur attwali li jixtieq jispikka mill-istandards attwali tad-disinn tal-web.

Kronoloġija tal-proġett

Kronoloġija tal-proġett

Din il-kalendarju tuża CSS u HTML biex tippreżenta kalendarju importanti li tuża għaliha dak il-perjodu speċifiku ta 'żmien għal proġett. Hekk kif qed niskrolljawh jgħaddi mill-ġranet tal-ġimgħa, allura huwa perfett li timplimentah għal għodod kollaborattivi magħmula mill-kumpanija nnifisha.

Kronoloġija

Kronoloġija

Kronoloġija fi HTML, CSS u JavaScript li jispikkaw mill-bqija għat-tema viżiva. U huwa li hekk kif niskrolljaw il-kalendarju vertikali, kull darba li nsibu ritratt ġdid fil-kalendarju, se jsir l-immaġni fl-isfond tal-paġna tal-web fejn poġġejna dan il-kodiċi.

Hyperloop

Hyperloop

Hyperloopu huwa kalendarju li pjuttost jispikka għad-disinn użat u talli ma tkun ipprogrammat xejn ħlief f'HTML u CSS. Huwa kkaratterizzat mill-użu ta 'daqsijiet differenti fit-tipa tat-test b'linja vertikali u serje ta' kaxxi li jimmarkaw kull mument importanti tal-kalendarju.

Kronoloġija vertikali

Kronoloġija vertikali

Kronoloġija ta 'intervall li tbiegħed mill-bqija bil-mess viżwali tiegħu. Għandu sfond ta 'gradjent attwali ħafna fid-disinn u serje ta' kaxxi li jimmarkaw kull wieħed minn dawk l-intervalli. Ipprogrammat fis-CSS u l-HTML.

Kronoloġija fil-Flexbox

Kaxxa tal-ħin flexbox

Waħda mill-aħjar skedi ta 'żmien lesti u dik hija bbażata fuq il-karti biex tinkludi l-informazzjoni kollha li għandna bżonn għal dak l-intervall ta 'ħin. Żviluppat ukoll fl-HTML u CSS, għandu jittieħed kont li l-karti kollha għandu jkollhom l-istess għoli u wisa 'biex jikkalkulaw l-ispazju għal skrins akbar.

Kronoloġija f'DIV

Kronoloġija div

Kronoloġija minimalista fid-disinn u dik kienet żviluppati biss fl-HTML u CSS, għalhekk l-implimentazzjoni tiegħu tista 'tkun mgħaġġla ħafna. Huwa adattat perfettament biex jesprimi skeda ta 'żmien f'mezz ta' informazzjoni minħabba l-finitura monokroma tiegħu.

Kronoloġija fis-CSS u l-HTML

Kronoloġija CSS

Tista 'tpoġġi Stampi ta 'daqs 400 × 300 f'dan il-kalendarju distint mill-kulur aħdar tal-linji u t-test tad-dati u l-ġranet. M'għandux animazzjonijiet u huwa pjuttost ikkaratterizzat mid-disinn sempliċi tiegħu fil-livelli kollha.

Kummenti u kalendarju ta ’feedback

Kummenti dwar il-kalendarju

Kronoloġija differenti ħafna mill-oħrajn biex tippermetti poġġi karti bir-ritratti tal-utenti, jew għallinqas dik hija l-intenzjoni għall-ewwel. Bi stil viżiv mill-aqwa, il-karti jużaw dell għal skeda ta 'żmien pjuttost ċatta mingħajr animazzjonijiet.

Kronoloġija filgħodu f'HTML u CSS

Kronoloġija li tirrispondi

Kronoloġija perfetta għal dak li jirrispondi huwa kkaratterizzat billi huwa HTML, CSS u joffru kalendarju pjuttost sempliċi imma mobbli ħafna.

Kronoloġija UI

Kronoloġija

Dan il-kodiċi f'HTML u CSS jaħdem perfettament għal tippreżenta l-ġurnata tax-xogħol ta 'workout. Huwa jirreaġixxi b'immaġni ta 'header u serje ta' buttuni li juruha b'mod ċar ħafna u nadif fl-aspett viżiv.

Kronoloġija fis-CSS biss

Kronoloġija CSS

Din l-iskeda ta 'żmien hija kkaratterizzata minn li qiegħda f' CSS u minn serje ta 'kuluri magħżula sew: aħmar u aħdar. Aħdar biex ikopri l-paġna kollha kompletament, abjad għat-test u l-linji diviżorji, u aħmar biex tiddistingwi l-intervall tal-ħin li ninsabu fih. Nistgħu nikklikkjaw fuq kull intervall biex inpoġġuh b'kaxxa li ddawwarha u tenfasizzaha.

Kronoloġija responsiva V3

Kronoloġija Responsiva V3

L-ewwel waħda mill-iskedi tal-ħin orizzontali fil-lista f'HTML, CSS u JavaScript. Jidher viżwalment għall - użu ta 'kuluri suwed u griżi biex tqiegħed linja orizzontali b'serje ta 'punti. Kull intervall huwa enfasizzat b'aktar piż fis-sors u fil-kontenut tat-test.

Kronoloġija mqiegħda bil-kulur

Imbejta

Waħda mill-iskedi orizzontali l-ogħla kwalità viżiva fuq il-lista. Kronoloġija interattiva sew b'animazzjonijiet sottili ħafna u ppreżentati tajjeb biex toffri esperjenza ta 'utent kbira kull darba li jiġi ppressat wieħed mill-intervalli ta' ħin. Huwa magħmul bi HTML CSS / Sass u JavaScript / TypeScript (jquery.js).

Kronoloġija tal-istorja li tirrispondi

Storja li tirrispondi

Kronoloġija perfetta għal juru l-avvenimenti differenti fl-istampi ta 'sensiela ta' ħin fl-istorja. Huwa orizzontali u reattiv li ġie żviluppat fl-HTML, CSS u JavaScript.

Kronoloġija tal-grupp

Grupp tal-kalendarju

Din il-kalendarju tispikka għal transizzjoni tajba imwettqa b’animazzjoni orizzontali. Ta 'kulur kbir u disinn exquisite biex jenfasizza kull intervall ta' ħin. Huwa fl-HTML, CSS, u JavaScript li tippreżenta serje ta 'karti miksija fuq stampa rappreżentattiva fl-isfond.

Kronoloġija orizzontali CSS u HTML

Envato orizzontali

Magħmul minnu magħruf Envato Tuts +, aħna ppreżentati b'kronoloġija orizzontali b'serje ta 'karti nodfa u bażiċi fid-disinn. Kuluri ċatti u linja orizzontali b'serje ta 'tikek ħomor li jorbtu ma' xulxin kull intervall.

Kronoloġija CSS, HTML u slick.js 

Kronoloġija pastell

Toni pastell fid-disinn għal kalendarju li jispikka għall-preżentazzjoni ta 'kull waħda mix-xbihat turi kull intervall ta 'ħin. Hija t-transizzjoni bejn kull waħda mill-istampi u l-intervalli li tagħmel din il-kalendarju tispikka.

Sekwenza tal-kalendarju V1

Sekwenza tal-kalendarju

Kronoloġija li tispikka għaliha buttuni fuq kull linja vertikali ta 'kull intervall biex torbot immaġni ta' sfond full screen kull darba li nagħfsu fuq waħda.

Kronoloġija orizzontali HTML CSS

Kronoloġija HR

Ma tkunx tista 'tikklikkja kullimkien fuq din il-kalendarju li huwa enfasizzat minn disinn exquisite bl-għażla għaqlija tal-paletta tal-kuluri u serje ta 'sandwiches għal kull skeda ta' żmien. M'hemm l-ebda animazzjonijiet, iżda viżwalment hija pjaċir ħafna għall-għajn.

Kronoloġija Codyhouse

Kronoloġija CodyHouse

Din il-kalendarju ippreżentat minn Codyhouse huwa ta 'kulur wieħed fid-disinn u huwa żviluppat fl-HTML, CSS u JavaScript. Jippreżenta linja minimalista b'serje ta 'punti bħala intervalli li għandhom jiġu kklikkjati u tikkawża l-animazzjoni orizzontali ta' inqas minn nofs sekonda. Sempliċi, imma qawwija.

Kronoloġija orizzontali

Kronoloġija orizzontali

Kronoloġija oħra magħmula f'HTML, CSS, u JavaScript. Kkaratterizzat bil-kulur wieħed, fih disinn eleganti b'kulur aħdar biex tpoġġi l-bizzilla fuq kull wieħed mill-punti li jirrappreżentaw l-intervalli tal-ħin. Kull darba li nagħfsu waħda, tibda animazzjoni tal-ġenb lixxa ħafna.

Kronoloġija bla isem

Kronoloġija bla isem

L-unika kalendarju iswed elenkat fil-qiegħ. Imbagħad juża kuluri differenti biex tiddifferenzja kull sena u t-test fl-istess ħin mal-limiti tagħha. Għandha animazzjoni prominenti biex tgħaddi bejn kull test.

Kronoloġija

Kronoloġija

Din il-kalendarju tpoġġi l-aċċent fuq il-kulur aħdar li tkun totalment statika.

Kronoloġija orizzontali oħra

Kronoloġija oħra

Hija tista ' poġġi stampa viċin l-iskrin sħiħ għal kalendarju li jispikka għall-użu ta 'blu u griż flimkien ma' serje ta 'ċrieki li jirrappreżentaw kull sena.

Titlifx serje oħra ta 'menus fis-CSS u l-HTML.


Il-kontenut tal-artikolu jaderixxi mal-prinċipji tagħna ta ' etika editorjali. Biex tirrapporta żball ikklikkja hawn.

Kun l-ewwel li tikkummenta

Ħalli l-kumment tiegħek

Your email address mhux se jkun ippubblikat. oqsma meħtieġa huma mmarkati bl *

*

*

  1. Responsabbli għad-dejta: Miguel Ángel Gatón
  2. Għan tad-dejta: Kontroll SPAM, ġestjoni tal-kummenti.
  3. Leġittimazzjoni: Il-kunsens tiegħek
  4. Komunikazzjoni tad-dejta: Id-dejta ma tiġix ikkomunikata lil partijiet terzi ħlief b'obbligu legali.
  5. Ħażna tad-dejta: Bażi tad-dejta ospitata minn Occentus Networks (UE)
  6. Drittijiet: Fi kwalunkwe ħin tista 'tillimita, tirkupra u tħassar l-informazzjoni tiegħek.