Gineadóir Box Shadow

Tarraing sleamhnáin chun box-shadow a mhúnlú, cruachaigh cisealacha le haghaidh doimhneachta, agus cóipeáil an CSS críochnaithe láithreach.

Cisealacha scátha
Ciseal 1
CSS
Coigeartaigh na sleamhnáin chun do scáth a mhúnlú.

Déantar gach scáth a rindreáil i do bhrabhsálaí. Ní uaslódáiltear aon rud a shocraíonn tú anseo chuig BroBroGo.

Ceisteanna Coitianta

Cad go díreach a rialaíonn fritháireamh, doiléiriú, agus leathadh?

Bogann an fritháireamh an scáth ar chlé/ar dheis agus suas/síos, déanann an doiléiriú na himill a mhaolú, agus méadaíonn nó laghdaíonn an leathadh é roimh dhoiléiriú. Tarraingíonn leathadh diúltach an scáth isteach, rud atá úsáideach le haghaidh scáth docht dlúth.

Cad a dhéanann an rogha inset?

Titeann gnáthscáth lasmuigh den eilimint, cosúil le solas taobh thiar de chárta ardaithe. Smeachann Inset isteach é ina ionad sin, ionas go bhfuil cuma bhrúite ar an eilimint — áisiúil do réimsí ionchuir doimhnithe nó cnaipí brúite.

Cén fáth ar chóir níos mó ná ciseal scátha amháin a chruachadh?

Bíonn cuma chothrom ar scáth amháin thar mhéid áirithe. De ghnáth, comhcheanglaíonn ardú réasúnta scáth docht dorcha le scáth bocht níos leithne — cuir an dara ciseal leis agus tiúin gach ceann acu go neamhspleách chun an éifeacht sin a fháil.

Scríofa agus athbhreithnithe ag foireann eagarthóireachta BroBroGo.Nuashonraithe is déanaí:

Múnlú agus Rialú an Airí CSS box-shadow

Is uirlis phraiticiúil é an Gineadóir Box Shadow chun scáthanna saincheaptha a dhearadh le haghaidh eilimintí gréasáin. Trí shleamhnáin shimplí a choigeartú, is féidir airíonna éagsúla an scátha a mhúnlú go beacht agus an cód CSS ginte a chóipeáil láithreach le húsáid i dtionscadail dearaidh.

Oibríonn an uirlis seo go hiomlán laistigh de do bhrabhsálaí gréasáin. Déantar gach scáth a rindreáil i do bhrabhsálaí, agus ní uaslódáiltear aon rud a shocraíonn tú anseo chuig BroBroGo.

Na hIonchuir agus na Socrúcháin sa Chomhéadan

Chun an scáth a chruthú, soláthraíonn an comhéadan roinnt rialuithe sonracha a athraíonn gnéithe fisiciúla an scátha:

  • Fritháireamh cothrománach: Sleamhnán chun an scáth a bhogadh ar chlé nó ar dheis, ag réimsiú ó -50px go 50px.
  • Fritháireamh ingearach: Sleamhnán chun an scáth a bhogadh suas nó síos, ag réimsiú ó -50px go 50px.
  • Doiléiriú: Sleamhnán chun imill an scátha a mhaolú, ag réimsiú ó 0px go 100px.
  • Leathadh: Sleamhnán chun an scáth a mhéadú nó a chrapadh sula gcuirtear an doiléiriú i bhfeidhm, ag réimsiú ó -50px go 50px.
  • Dath an scátha: Roghnóir datha chun dath an scátha a shocrú.
  • Teimhneacht: Sleamhnán chun trédhearcacht an scátha a choigeartú.
  • Scáth inset: Scorán a athraíonn treo an scátha ionas go rindreáiltear laistigh den eilimint é.
  • Cuir ciseal leis: Cnaipe chun ciseal scátha breise a chruthú.
  • Bain ciseal: Cnaipe chun ciseal scátha roghnaithe a scriosadh.

Na hAschuir agus Luachanna Rindreála

Taispeánann an comhéadan na luachanna reatha go léir i bhfíor-am de réir mar a athraítear na sleamhnáin:

  • Ciseal: Lipéad aitheantais do gach ciseal scátha ar leith.
  • Fritháireamh cothrománach: Luach reatha an fhritháirimh chothrománaigh i bpicteilíní (px).
  • Fritháireamh ingearach: Luach reatha an fhritháirimh ingearaigh i bpicteilíní (px).
  • Doiléiriú: Luach reatha an doiléirithe i bpicteilíní (px).
  • Leathadh: Luach reatha an leata i bpicteilíní (px).
  • Dath an scátha: An dath roghnaithe don chiseal.
  • Teimhneacht: Luach reatha na teimhneachta don chiseal.
  • Scáth inset: Staid reatha an rogha inset (gníomhach nó neamhghníomhach).
  • CSS: An cód CSS críochnaithe atá ginte don bhosca scátha.

Rialacha Teicniúla agus Cásanna Imeallacha

Nuair a bhíonn an uirlis in úsáid, nuashonraíonn na sleamhnáin don Fritháireamh cothrománach, Fritháireamh ingearach, Doiléiriú, agus Leathadh an t-aschur CSS láithreach. Leanann an rindreáil na rialacha teicniúla seo a leanas:

  1. Teorainneacha Fisiciúla: Tá raon teoranta ag na sleamhnáin chun cruinneas a chinntiú: idir -50px agus 50px le haghaidh fritháirimh agus leata, agus idir 0px agus 100px le haghaidh doiléirithe.
  2. Réamh-rindreáil: Réamh-rindreálann an uirlis cúig chiseal ar fad. Bíonn luachanna réamhshocraithe de 0 8 24 -4 agus dubh atá 18% trédhearcach ag an gcéad chiseal, agus bíonn na cisealacha eile i bhfolach ar dtús.
  3. Cisealacha Nua: Nuair a chliceáiltear ar Cuir ciseal leis, cruthaítear ciseal nua scátha a úsáideann na luachanna réamhshocraithe. Má chliceáiltear ar Bain ciseal, scriostar an ciseal roghnaithe sin go hiomlán.
  4. Cruachadh Cisealacha: Nuair a bhíonn níos mó ná ciseal amháin gníomhach, liostaítear iad sa chód CSS mar luachanna scartha le camóga.
  5. Leathadh Diúltach: Má shocraítear luach diúltach don leathadh, tarraingítear an scáth isteach i dtreo lár an eilimint.
  6. Scáth Inset: Nuair a ghníomhachtaítear an scorán Scáth inset, iompaítear an scáth isteach laistigh de theorainneacha an eilimint in ionad é a theacht amach as.

Doimhneacht agus Éifeachtaí Amhairc a Dhearadh

Braitheann an gaol idir airíonna an scátha agus an dearcadh amhairc ar an gcaoi a n-ionramhálann tú na sleamhnáin. Is féidir éifeachtaí éagsúla a bhaint amach chun freastal ar riachtanais dearaidh ar leith:

Scáthanna Dlútha agus Scáthanna Leathana

Chun scáth docht dlúth a chruthú, úsáidtear luachanna beaga doiléirithe agus fritháirimh. Chun scáth bocht níos leithne a chruthú, méadaítear an doiléiriú agus an leathadh chun an t-aistriú amhairc a dhéanamh níos boige.

Éifeacht "Pressed In" vs "Raised Card"

Cruthaíonn gnáthscáth lasmuigh den eilimint éifeacht "raised card", áit a bhfuil cuma air go bhfuil an cárta ag snámh os cionn an chúlra. Os a choinne sin, má úsáidtear an rogha Scáth inset, cruthaítear éifeacht "pressed in". Tá sé seo an-úsáideach chun go mbeidh cuma bhruite nó doimhnithe ar eilimintí cosúil le réimsí ionchuir nó cnaipí gníomhacha.

Cruachadh Cisealacha le haghaidh Réalachais

Is minic a bhíonn cuma chothrom nó mhí-nádúrtha ar scáth aonair. Trí chisealacha iolracha a chruachadh, is féidir doimhneacht agus réalachas a chruthú. Mar shampla, is féidir ciseal amháin a shocrú mar scáth docht dorcha gar don eilimint, agus an dara ciseal a shocrú mar scáth bocht níos leithne chun scaipeadh an tsolais sa saol fíor a aithris.

Ceisteanna Coitianta (FAQ)

Cad go díreach a rialaíonn fritháireamh, doiléiriú, agus leathadh?
Bogann an fritháireamh an scáth ar chlé/ar dheis agus suas/síos, déanann an doiléiriú na himill a mhaolú, agus méadaíonn nó laghdaíonn an leathadh é roimh dhoiléiriú. Tarraingíonn leathadh diúltach an scáth isteach, rud atá úsáideach le haghaidh scáth docht dlúth.

Cad a dhéanann an rogha inset?
Titeann gnáthscáth lasmuigh den eilimint, cosúil le solas taobh thiar de chárta ardaithe. Smeachann Inset isteach é ina ionad sin, ionas go bhfuil cuma bhrúite ar an eilimint — áisiúil do réimsí ionchuir doimhnithe nó cnaipí brúite.

Cén fáth ar chóir níos mó ná ciseal scátha amháin a chruachadh?
Bíonn cuma chothrom ar scáth amháin thar mhéid áirithe. De ghnáth, comhcheanglaíonn ardú réasúnta scáth docht dorcha le scáth bocht níos leithne — cuir an dara ciseal leis agus tiúin gach ceann acu go neamhspleách chun an éifeacht sin a fháil.

An bhfuil mo chuid sonraí dearaidh sábháilte ar an suíomh seo?
Tá. Déantar gach scáth a rindreáil i do bhrabhsálaí. Ní uaslódáiltear aon rud a shocraíonn tú anseo chuig BroBroGo, rud a chinntíonn go bhfanann do chuid oibre go hiomlán áitiúil ar do ghléas.

Gineadóir CSS Cubic BezierTarraing an dá láimhseáil chun cuar maolaithe a mhúnlú, féach ar phonc ag gluaiseacht air i gcomparáid le ceann seasta, agus cóipeáil an luach cubic-bezier().Gineadóir GrádáinTóg grádán líneach, gathach, nó cónach, cuir stadanna datha leis agus socraigh an treo, ansin cóipeáil an CSS le cliceáil amháin.Gineadóir Border RadiusCruinnigh gach cúinne le sleamhnáin, cruthaigh cruthanna orgánacha leis an modh elipseach, agus cóipeáil an CSS láithreach.Gineadóir FlexboxSocraigh coimeádán flex agus a mhíreanna le rialtáin radhairc, féach ar an leagan amach ag freagairt beo, agus cóipeáil an CSS le cliceáil amháin.Gineadóir CSS GridSocraigh do cholúin agus do rónta, tarraing trasna na gcealla chun míreanna a chur, agus cóipeáil an CSS greille le HTML meaitseála le cliceáil amháin.Áireamhán CSS clamp()Iontráil méid le haghaidh scáileáin bheaga agus mhóra agus faigh luach sreabhach clamp() a scálaíonn go réidh eatarthu — le haghaidh clómhéideanna, padding, corrlaigh nó bearnaí.Tiontaire DathaTiontaigh dathanna idir HEX, RGB, HSL, HSV, CMYK agus LAB — cuir réimse ar bith in eagar agus nuashonrófar an chuid eile de réir mar a théann tú ar aghaidh.Snaidhmtheoir & Mionlaghdaitheoir CSSAthfhleascaigh CSS praiseachúil chun é a léamh, nó mionlaghdaigh é chun é a sheoladh — le mód sábháilte nach n-athraíonn ord do rialacha riamh.Seiceálaí CodarsnachtaIontráil dath téacs agus cúlra chun cóimheas codarsnachta WCAG a fheiceáil agus cé na leibhéil AA agus AAA a n-éiríonn leo.