CSS Box-Shadow Generatorius

Vizualiai reguliuokite šešėlius ir iškart nukopijuokite CSS kodą

Intuityviai reguliuokite **box-shadow** **horizontalųjį ir vertikalųjį poslinkį**, **išsiliejimą**, **išplitimą**, **spalvą** ir **neskaidrumą** naudodami slankiklius. Tiksliai sureguliuokite šešėlius realiuoju laiku su peržiūra ir lengvai pasiekite sudėtingus dizainus, pvz., **Neumorphism**. Nukopijuokite užbaigtą CSS kodą vienu paspaudimu.

Peržiūra

Šešėlio Savybės

Horizontalus Poslinkis (X) 0px

Vertikalus Poslinkis (Y) 4px

Išsiliejimas (Blur) 12px

Išplitimas (Spread) 0px

Spalva Neskaidrumas

Vidinis Šešėlis (inset)

Išankstiniai Nustatymai

Minkštas

Vidutinis

Kietas

Neumorphism

Kaip naudoti

Naudotis CSS **box-shadow** generatoriumi paprasta:

1 žingsnis: Reguliuokite šešėlį slankikliais

Reguliuokite **horizontaliojo poslinkio**, **vertikaliojo poslinkio**, **išsiliejimo** ir **išplitimo** parametrus slankikliais. Pakeitimai atsispindi peržiūroje realiuoju laiku.

2 žingsnis: Nustatykite spalvą ir neskaidrumą

Pasirinkite **šešėlio spalvą** spalvų parinkikliu ir tiksliai sureguliuokite **neskaidrumą (0.0-1.0)** naudodami skaitmeninę įvestį. Pažymėkite **inset**, kad sukurtumėte vidinį šešėlį.

3 žingsnis: Nukopijuokite CSS kodą

Reguliuokite tikrindami peržiūrą, tada vienu paspaudimu nukopijuokite užbaigtą CSS kodą.

Šis įrankis veikia tik jūsų naršyklėje. Visas apdorojimas vyksta jūsų įrenginyje. Jokie duomenys nėra siunčiami išoriškai.

Naudojimo atvejai

CSS **box-shadow** generatorius gali būti naudojamas šiais scenarijais:

1. Gylio kūrimas kortelių stiliaus UI

Pridėkite švelnių šešėlių prie tinklaraščio įrašų kortelių ar produktų kortelių, kad sukurtumėte gylio pojūtį, kuris atrodo, kad plūduriuoja nuo ekrano. Kreipia vartotojo dėmesį ir pagerina paspaudimų rodiklius.

2. Mygtuko užvedimo efektai (Hover effects)

Sustiprinkite šešėlius užvedus pelę ant mygtukų, kad vizualiai praneštumėte, jog elementą galima spustelėti. Tiesiogiai pagerina naudojimą.

3. Modalinių langų atskyrimas nuo fono

Taikykite tamsius šešėlius modaliniams langams, kad juos aiškiai atskirtumėte nuo fono turinio. Sutelkia vartotojo dėmesį į konkrečius veiksmus.

4. Neumorphism dizainas

Pasiekite **Neumorphism** (Naujasis Skeuomorfizmas) dizainą derindami kelis šešėlius. Kurkite sudėtingas sąsajas, apimančias naujausias UI tendencijas.

5. Fokuso indikacija formos įvestims

Taikykite vidinius šešėlius (**inset**) įvesties elementams fokusuojant, kad vizualiai pabrėžtumėte šiuo metu aktyvų lauką. Pagerina formos naudojimą.

6. Fiksuota antraštės header navigacijos juosta

Pridėkite šešėlius prie antraščių, kurios išlieka fiksuotos slinkimo metu, kad paaiškintumėte ribą tarp turinio ir antraštės. Pasiekia ir įskaitomumą, ir dizaino kokybę.

Kas yra CSS box-shadow

**box-shadow** yra CSS savybė, kuri prideda šešėlius HTML elementams. Tai yra esminė web dizaino technika, kuri gali išreikšti gylį ir matmenis naudojant tik CSS kodą be paveikslėlių.

box-shadow parametrai

**box-shadow** nurodomas tokia tvarka: 'horizontalusis-poslinkis vertikalusis-poslinkis išsiliejimas išplitimas spalva'. Horizontalieji ir vertikalieji poslinkiai nustato šešėlio padėtį, išsiliejimas kontroliuoja krašto minkštumą, išplitimas kontroliuoja šešėlio dydį, o spalva gali būti nurodyta su **RGBA**, įskaitant skaidrumą.

inset (Vidinis šešėlis)

Pridėjus raktažodį **inset**, šešėlis piešiamas elemento viduje, o ne išorėje. Tinka išreikšti įtrauktas formos įvestis arba paspausto mygtuko būsenas.

Kelių šešėlių sluoksniavimas

Keli **box-shadows** gali būti nurodyti atskiriant kableliais šešėlių sluoksniavimui. **Neumorphism** dizainas sujungia šviesius ir tamsius šešėlius, kad išreikštų trimatę tekstūrą.

Dažnai Užduodami Klausimai

Ar CSS box-shadow generatorius yra nemokamas?

Taip, juo naudotis yra visiškai **nemokama**. Registracija nereikalinga, ir jis veikia jūsų naršyklėje, todėl galite pradėti jį naudoti iškart.

Kuo skiriasi išsiliejimas (blur) nuo išplitimo (spread)?

**Išsiliejimas** nustato, koks minkštas yra šešėlio kraštas, o **išplitimas** nustato, kiek padidinti ar sumažinti šešėlio dydį. Su **0** išsiliejimu ir **10** išplitimu gaunate aštrų, didelį šešėlį.

Kas yra Neumorphism?

**Neumorphism** yra dizaino technika, kuri sujungia šviesius ir tamsius šešėlius, kad elementai atrodytų išsikišę arba įdubę ekrane. Tai sukuria modernų, rafinuotą įspūdį.

Kada turėčiau naudoti inset (vidinį šešėlį)?

Naudokite jį išreikšdami įtrauktus elementus, pvz., įvesties laukus arba paspausto mygtuko būsenas. Kombinavimas su įprastais (išoriniais) šešėliais leidžia geriau išreikšti trimatį vaizdą.

Koks yra box-shadow poveikis našumui?

**box-shadow** yra palyginti lengva CSS savybė, tačiau didelio išsiliejimo ar kelių sluoksnių šešėliai gali padidinti atvaizdavimo apkrovą. Papildomas atsargumas reikalingas išmaniesiems telefonams.

Ar jį palaiko visos naršyklės?

**box-shadow** palaiko visos pagrindinės naršyklės, įskaitant IE9+, **Chrome**, **Firefox**, **Safari** ir **Edge**. Senesnėms naršyklėms gali prireikti tiekėjų prefiksų (-webkit-box-shadow).

Ar šešėlio spalva turėtų būti RGB ar RGBA?

Rekomenduojama **RGBA**, nes leidžia reguliuoti neskaidrumą. Apskritai, **0.1-0.3** šešėlio neskaidrumas sukuria natūralius šešėlius, kurie gerai dera su fonu.

Ar galiu naudoti sugeneruotą CSS kodą tokį, koks yra?

Taip, sugeneruotą kodą galima iškart naudoti nukopijavus ir įklijavus į savo CSS failą. Jis parašytas kaip **box-shadow** savybė ir yra paruoštas taikyti.