Modal
Ibùdó phosphorescent kan nínú yàrá olupin dúdú - orísun ìmọ́lẹ̀ kan ṣoṣo ni àwọ̀ ewéko dídán
Àwọn iṣẹ́ Modal bíi fírósísẹ́ǹsì nínú yàrá olupin tó ṣókùnkùn: kanfasi tó fẹ́rẹ̀ẹ́ dúdú, irú ewéko aláwọ̀ ewé, àti àmì ìfọ́mọ́lẹ̀ kan ṣoṣo tó ń ṣiṣẹ́ gẹ́gẹ́ bí àmì ipò LED. Èdè apẹ̀rẹ̀ náà jẹ́ ti olùgbékalẹ̀—àwọn fèrèsé kódù tó wà ní ìsàlẹ̀ pẹ̀lú àwọn àmì ìmọ́lẹ̀ ọkọ̀, àwọn àmì 3D isometric nínú ewéko aláwọ̀ ewé, àti ọ̀pọ̀lọpọ̀ ààyè funfun, èyí tó ń jẹ́ kí ohun kan wà ní apá kọ̀ọ̀kan tàn yanranyanran. A pín ìkọ̀wé sí àárín fọ́ọ̀ǹtì àdáni (Goga) fún àwọn àkọlé àti fọ́ọ̀ǹtì oníyípadà (Inter) fún gbogbo àwọn èròjà UI, méjèèjì sì wà pẹ̀lú ìtọ́pinpin òdì tóóró. A pín àwọn àwọ̀ náà déédé: ọ̀pọ̀lọpọ̀ àwọn ìbòjú kò ní àwọ̀, àwọ̀ ewéko aláwọ̀ ewé tó mọ́lẹ̀ náà sì ń hàn lórí àwọn ìṣe pàtàkì, àmì, àwọn àwòrán 3D, àti àwọn àkókò ìtẹnumọ́. Àwọn ohun èlò náà jẹ́ pẹ̀lẹ́pẹ̀lẹ́ àti aláìní fírẹ́mù, pẹ̀lú jíjìn tí a ṣẹ̀dá nípasẹ̀ àwọn ààlà ewéko díẹ̀ àti blur background dípò òjìji.
Módálì náà lo ìṣètò dúdú tó ní ìwọ̀n tó pọ̀ tó 1280px láti fi mú àkóónú náà bá àkóónú náà mu. Fèrèsé akọni náà wà ní àárín: àkọlé (gbólóhùn àkọ́kọ́ ní ewé àwọ̀ ewé), àkọlé kékeré kan, ìpè méjì sí ìgbésẹ̀, àti ohun 3D kan ṣoṣo gẹ́gẹ́ bí ìdúró ojú—láìyàtọ̀ sí ìṣètò náà kúrò ní ẹ̀gbẹ́. Àwọn apá àkóónú náà tẹ̀lé ìró ìṣọ̀kan kan: àmì ojú (àwọn lẹ́tà ńlá, Moss 70) → Àkọlé Goga → ọ̀rọ̀ ara tó dákẹ́, lẹ́yìn náà bóyá ìṣètò ọ̀wọ̀n méjì pẹ̀lú àpèjúwe ẹ̀yà ara (ọ̀rọ̀ + kódì/káàdì ìwòran) tàbí àkójọ àwọn káàdì mẹ́ta. Àwọn ihò àárín àwọn apá náà jẹ́ àrà ọ̀tọ̀—80px. Ojú ìwé náà ń yípo láàrín àwọn ìlà tó ṣófo (#000000) àti àwọn ìlà ẹ̀yìn tó fúyẹ́ díẹ̀ (#181818), pẹ̀lú apá ìmọ́lẹ̀ kan (#def0dd) tó ń farahàn ní àárín ojú ìwé náà gẹ́gẹ́ bí ohun tó ń fúnni ní ìmí. Ìlọ kiri náà ní ọ̀pá òkè kan ṣoṣo, tó dúró ṣinṣin pẹ̀lú ìpìlẹ̀ tó ṣókùnkùn—kò sí ẹ̀gbẹ́ tàbí àkójọ mega. Ìsàlẹ̀ ẹsẹ̀ náà jẹ́ kékeré àti dúdú, pẹ̀lú àwọn ọ̀wọ̀n ìjápọ̀ aláwọ̀ ewé tó dákẹ́. Ìwọ̀n ọ̀rọ̀ náà rọrùn: a fún apá kọ̀ọ̀kan ní ààyè tó pọ̀, àwọn káàdì kò sì ní lo ju ọ̀wọ́n mẹ́ta lọ.
Èdè ìwòran Modal pín sí ọ̀nà méjì: àwọn àtúnṣe ọjà 3D tó ń tàn yanranyanran àti àwọn àwòkọ fèrèsé dúdú. Àkójọpọ̀ ojú ìwé náà ni cube 3D kan ṣoṣo tó ń lo ìpele ìpolówó (láti ewé osàn-án sí eramel), tó wà nínú radial gradient halo tó ń wẹ àlàfo tó wà nínú ìmọ́lẹ̀ ewé—àwòrán ìrísí àmì-ìdámọ̀ràn náà. Àwọn káàdì iṣẹ́ ní àwọn àmì 3D isometric (cube wireframe, àtẹ̀gùn tó lágbára, àwọn ìpele) tó wà ní ewé osàn-án kan náà sí ìsàlẹ̀ dúdú. Àwọn àbájáde kódì àti àmì-ìdámọ̀ràn ni a gbé kalẹ̀ gẹ́gẹ́ bí káàdì fèrèsé tó ní àwọn àmì ìmọ́lẹ̀ ìrìnnà, ìfọ̀rọ̀wérọ̀ monospaced tó ń tàn yanranyanran nínú phosphorescent palette, àti ààlà ewéko tó dákẹ́—wọ́n jọ àwọn àwòrán ojú ìwé tó wà nínú ojú ìwé àṣẹ gidi. Àwọn àmì oníbàárà ni a ń fi hàn gẹ́gẹ́ bí àmì ewéko aláwọ̀ ewé tó ti di aláìlágbára nínú ìlà kan ṣoṣo, tó ní ìyàtọ̀ díẹ̀, tó ń fi hàn pé wọ́n ní ìgbẹ́kẹ̀lé láìsí ìdíje ojú. Ìwọ̀n gbogbo rẹ̀ kéré—ọ̀pọ̀lọpọ̀ ojú ìwé ló ní ọ̀rọ̀ púpọ̀, àwọn àwòrán sì wà gẹ́gẹ́ bí àwọn àmì ìfojúsùn ẹnìkọ̀ọ̀kan dípò àwọn àwòrán. Kò sí àwọn fọ́tò; gbogbo ètò ìwòran ni a ṣe, ó jẹ́ onígun mẹ́rin, ó sì ń tàn yanranyanran.
Paleti
Orúkọ ọjà
- Lime Pulse
#7fee64— Àwọn kókó pàtàkì ti ìdámọ̀ ilé-iṣẹ́ ni àmì ìdámọ̀, ìpè pàtàkì sí ìgbésẹ̀ (CTA), kíkún àmì, àwọn ipò tí ń ṣiṣẹ́, àti àwọ̀ ìpìlẹ̀ ti àpèjúwe náà.
Dídúróṣinṣin
- Phosphor White
#ddffdc— Ọ̀rọ̀ pàtàkì, àwọ̀ àkọlé, ìtòlẹ́sẹẹsẹ àmì, àti ọ̀rọ̀ bọ́tìnì tí a fi kún ni ojú pàtàkì tí a lè kà. - Void Black
#000000— Àwòrán ojú ìwé, ìpele ìpìlẹ̀ tó jìn jùlọ - Ground Iron
#181818— Bọ́tìnì pàtàkì tí ó kún, àwọn ojú káàdì ní àwọn agbègbè dúdú, ojú ìpìlẹ̀ ojú ìṣàfihàn olùlò. - Carbon Veil
#212525— Àwọn ojú ilẹ̀ gíga, ìsàlẹ̀ ìlọ kiri, fẹ́ẹ́rẹ́ díẹ̀ ju ilẹ̀ lọ. - Circuit Border
#485346— Fírémù ìgbésẹ̀ àgbékalẹ̀/ìwin, ìlà tín-ín-rín pàtàkì tí ó ní ìbáṣepọ̀, jẹ́ àwọ̀ ewéko tí ó ṣókùnkùn. - Phosphor Blue-Black
#1f2a33— Àwọn ìlà àmì tín-tín kejì, tí ó ń pín àwọn ìlà láàrín àwọn ìlà dúdú.
Ìtẹ̀wé
láti 12 sí 64px · Àwọn ìgbésẹ̀ 8
- Goga — rirọpo: Inter Tight or Space Grotesk · awọn ilana apẹrẹ 400, 500 · Fọ́ọ̀ǹtì Àkọlé àti Ìsàlẹ̀ Àkọlé – A ń lò ó fún gbogbo àwọn àkọlé àti káàdì H1–H4. Goga jẹ́ fọ́ọ̀ǹtì onígun mẹ́rin onígun mẹ́rin tí a ṣe ní ọ̀nà onígun mẹ́rin pẹ̀lú àwọn ihò tóóró àti àwọn ìpele onígun mẹ́rin díẹ̀. Ìwọ̀n àárín (500) wà fún títọ́ka sí àwọn àkọlé ìpele káàdì; ìwúwo déédé (400) ni a lò fún àwọn àkọlé akọni àti àwọn àkọlé ìpín. Láti lè wọ inú àwọn ìrísí glyph mìíràn tí ó ṣàlàyé ìdámọ̀ Modal, a gbọ́dọ̀ mú kí àkójọpọ̀ ìrísí 'ss01' rẹ̀ ṣiṣẹ́. Ààlà lẹ́tà òdì máa ń dínkù díẹ̀díẹ̀ láti -0.007em ní 48px sí -0.017em ní 21px.
- Inter Variable — rirọpo: Inter · awọn ilana apẹrẹ 400, 500 · Ìfọwọ́sowọ́pọ̀ olùlò àti àwòkọ ara – ìlọ kiri, bọ́tìnì, àwòkọ ara, àmì, ẹsẹ̀. Ìwúwo àárín (500) ni a lò nípasẹ̀ àìyípadà fún àwọn ohun èlò ìbánisọ̀rọ̀ àti ìlọ kiri; a lo déédé (400) fún àwọn ìpínrọ̀. A dín àlàfo lẹ́tà kù ní pàtàkì kódà ní àwọn ìwọ̀n kékeré (-0.026em ní 14px, -0.022em ní 16px), èyí tí ó fún ìfọwọ́sowọ́pọ̀ náà ní ìwọ̀n ìpele tí a ti dìpọ̀, tí ó sì ní ìwọ̀n ìpele. Fún àmì ìfàmìsí míràn, ìyàtọ̀ ohun kikọ 'cv11' yẹ kí ó wà nínú rẹ̀. Àwọn àmì gbogbo-kápù ní 12px lo +0.05em àlàfo lẹ́tà láti ṣe àtúnṣe ìwọ̀n ìṣàfihàn ara.
Àárín àti ìrísí
| Ète | Ìtumọ̀ |
|---|---|
| Ìwọ̀n | apapọ |
| Igbesẹ ipilẹ | 20px |
| Rọ́díọ̀sì bọ́tìnì | 12px |
| rédíọ̀sì káàdì | 8px |
| Àwọn òjìji | kò sí - àwọn ààlà dípò àwọn òjìji |
| Láàárín àwọn ẹ̀ka | 80px |
| Fífẹ̀ ojú ìwé | 1280px |
AI yóò kọ́ ojú òpó wẹ́ẹ̀bù rẹ ní ọ̀nà Modal yóò sì kún ún
- Kún àwọn ọjà àti ìfiránṣẹ́ nípasẹ̀ ìjápọ̀ náà - Instagram, TikTok, Facebook.
- Gbe akoonu lati oju opo wẹẹbu atijọ rẹ—kan sọ adirẹsi naa.
- Apẹẹrẹ ode oni lori ẹrọ ti o dara julọ: React ( Next.js) pẹlu ifihan olupin ati iṣapeye SEO kuro ninu apoti.
- Iṣapeye SEO adaṣe ni kikun fun awọn abajade wiwa ati awọn iṣeduro nẹtiwọọki neural.
Àwọn àṣà tó jọra
- Slash — Ààbò òru pẹ̀lú àwọn ìwé àkọsílẹ̀ wúrà
- AgentQL — Awọn Imọlẹ Ariwa lori ebute ni alẹ
- GitHub — Pẹ́ẹ̀lì àṣẹ ààyè pẹ̀lú àwọn ibi ìṣàkóso bioluminescent—ibi iṣẹ́ dúdú, ojú ọjọ́ tí ìmọ́lẹ̀ aláwọ̀ ewé kan ṣoṣo ń tọ́ka sí ọ̀nà síwájú.
- Doppler — Ìmọ́lẹ̀ aláwọ̀ elése àlùkò ní òru. Àwọ̀ tí ó fẹ́rẹ̀ẹ́ dúdú náà ń tàn yòò pẹ̀lú àmì lavender kan ṣoṣo àti ìmọ́lẹ̀ ìfìdí múlẹ̀ aláwọ̀ ewé, gbogbo ojú rẹ̀ tẹ̀ tó bẹ́ẹ̀ tí a fi lè gbá a mú.
- Basedash — Ibùdó ìwádìí òru kan pẹ̀lú lẹ́tà matte. Ibùdó ìṣàyẹ̀wò dúdú kan níbi tí àwọn ìwọ̀n tí a fi ń tàn yanranyanran pẹ̀lú àwọ̀ ewé, àwọn àkọlé serif tí ń fò lókè ariwo náà, àti àwọn bọ́tìnì funfun tí ó dàbí ìgò ni àwọn ohun dídán kan ṣoṣo ní yàrá tí ó ní ojú dúdú rírọ̀.
- Superwhisper — Àwọn ìmọ́lẹ̀ àríwá máa ń yọ́ lórí gíláàsì òru
- Better Stack — Kọ́nsọ́ọ̀lù Midnight SRE
- Langbase — Ẹ̀rọ ìdáná Midnight Northern Lights
- Astro — Iṣakoso Iṣẹ Apinfunni Jinlẹ pẹlu imọlẹ eleyi ti kan lati inu nebula kan
- Wayfinder — Ibojú fíìmù dúdú kan tí àkọlé rẹ̀ kò fi bẹ́ẹ̀ dún tí ó ń tàn lórí àwòrán alágbékalẹ̀ kan. Ìfọwọ́sowọ́pọ̀ náà jẹ́ ìfàmọ́ra ìmọ́lẹ̀ dípò pánẹ́lì ìṣàkóso.
- HashiCorp — Yàrá ìṣàkóṣo ní òru òru pẹ̀lú neon aláwọ̀ elése àlùkò jẹ́ ojú ilẹ̀ onímọ̀-ẹ̀rọ dúdú níbi tí kuubu onígun mẹ́rin tí ń tàn yanran ti ń ṣiṣẹ́ gẹ́gẹ́ bí àwọ̀ kan ṣoṣo tí a lè tọ́ka sí.
- Umbrel — Ihò iná dídùn kan ní yàrá olùtọ́jú alẹ́—yàrá dúdú kan níbi tí ìmọ́lẹ̀ pupa kan ṣoṣo ti ń fi ohun tó ṣe pàtàkì hàn.