CSS Box-Shadow Ģenerators

Vizuali regulējiet ēnas un nekavējoties nokopējiet CSS kodu

Intuitīvi regulējiet **box-shadow** **horizontālo un vertikālo nobīdi**, **izplūšanu**, **izplatību**, **krāsu** un **necaurredzamību** ar slīdņiem. Precīzi noregulējiet ēnas reāllaikā ar priekšskatījumu un viegli sasniedziet sarežģītus dizainus, piemēram, **Neumorphism**. Nokopējiet pabeigto CSS kodu ar vienu klikšķi.

Priekšskatījums

Ēnas Īpašības

Horizontālā Nobīde (X) 0px

Vertikālā Nobīde (Y) 4px

Izplūšana (Blur) 12px

Izplatība (Spread) 0px

Krāsa Necaurredzamība

Iekšējā Ēna (inset)

Iepriekšējie Iestatījumi

Mīksta

Vidēja

Cieta

Neumorphism

Kā lietot

CSS **box-shadow** ģeneratora lietošana ir vienkārša:

1. solis: Regulējiet ēnu ar slīdņiem

Regulējiet **horizontālās nobīdes**, **vertikālās nobīdes**, **izplūšanas** un **izplatības** parametrus ar slīdņiem. Izmaiņas tiek atspoguļotas priekšskatījumā reāllaikā.

2. solis: Iestatiet krāsu un necaurredzamību

Izvēlieties **ēnas krāsu** ar krāsu atlasītāju un precīzi noregulējiet **necaurredzamību (0.0-1.0)** ar ciparu ievadi. Pārbaudiet **inset**, lai izveidotu iekšējo ēnu.

3. solis: Nokopējiet CSS kodu

Regulējiet, pārbaudot priekšskatījumu, un pēc tam ar vienu klikšķi nokopējiet pabeigto CSS kodu.

Šis rīks darbojas pilnībā jūsu pārlūkprogrammā. Visa apstrāde notiek jūsu ierīcē. Ārēji netiek sūtīti nekādi dati.

Lietošanas Gadījumi

CSS **box-shadow** ģeneratoru var izmantot šādos scenārijos:

1. Dziļuma radīšana karšu stila UI

Pievienojiet mīkstas ēnas emuāra ziņu kartēm vai produktu kartēm, lai radītu dziļuma sajūtu, kas šķiet peldam prom no ekrāna. Vada lietotāja uzmanību un uzlabo klikšķu skaitu.

2. Pogas peles pārlidošanas efekti (Hover effects)

Pastipriniet ēnas, pārlidojot ar peli virs pogām, lai vizuāli paziņotu, ka elements ir klikšķināms. Tieši uzlabo lietojamību.

3. Modālo logu atdalīšana no fona

Pielietojiet tumšas ēnas modālajiem logiem, lai tos skaidri atdalītu no fona satura. Koncentrē lietotāja uzmanību uz konkrētām darbībām.

4. Neumorphism dizains

Panāciet **Neumorphism** (Jaunais Skeuomorfisms) dizainu, kombinējot vairākas ēnas. Izveidojiet sarežģītas saskarnes, iekļaujot jaunākās UI tendences.

5. Fokusa indikācija veidlapas ievadēm

Pielietojiet iekšējās ēnas (**inset**) ievades elementiem fokusā, lai vizuāli uzsvērtu pašlaik aktīvo lauku. Uzlabo veidlapas lietojamību.

6. Fiksēta galvenes header navigācijas josla

Pievienojiet ēnas galvenēm, kas paliek fiksētas ritināšanas laikā, lai precizētu robežu starp saturu un galveni. Panāk gan lasāmību, gan dizaina kvalitāti.

Kas ir CSS box-shadow

**box-shadow** ir CSS īpašība, kas pievieno ēnas HTML elementiem. Tā ir būtiska tīmekļa dizaina tehnika, kas var izteikt dziļumu un dimensiju, izmantojot tikai CSS kodu bez attēliem.

box-shadow parametri

**box-shadow** tiek norādīts secībā 'horizontālā-nobīde vertikālā-nobīde izplūšana izplatība krāsa'. Horizontālā un vertikālā nobīde nosaka ēnas pozīciju, izplūšana kontrolē malas mīkstumu, izplatība kontrolē ēnas izmēru, un krāsu var norādīt ar **RGBA**, ieskaitot caurspīdīgumu.

inset (Iekšējā ēna)

Atslēgvārda **inset** pievienošana zīmē ēnu elementa iekšpusē, nevis ārpusē. Piemērots iebīdītu veidlapu ievadu vai nospiestu pogu stāvokļu izteikšanai.

Vairāku ēnu slāņošana

Vairākas **box-shadows** var norādīt ar komatu atdalīšanu ēnu slāņošanai. **Neumorphism** dizains apvieno gaišas un tumšas ēnas, lai izteiktu trīsdimensiju tekstūru.

Biežāk Uzdotie Jautājumi

Vai CSS box-shadow ģenerators ir bezmaksas?

Jā, tas ir pilnīgi **bezmaksas** lietošanai. Reģistrācija nav nepieciešama un tas darbojas jūsu pārlūkprogrammā, tāpēc jūs varat sākt to lietot nekavējoties.

Kāda ir atšķirība starp izplūšanu (blur) un izplatību (spread)?

**Izplūšana** nosaka, cik mīksta ir ēnas mala, savukārt **izplatība** nosaka, cik daudz palielināt vai samazināt ēnas izmēru. Ar **0** izplūšanu un **10** izplatību jūs iegūstat asu, lielu ēnu.

Kas ir Neumorphism?

**Neumorphism** ir dizaina tehnika, kas apvieno gaišas un tumšas ēnas, lai elementi izskatītos izvirzīti vai iebīdīti no ekrāna. Tā rada modernu, izsmalcinātu iespaidu.

Kad man vajadzētu izmantot inset (iekšējo ēnu)?

Izmantojiet to, izsakot iebīdītus elementus, piemēram, ievades laukus vai nospiestu pogu stāvokļus. Kombinācija ar parastajām (ārējām) ēnām nodrošina trīsdimensiju izpausmi.

Kāda ir box-shadow ietekme uz veiktspēju?

**box-shadow** ir salīdzinoši viegls CSS īpašums, bet ēnas ar lielu izplūšanu vai vairākām slāņotām ēnām var palielināt renderēšanas slodzi. Papildu piesardzība ir nepieciešama viedtālruņiem.

Vai to atbalsta visas pārlūkprogrammas?

**box-shadow** atbalsta visas galvenās pārlūkprogrammas, tostarp IE9+, **Chrome**, **Firefox**, **Safari** un **Edge**. Vecākām pārlūkprogrammām var būt nepieciešami piegādātāja prefiksi (-webkit-box-shadow).

Vai ēnas krāsai jābūt RGB vai RGBA?

Ieteicams **RGBA**, jo tas ļauj regulēt necaurredzamību. Parasti **0.1-0.3** ēnas necaurredzamība rada dabiskas ēnas, kas labi saplūst ar foniem.

Vai es varu izmantot ģenerēto CSS kodu tādu, kāds tas ir?

Jā, ģenerēto kodu var izmantot nekavējoties, nokopējot un ielīmējot to savā CSS failā. Tas ir uzrakstīts kā **box-shadow** īpašība un ir gatavs lietošanai.