29 yakakura dhizaini nguva muCSS uye nechidiki cheJavascript

Mupumburu wenguva

Iwo akatarwa kana nguva yacho ndeimwe yezvimwe zvinhu zvekuwedzera zvatinogona sangana muwebhusaiti kuratidza kufambira mberi kana shanduko mumakore ekambani kana kambani. Chirevo chemifananidzo chinoratidza zvakanaka kuti unoziva nekuchigadzira nehunyanzvi uye zvinhu zvinoonekwa, zvinogona kuratidza matanho anotorwa nesevhisi kana chigadzirwa nekufamba kwenguva.

Aya makumi maviri nemapfumbamwe enguva iwe aunowana pazasi ndeaya kubva pamatanho akatwasuka sezvingave nzvimbo dzakatwasuka. Iwe unowana iyo yakanakisa inokodzera zvaunoda kuti uzviwane pane peji rewebhu webhusaiti iwe rauri kugadzirira mutengi kana iwe pachako. Tiri kuenda pamwe nemuunganidzwa wenguva dzinonakidza kwazvo dzinotaridzika kwazvo.

Nguva nenguva nekupururudza

Mupumburu wenguva

Nguva yakatarwa iri muHTML, CSS, uye JavaScript kodhi kuti inyatsozvimisikidza se akanaka minimalist iyo inosimbisa tsvuku kune iyo runyorwa rwemakore kuruboshwe, uye nhema yeiyo font uye H2s. Chinhu chakanakisa nezveiyi mutsara wenguva ndeyekuti iwe sezvaunofamba-famba kuburikidza neiyo peji, iro shanduko yegore inozoitwa otomatiki. Kupedza kukuru, dhizaini uye mhedzisiro.

Nguva yenguva muCSS

CSS nguva yenguva zvivakwa

Iyi nhanho yenguva inoshandisa CSS kodhi kuti inyatokwanisa kuve yakagadzirirwa zvakanaka mune zvimwe zvayo zvivakwa. Iyo haina scrolling senge yapfuura, asi inoratidzirwa neakateedzana emabhokisi uye neruvara rwebhuruu kuti ipe kumwe kubata kwakanakisa uye kuwedzera kune iyo rondedzero yenguva dzeichi chinyorwa.

Inopindura timeline inotsvedza

Inopindura timeline inotsvedza

Iyi nguva yenguva inogadzirwa neiyo Swiper JS raibhurari kuisa HTML, CSS uye JavaScript kodhi. Iyo haina kupuruzira sezvatinofambira mberi kuburikidza newebhu peji, asi inodaro inoisa makore kurudyi uye bhatani ratingaende naro kune rinotevera, kunze kwekugona kushandisa pointer yegonzo kuenda kune rimwe gore. Hukuru kupora mune yega yega shanduko.

Yepamberi nguva

Yepamberi nguva

Iyi nguva yenguva inomira pakushandisa HTML, CSS uye JavaScript, kunze kwe enda mune monocolor, chaizvo mumatoni matsvuku. Iyo inozivikanwa zvakare nekushandiswa kwebhatani iyo inobvumidza kufambisira mberi kana kudzokera kumashure mune yakatarwa nguva yakatarwa neiyi yakanaka mhedzisiro kodhi kuve yakanyanyisa minimalist.

Nguva yakatarwa ine yakamisikidzwa musoro uye Flexbox

Nguva yakagadziriswa

HTML uye CSS kodhi yemusoro wakagadziriswa uyo icharamba yakatarwa panguva yatinoita kutsikisa mune peji. Yehunyengeri hukuru kuve wenguva yenguva yekufarira kukuru kune chero iyezvino musimudziri uyo anoda kumira kunze kweazvino webhu dhizaini zviyero.

Nguva yeprojekiti

Nguva yeprojekiti

Iyi nguva yenguva inoshandisa CSS neHTML kuratidza chakakosha nguva yekushandisa iyo chaiyo nguva yenguva yeprojekti. Sezvo isu tichipururudza inopfuura nemazuva evhiki, saka zvakakwana kuitisa izvi zvekudyidzana maturusi akagadzirwa nekambani pachayo.

Nemakore

Nemakore

Nguva yenguva mu HTML, CSS neJavaScript inomira kubva kune mamwe ese yemusoro wekuona. Uye ndezvekuti apo isu patinenge tichipururudza kuburikidza neyakagadzika nguva, nguva yega yega patinowana pikicha nyowani mutsetse wenguva, inozove iyo yekumberi mufananidzo wewebhu peji kwatakaisa kodhi iyi.

Hyperloop

Hyperloop

Hyperloopu inguva yenguva iyo zvirinani kumira kune dhizaini inoshandiswa uye zvekusagadzirisirwa chimwe chinhu kunze kweHTML neCSS. Iyo inoratidzirwa nekushandiswa kwemhando dzakasiyana saizi mufonti yezvinyorwa netambo yakatwasuka uye nhevedzano yemabhokisi anomaka imwe neimwe yakakosha nguva yenguva.

Vertical nguva

Vertical nguva

Nguva yenguva iyo Anozvitora kure nevamwe vese nekubata kwake kwekuona. Iyo ine chaiyo yazvino gradient kumashure mune dhizaini uye nhevedzano yemabhokisi anomaka imwe neimwe yeaya mapindiro. Yakarongwa muCSS uye HTML.

Nguva muFlexbox

Nguva yenguva flexbox

Imwe yenguva dzakanakisa dzakapedzwa uye izvo yakavakirwa pamakadhi kusanganisa zvese ruzivo rwatinoda panguva iyoyo yenguva. Zvakare zvakagadziriswa muHTML neCSS, inofanirwa kutariswa kuti makadhi ese anofanirwa kuve nehurefu hwakaenzana uye hupamhi kuverenga nzvimbo yezvikuru zvihombe.

Nguva yakatarwa muDIV

Nguva yechikamu div

A minimalist timeline mukugadzirwa uye izvo zvave zviripo yakagadzirirwa chete muHTML neCSS, saka kuitiswa kwayo kunogona kukurumidza kwazvo. Iyo yakanyatsokodzera kuratidza rondedzero yenguva mune iri ruzivo rwepakati nekuda kwayo monochrome kupera.

Nguva yakatarwa muCSS neHTML

CSS nguva

Unogona kuisa 400 × 300 saizi mifananidzo mune ino nguva yenguva yakasarudzika neruvara rwegirini rwemitsara uye zvinyorwa zvemazuva nemazuva. Iyo haina mifananidzo uye iri nani inoratidzirwa neyakareruka dhizaini pamatanho ese.

Makomenti uye mhinduro nguva

Nguva yekutaura

Nguva yenguva yakasiyana zvakanyanya kubva kune vamwe yekutendera isa makadhi nemifananidzo yevashandisi, kana zvirinani ndicho chinangwa pakutanga. Nemaonero akanaka ekuona, makadhi anoshandisa shading kune yakatarwa nguva yakatarwa pasina maficha.

Nguva yakatarwa mangwanani muHTML neCSS

Inopindura nguva

Nguva yakakwana yekuteerera izvozvo inozivikanwa nekuve HTML, CSS uye ipe yakaringana nyore asi yakanyanya nhare nguva.

Nguva UI

Nemakore

Iyi kodhi muHTML neCSS inoshanda zvakakwana paridza zuva rekushanda yekudzidzira. Inoteerera nemusoro wemusoro uye dzakateedzana mabhatani anozviratidza nenzira yakajeka uye yakachena mune inoonekwa.

Nguva yenguva muCSS chete

CSS Nguva

Iyi nguva yenguva inozivikanwa nekuve muCSS uye ne dzakasarudzwa-zvakanaka mhando dzakateedzana: dzvuku uye girini. Girinhi yekuvhara peji rese zvizere, chena kumavara uye kupatsanura mitsara, uye tsvuku kusiyanisa nguva yenguva yatiri. Tinogona kudzvanya pane imwe neimwe nguva kuti tiise nebhokisi rinoikomberedza uye nekuritarisisa.

Inopindura nguva yakatarwa V3

Anoteerera Timeline V3

Yekutanga yenguva yakatwasuka mune yakatarwa muHTML, CSS uye JavaScript. Inoonekwa inomiririra iyo kushandiswa kwemavara matema nechena kuisa mutsetse wakakomberedzwa neakateedzana mapoinzi. Chikamu chega chega chinoratidzwa nehuremu hwakakura mumanyuko uye mune zvemukati zvinyorwa.

Nguva yakatarwa muvara

Yakagadzirwa

Imwe yenguva yakatwasuka akakwirira ekuona mhando pane izvo zvinyorwa. Nguva yekudyidzana inowirirana ine hunyengeri uye inoratidzwa nemifananidzo yekupa ruzivo rwakakura mushandisi nguva imwe neimwe yenguva dzakamanikidzwa. Yakagadzirwa ne HTML CSS / Sass uye JavaScript / TypeScript (jquery.js).

Inopindura nhoroondo yenguva

Inopindura nyaya

Nguva yakakwana ye ratidza zviitiko zvakasiyana mumifananidzo yenguva yakatarwa munhoroondo. Iyo yakatwasuka uye inopindura kuve yakagadziriswa muHTML, CSS uye JavaScript.

Nguva yeboka

Nguva yeboka

Iyi nguva yenguva inomira shanduko yakanaka inoitwa neiyo yakatenderera mifananidzo. Yevara rakakura uye dhizaini dhizaini kuratidza imwe yenguva dzenguva. Iri muHTML, CSS neJavaScript kuratidza makadhi akateedzana pane mufananidzo wemumiriri.

Horizontal CSS uye HTML nguva

horizontal envato

Yakagadzirwa naiye inozivikanwa Envato Tuts +, isu tinoratidzwa neye yakatenderera nguva yakateedzana nemakadhi akachena uye akakosha mukugadzirwa. Flat mavara uye yakatwasuka mutsara neakateedzana matsvuku madhi anopindirana imwe neimwe nguva.

Nguva yenguva CSS, HTML uye slick.js 

Pastel nguva

Pastel toni mune dhizaini yenguva yenguva iyo inomiririra kuratidzwa kweumwe neumwe wemifananidzo kuratidza nguva imwe neimwe yenguva. Iko shanduko pakati peumwe neumwe wemifananidzo uye zvikamu zvinoita kuti iyi timeline iratidzike.

Nguva yakateedzana V1

Nguva yakateedzana

Nguva yakatarwa mabhatani pamutsetse wega wega yenguva yega yega yekubatanidza yakazara skrini skrini kumashure nguva dzese patinodzvanya imwe.

Yakaenzana timeline HTML CSS

Nguva yenguva HR

Iwe haugone kudzvanya chero kupi pane ino nguva yenguva iyo inosimbiswa ne dhizaini yakasarudzika nesarudzo yehungwaru yeparavara uye nhevedzano yemasangweji eimwe neimwe yenguva. Iko hakuna mifananidzo, asi zvinoonekwa inofadza kwazvo kune ziso.

Nguva Codyhouse

Nguva yakatarwa CodyHouse

Iyi nguva yenguva yakapihwa naCodyhouse irimwe ruvara mukugadzira uye inovandudzwa muHTML, CSS uye JavaScript. Inopa mutsara we minimalist uine akateedzana mapoinzi sezvikamu zvichadzvanywa uye zvinokonzeresa kutenderera kweanopfuurisa isingasviki hafu yechipiri. Zvakareruka, asi zvine simba.

Horizontal timeline

Horizontal timeline

Mumwe mutsara wenguva wakaitwa muHTML, CSS, uye JavaScript. Inoratidzirwa neiyo chete ruvara, Ine dhizaini yakashongedzwa ine ruvara rwegirini kuisa tambo pane yega yega mapoinzi anomiririra nguva yenguva. Nguva dzese dzatinodzvanya imwe, yakatetepa padivi yeopopayi inotanga.

Nguva isina kutaurwa

Nguva isina kutaurwa

Iyo chete nhema nguva kubva pazasi runyorwa. Ipapo anoshandisa mavara akasiyana kusiyanisa gore rega rega uye zvinyorwa panguva imwe chete nemiganhu yayo. Iyo ine yakatanhamara yeanopisa kupfuudza pakati peimwe neimwe yezvinyorwa.

Nguva

Nguva

Iyi nhanho inoisa madudziro eruvara rwegirini kumira zvachose.

Imwe yakatenderera nguva

Mumwe mutsara wenguva

Zvinogona kuva isa mufananidzo padyo nechizere skrini yenguva yenguva inomiririra kushandiswa kwebhuruu uye grey, uyezve nhevedzano yedenderedzwa inomiririra gore rega.

Usapotsa imwe nhevedzano yemamenu muCSS neHTML.


Siya yako yekutaura

Your kero e havazobvumirwi ichibudiswa. Raida minda anozivikanwa ne *

*

*

  1. Inotarisira iyo data: Miguel Ángel Gatón
  2. Chinangwa cheiyo data: Kudzora SPAM, manejimendi manejimendi.
  3. Legitimation: Kubvuma kwako
  4. Kutaurirana kwedata
  5. Dhata yekuchengetedza: Dhatabhesi inobatwa neOccentus Networks (EU)
  6. Kodzero: Panguva ipi neipi iwe unogona kudzora, kupora uye kudzima ruzivo rwako