CSS-Doodle ƒe dɔwɔwɔ

CSS-Doodle nye nyatakakadzraɖoƒe ƒe akpa sẽŋu aɖe si na be dɔwɔlawo kple aɖaŋuwɔlawo te ŋu wɔa nukpɔkpɔ ƒe nɔnɔme wɔnukuwo, siwo wotu ɖe grid dzi kple nutata siwo wowɔna to CSS ƒe nyagɔmeɖegbalẽ dzadzɛ zazã me le HTML ƒe akpa ɖeka si wowɔ ɖe ɖoɖo nu me. Eɖanye be èle nutovɛ ƒe axa siwo dzi woɖoa nu ɖo, megbenya siwo wɔa dɔ, alo nyatakakawo ƒe nɔnɔmetata siwo trɔna tum o, CSS-Doodle trɔa alesi ƒuƒoƒowo te ɖe ŋgɔgbe-nuwuwu ƒe dɔwɔwɔ ƒe ɖoɖowo ŋu.

Nuka Tututue Nye CSS-Doodle Kple Aleke Wòwɔa Dɔe?

CSS-Doodle nye JavaScript agbalẽdzraɖoƒe si le ʋuʋu ɖi si Yuan Chuan wɔ si tsɔa HTML ƒe akpa si wowɔ ɖe ɖoɖo nu — — dea wò web dɔwɔwɔwo me. Le akpa sia me la, èŋlɔa se siwo le abe CSS ene siwo agbalẽdzraɖoƒea ɖe gɔme be woawɔ lãmenugbagbeviwo ƒe ƒuƒoƒo, siwo dometɔ ɖesiaɖe ateŋu awɔ atsyã le wo ɖokui si to tiatiawɔla ƒe nyagɔmeɖegbalẽ tɔxɛ kple ɖoɖowɔɖi ƒe dɔwɔwɔwo zazã me.

Nu vevi la wɔa dɔ to vɔvɔli DOM grid ɖoɖo dzi. Ne web-kpɔkplɔa do go ƒe akpa aɖe la, agbalẽdzraɖoƒea ma teƒe si woɖo la ɖe lãmenugbagbeviwo ƒe ƒuƒoƒo si woateŋu aɖo me eye wòwɔa wò CSS sewo ŋudɔ le lãmenugbagbevi ɖesiaɖe si le ʋuƒoa me. Nusi na wòɖe dzesi enye eƒe kpekpeɖeŋu si wotu ɖe eme na pseudo-random functions abe @r(), @p(), kple @pick(), siwo ɖea mɔ na lãmenugbagbevi ɖekaɖekawo be woaxɔ asixɔxɔ tɔxɛwo JavaScript ƒe fli ɖeka manɔmee tso developer ƒe akpa dzi.

Gbegɔmeɖeɖe ƒe mɔ̃a le tẽ: ɖe CSS ememenyawo me, wɔ vɔvɔli DOM grid, bu nuku siwo wowɔ le vome, tsɔ akɔntabubu ƒe atsyãwo de lãmenugbagbevi ɖesiaɖe me, eye nàta emetsonu mamlɛtɔ. Tɔtrɔwo dzɔna le nuwɔna me — yɔ update() mɔnu eye tɔtrɔ yeye si woƒã la ɖea nu enumake, si wɔe be CSS-Doodle sɔ nyuie na nuwɔwɔ kple nɔnɔmetata ƒe ɖoɖo siwo me agbe le.

Nukae Nye Nu Vevi Siwo Na CSS-Doodle To Etɔxɛ?

CSS-Doodle ƒe xɔtuɖaŋu gɔmesese fia be woade dzesi ƒuƒoƒo etɔ̃ siwo do ƒome kple wo nɔewo siwo wɔa dɔ ɖekae tsɔ wɔa generative outputs:

ƒe nyawo
• Grid System: Woɖe egɔme to grid nɔnɔme dzi, esia kpɔa fliwo kple sɔtiwo dzi (e.g., grid="10x10"), si fiaa lãmenugbagbevi agbɔsɔsɔme si doodle la ɖena kple alesi woma wo le teƒe nu.
• Tiatia Tɔxɛwo: CSS-Doodle to tiatiawɔnuwo abe :nth-of-type() kekeɖenuwo, @nth, kple @row/@col siwo tɔa ŋku lãmenugbagbeviwo le woƒe nɔƒe nu le grid la me hena atsyã si sɔ pɛpɛpɛ, si wotu ɖe se dzi.
• Dɔwɔwɔ siwo wowɔna le vome: Dɔwɔwɔ siwo wotu ɖe eme abe @r(min, max) na xexlẽdzesiwo ƒe didimewo kple @pick(a, b, c) na asixɔxɔ ƒe xexlẽdzesiwo na be woate ŋu awɔ dzidziɖedzi ƒe nɔnɔme siwo megbugbɔna o le kɔda ƒe fli ʋee aɖewo ko me.
• Animation kple Transition Support: Esi CSS-Doodle ɖea CSS ŋutɔŋutɔ dona ta la, CSS ƒe nɔnɔmetata gbãtɔwo, keyframes, transitions, kple custom properties katã wɔa dɔ tɔtrɔ aɖeke manɔmee, si wɔnɛ be woate ŋu awɔ fluid, looping visual compositions.
• Tɔtrɔ ƒe Ðoɖo: CSS ƒe nɔnɔme tɔxɛwo kple @var() dɔwɔwɔ na aɖaŋuwɔlawo wɔa parameter na doodles, wowɔa tanya-si nya alo zãla-teŋu ƒe emetsonuwo kple agbagbadzedze suetɔ kekeake.

Grid scaffold si dzi wokpɔna ƒe ƒuƒoƒo sia kple lãmenugbagbevi ɖesiaɖe ƒe atsyã si wowɔ le vome enye nusi ma CSS-Doodle tso SVG generators alo canvas-based tools gbɔ — emetsonua nye gbeƒãɖeɖe, gɔmesese, eye woateŋu awɔ atsyã bliboe to CSS tooling deŋgɔ dzi.

Aleke CSS-Doodle Sɔ Kple Dzidzime ƒe Aɖaŋuɖoɖo Mɔnu Bubuwo?

Zi geɖe la, generative art le browserwo me nɔa te ɖe HTML5 Canvas API alo SVG ƒe asitɔtrɔ to JavaScript ƒe ɖoɖowo dzi. Togbɔ be ŋusẽ le mɔnu siawo ŋu hã la, ebia JavaScript ŋuti sidzedze vevi aɖe, gɔmeɖeɖe ƒe ʋuƒo siwo hiã vevie, kple asi ƒe nɔnɔme dzikpɔkpɔ. CSS-Doodle ƒoa asa na emawo katã to eƒe nɔƒe nɔnɔ le gbeƒãɖeɖe ƒe kpɔɖeŋu si aɖaŋuwɔlawo nya xoxo la me.

Ne wotsɔe sɔ kple agbalẽdzraɖoƒe siwo wotu ɖe Canvas dzi abe p5.js ene la, CSS-Doodle le bɔbɔe ŋutɔ na grid-pattern zazã ƒe nɔnɔmewo, mehiã render loop aɖeke o, eye wòwɔa DOM ƒe akpa siwo gakpɔtɔ nye esiwo ŋu woate ŋu aɖo eye woate ŋu alé ŋku ɖe wo ŋu. Le SVG generators ŋu la, CSS-Doodle ɖua dzi le developer experience me na CSS-native teams, togbɔ be SVG ɖua dzi le export fidelity kple complex path operations me hã.

ƒe nyawo

"CSS-Doodle ɖo kpe edzi be nuwɔwɔ ƒe dɔwɔnu sesẽtɔwo menye esiwo sesẽ wu ɣesiaɣi o — ɣeaɖewoɣi la, ne èxe mɔ ɖe ɖokuiwò nu ɖe nu ɖeka kple gbeƒãɖeɖe ƒe nyagɔmeɖegbalẽ ŋu la, eʋua nuwɔwɔ geɖe wu alesi canvas si le ʋuʋu ɖi ate ŋui."

💡 DID YOU KNOW?

Mewayz replaces 8+ business tools in one platform

CRM · Invoicing · HR · Projects · Booking · eCommerce · POS · Analytics. Free forever plan available.

Start Free →

Nukae Nye Xexeame Ŋutɔŋutɔ ƒe Dɔwɔwɔ ƒe Bubuwo na CSS-Doodle?

CSS-Doodle zazã le nuwɔwɔ ƒe nɔnɔmewo me bia be woalé ŋku ɖe nu vevi ʋee aɖewo ŋu. Dɔwɔwɔ ƒe dzidzenuwo tẽ kple grid ƒe lolome kple nɔnɔmetata ƒe sesẽ — 30x30 grid si me lãmenugbagbevi ɖesiaɖe ƒe CSS nɔnɔmetatawo le awɔ vɔvɔli DOM nu 900, si ateŋu ate gbe ɖe ɖoɖowɔwɔ dzi eye wòata ka siwo le mɔ̃ siwo le anyime. Profiling kple Chrome DevTools ƒe Performance panel hafi aɖo grid gãwo ɖe dɔwɔwɔ me nye nuwɔna si wokafu.

Browser ƒe ɖekawɔwɔ nyo ŋutɔ na egbegbe evergreen browsers, elabena CSS-Doodle ɖoa ŋu ɖe Custom Elements v1 kple Shadow DOM v1 ŋu, siwo katã wodo alɔe le xexeame katã. Domenyinu ƒe web-kpɔkplɔ ƒe kpekpeɖeŋu hiã polyfills, togbɔ be ele be dɔ siwo woɖo taɖodzinu na IE11 nada mɔnu bubuwo kpɔ hã.

Server-side rendering ɖea xɔtuɖaŋu ƒe mɔxenu vevitɔ fiana. Esi wònye be CSS-Doodle kpɔa egbɔ le vɔvɔli DOM me le dɔwɔwɔɣi ta la, ele be SSR ɖoɖowo abe Next.js alo Nuxt nabu doodle ƒe akpawo abe asitsalawo ɖeɖeko ene. Kuviatɔ ƒe CSS-Doodle ŋɔŋlɔdzesi ƒe agbatsɔtsɔ kple element la babla ɖe asitsalawo ɖeɖeko ƒe liƒo me kpɔa esia gbɔ dzadzɛ evɔ mekpɔa ŋusẽ ɖe Core Web Vitals ƒe xexlẽdzesiwo dzi vevie o.

Aleke Asitsahawo Ate Ŋu Awɔ CSS-Doodle Ðe Digitál Dɔwɔwɔ Siwo Woate Ŋu Akeke Ðe Edzi Me?

Na ƒuƒoƒo siwo kpɔa dijitaal nuwɔna geɖewo dzi la, nukpɔkpɔ ƒe ɖekawɔwɔ me léle ɖe asi le UI ƒe akpa siwo wowɔna me bia dɔwɔwɔ ƒe dɔwɔnu siwo yi ŋgɔ wu akpaa ŋutɔ. Doodle ƒe ɖoɖowo ƒe tɔtrɔ, nuku ƒe asixɔxɔwo mama le ƒuƒoƒoa me tɔwo dome, kple ɖoɖowɔwɔ ƒe tɔtrɔwo ƒe ɖoɖowɔwɔ le adzɔnuwo ƒe anyigba dzi bia dɔwɔwɔ ƒe ƒuƒoƒo si le titina.

Afi sia tututue platform abe Mewayz ene trɔa equation la le. Esi asitsatsa ƒe mɔ̃ 207 siwo wotsɔ wɔ ɖekae kple dɔwɔwɔ ƒe dɔwɔnu siwo zãla siwo wu 138,000 zãna ta la, Mewayz naa adzɔnuwo kple asitsatsa ƒe ƒuƒoƒowo xɔtuɖoɖowo be woawɔ ɖoɖo ɖe aɖaŋudɔwo, nyatakakawo ƒe mɔ̃wo, kple ŋgɔyiyidɔwo ƒe ɖoɖowo ŋu le teƒe ɖeka. Ne wò nuwɔwɔ kple mɔ̃ɖaŋuhawo wɔ ɖeka le dɔwɔɖoɖo ɖeka dzi la, ɖoɖowɔwɔ-yi ŋgɔ ƒe nɔnɔmewo ɖoɖo ɖa — siwo dome UI ƒe akpa siwo naa nu abe CSS-Doodle ƒe dɔwɔwɔwo ene hã le — va zua ɖoɖo si woate ŋu agbugbɔ awɔ, si dzi woate ŋu akpɔ ŋusẽ ɖo tsɔ wu be wòanye duƒuƒu le ɣeyiɣi aɖe koŋ me.

Nyabiase Siwo Wobiana Enuenu

Ðe CSS-Doodle sɔ na nuwɔwɔ zazã le asitsatsa ƒe nyatakakadzraɖoƒe dɔwo mea?

Ẽ. CSS-Doodle nye MIT ƒe mɔɖegbalẽ eye wòléa be nɛ vevie, si wɔe be wòsɔ na asitsatsa. Nu vevi siwo ŋu woabu le nuwɔwɔ ŋue nye grid ƒe lolome ƒe seɖoƒewo na dɔwɔwɔ kple asisiwo ƒe akpa dzi wɔwɔ ƒe nudidiwo na SSR ƒe ɖoɖowo. Aɖaŋuwɔƒe geɖewo zãnɛ na kalẽtɔwo ƒe megbenyawo, agbatsɔtsɔ ƒe screenwo, kple atsyɔ̃ɖoɖo ƒe akpa siwo me nukpɔkpɔ ƒe kesinɔnuwo le vevie wu pixel-perfect SSR output.

Ðe woateŋu aɖo CSS-Doodle ƒe emetsonuwo ɖe duta alo adzra wo ɖo abe nunɔamesi siwo meʋãna o enea?

CSS-Doodle ɖea agbe le web-kpɔkplɔ ƒe DOM me, eyata tẽe dɔdɔ menye nusi wotu ɖe eme o. Ke hã, zi geɖe la, dɔwɔlawo zãa html2canvas alo dom-to-image agbalẽdzraɖoƒewo tsɔ ɖea doodle siwo woɖe ɖe go la ɖe PNG alo SVG faɛlwo me, alo zãa browser ƒe DevTools tsɔ wɔa akɔntabubu ƒe atsyã siwo le fli me ƒe kɔpi hena static embedding. Le nunɔamesiwo wɔwɔ si woateŋu akeke ta la, scripted snapshot dɔwɔwɔ ƒe ɖoɖo siwo zɔna le Chromium nɔnɔme siwo me ta mele o me nye mɔnu si ame geɖe lɔ̃na.

Aleke CSS-Doodle kpɔa mɔɖeɖe kple screen readers gbɔe?

Esi CSS-Doodle ƒe emetsonuwo nye atsyɔ̃ɖoɖo dzro ko le zazã akpa gãtɔ me ta la, nuwɔna nyuitɔ enye be nàwɔ aria-hidden="true" ɖe ƒe akpaa dzi, si axe mɔ na screen xlẽlawo be woagaɖe gbeƒã grid cell me nya siwo gɔmesese mele o. Le nɔnɔme siwo me doodle la ɖea gɔmesese ƒe gɔmesese fiana gome la, exatsa ɖe nɔnɔmetata ƒe akpa aɖe me kple nɔnɔmetata si ɖɔa nu la naa mɔnukpɔkpɔ ƒe ƒuƒoƒo si kpekpeɖeŋu mɔ̃ɖaŋununyawo hiã.

CSS-Doodle tsi tre ɖi na egbegbe nyatakakadzraɖoƒe ƒe ŋgɔyiyi nyuitɔ kekeake — ŋusẽtɔ dzidzi ŋutete si wotsɔ to API bɔbɔetɔ kekeake si ateŋu adzɔ dzi. Eɖanye ame ɖeka ƒe dɔwɔla si le nutovɛwo ƒe agbalẽdzraɖoƒewo tum alo adzɔnuwo ƒe ƒuƒoƒo si ɖoa aɖaŋu-yi ŋgɔ ƒe ŋgɔdonyawo ɖe ɖoɖo nu le agbɔsɔsɔ me o, CSS-Doodle gɔmesese kple eŋudɔwɔwɔ kekea wò nukpɔkpɔ dɔwɔnuwo ɖe enu evɔ mekekea wò codebase ƒe sesẽme ɖe enu o.

Èle klalo be yeatu nunyatɔe wu, aɖoe ɖe amewo kabakaba wu, eye yeawɔ ɖoɖo ɖe yeƒe adzɔnuwo ƒe dɔwɔwɔ bliboa ŋu le teƒe ɖekaa? Dze wò Mewayz dɔwɔƒe gɔme egbea — ɖoɖowo tso $19/ɣleti naa wò ƒuƒoƒoa 207 modules be woawɔ wò dɔwɔƒea ƒe akpa ɖesiaɖe wòanɔ bɔbɔe, tso aɖaŋudɔwɔwɔ ƒe ɖoɖowo dzi va ɖo asisiwo ƒe dzidziɖedzi dzi.