Ġeneratur tal-box-shadow

Kif tuża l-ġeneratur tal-box-shadow

1. Ibda minn preset, jew żomm id-dell Artab awtomatiku. Ir-ringiela Preset toffri Artab, Iebes, B’saffi, Elevazzjoni, Neumorphism, Intern u Tleqq.
2. F’Saffi tad-dell, ikklikkja saff biex tagħżlu. Kull saff jista’ jinġarr b’Ċaqlaq ’il fuq u Ċaqlaq ’l isfel, jew jitħassar b’Neħħi. Żid saff jidduplika s-saff magħżul biex tbiddel kopja tiegħu.
3. Editja s-saff magħżul taħt Editja s-saff magħżul: kaxkar il-punt fil-pad tal-Spostament, jew uża s-sliders u l-oqsma tan-numri għal Spostament orizzontali (px), Spostament vertikali (px), Imċajpar (px) u Firxa (px).
4. Agħżel Kulur tad-dell bis-selettur tal-kulur jew ikteb kwalunkwe kulur CSS fil-qasam tal-kodiċi, imbagħad issettja Opaċità (%). Agħżel Inset (dell ta’ ġewwa) biex ir-dell jitpinġi ġewwa l-kaxxa.
5. Aġġusta s-Settings tal-previżjoni (Kulur tal-kaxxa, Kulur tal-isfond, Raġġ tal-irkejjen (px)) biex tara d-dell fuq il-kuluri reali tiegħek. Dawn jaffettwaw biss il-previżjoni.
6. Ikkopja d-dikjarazzjoni minn Kodiċi CSS b’Ikkopja.

Keyboard: iffoka l-punt fil-pad tal-Spostament u uża ċ-ċwievet tal-vleġġa biex tiċċaqlqu b’1 px, jew b’10 px b’Shift.

L-għodda taħdem kollha fil-brawżer tiegħek; xejn minn dak li tikteb ma jintbagħat lil server.

Kif jaħdem il-box-shadow

Is-sintassi ta’ dell wieħed hija box-shadow: [inset] x y blur spread color.

• x u y iċaqalqu d-dell lejn il-lemin u l-isfel. Valuri negattivi jċaqalquh lejn ix-xellug u ’l fuq. Sors tad-dawl ’il fuq mill-element ifisser y pożittiv.
• Blur itaffi t-tarf. Ma jistax ikun negattiv. Blur ta’ 0 jagħti kopja bit-tarf iebes tal-kaxxa.
• Spread ikabbar (pożittiv) jew iċekken (negattiv) id-dell qabel ma jiġi mċajpar. Spread negattiv b’y kbir iżomm id-dell taħt l-element minflok madwaru.
• Kulur normalment ikollu trasparenza. Din l-għodda tikteb il-kuluri opaki bħala HEX u dawk trasluċidi bħala rgba(), li l-brawżers kollha jifhmu. Jekk tikteb kulur li diġà għandu kanal alpha, l-Opaċità (%) timmultiplikah.
• inset iqiegħed id-dell ġewwa l-border, daqslikieku l-kaxxa kienet imbuttata fil-paġna.

Id-dell isegwi l-border-radius tal-element u qatt ma jbiddel it-tqassim: ma jokkupa l-ebda spazju u ma jqajjem l-ebda scrollbar.

Għaliex tpoġġi bosta dellijiet fuq xulxin?

Id-dellijiet reali mhumiex rettangolu wieħed imċajpar. Dell żgħir, skur u strett joqgħod eżatt taħt l-oġġett, u wieħed kbir, ħafif u mċajpar jinfirex iktar ’il bogħod. Jekk tqiegħed minn tnejn sa ħames saffi fuq xulxin timita dan u d-dehra tkun ferm iktar naturali minn dell tqil wieħed. Il-preset B’saffi jirdoppja l-ispostament u l-imċajpar f’kull pass b’opaċità baxxa, teknika użata minn ħafna sistemi tad-disinn. Elevazzjoni jimita d-dellijiet ta’ tliet saffi ta’ Material Design.

L-ewwel saff fil-lista jitpinġi fuq l-oħrajn, eżattament kif jaħdem fil-valur CSS. L-ordni tinteressa l-aktar meta tħallat dellijiet inset u ta’ barra jew meta tuża kuluri qawwija.

Neumorphism

In-neumorphism (“soft UI”) juża żewġ dellijiet fuq element li għandu l-istess kulur bħall-isfond tiegħu: wieħed skur spostat ’l isfel u lejn il-lemin, u wieħed ċar spostat ’il fuq u lejn ix-xellug. Il-preset Neumorphism jissettja ż-żewġ kuluri għal #e0e5ec. Żomm f’moħħok li dan l-istil għandu kuntrast baxx, allura l-buttuni magħmula bih jeħtieġu stat ta’ fokus ċar u tikketti li jinqraw.