DevTulz Online

CSS Box Shadow Generatorius

Fonas

Kas yra CSS Box Shadow?

CSS box-shadow savybė prideda šešėlio efektus aplink elemento rėmelį. Šešėliai gali būti paslinki, suliejami, platinami, nudažomi ir nustatyti kaip inset (vidinis šešėlis). Keli kableliu atskirti šešėliai gali būti sluoksniuojami turtingiems efektams. Šis generatorius leidžia vizualiai kurti sudėtingus daugiasluoksnius šešėlius ir kopijuoti įklijavimui paruoštą CSS į iškarpinę.

Kaip naudoti Box Shadow Generatorių

  1. Sureguliuokite Offset X/Y, Blur ir Spread slankiklius šešėliui padėti ir suformuoti.

  2. Spustelėkite spalvos pavyzdį šešėlio spalvai pasirinkti ir naudokite Opacity slankiklį skaidrumui.

  3. Įjunkite 'Inset' vidinio švytėjimo arba įspausto efekto kūrimui.

  4. Spustelėkite '+ Pridėti sluoksnį', kad susumuotumėte kelis šešėlius.

  5. Nukopijuokite sugeneruotą CSS ir įklijuokite į savo stilių lapą.

Dažnai užduodami klausimai

Koks yra skirtumas tarp box-shadow ir drop-shadow filtro? box-shadow prideda šešėlius aplink elemento stačiakampę ribos langelį ir palaiko vidines šešėlius. CSS filter: drop-shadow() taikomas elemento vizualinei formai (įskaitant skaidrumą), todėl seka ne stačiakampius kontūrus, pvz., PNG su skaidriu fonu.

Kaip sukurti Material Design kortelės pakilimo efektą? Sudėkite du box-shadow: minkštas aplinkos šešėlis (didelis blur, žema nepermatomas, šiek tiek spread) ir pagrindinį šešėlį (mažesnis blur, didesnė nepermatomas, kryptingas poslinkis). Pavyzdžiui: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Ar box-shadow veikia puslapio maketą? Ne. box-shadow neveikia elemento dydžio ar padėties dokumento sraute. Skirtingai nuo outline, jis neužima maketo vietos ir netrins kitų elementų.

Ar aš galiu animuoti box-shadow? Taip. box-shadow yra animuojama su CSS transitions ir animations. Našumui, pirmenybę teikite box-shadow perėjimui tik tada, kai reikalinga - naršyklės negali GPU sugreitinti box-shadow pokyčių taip efektyviai kaip transform arba opacity.

Keywords: CSS box shadow generatorius, box-shadow CSS, CSS šešėlio įrankis, CSS drop shadow, vidinis šešėlis, daugiasluoksnių šešėlių, CSS shadow internete