CSS Box-Shadow Generaator

Reguleerige varje visuaalselt ja kopeerige CSS-kood koheselt

Reguleerige box-shadow'i horisontaalset ja vertikaalset nihet, hägusust, hajutamist, värvi ja läbipaistmatust intuitiivselt liugurite abil. Viimistlege varje reaalajas eelvaatega ja saavutage hõlpsalt keerukaid disainilahendusi nagu Neumorphism. Kopeerige valmis CSS-kood ühe klõpsuga.

Eelvaade

Varju omadused

Horisontaalne Nihe (X) 0px

Vertikaalne Nihe (Y) 4px

Hägusus (Blur) 12px

Hajutamine (Spread) 0px

Värv Läbipaistmatus

Sisemine Vari (inset)

Eelseaded

Pehme

Keskmine

Kõva

Neumorphism

Kuidas kasutada

CSS box-shadow generaatori kasutamine on lihtne:

Samm 1: Reguleerige varju liugurite abil

Reguleerige horisontaalse nihke, vertikaalse nihke, hägususe ja hajutamise parameetreid liugurite abil. Muudatused kajastuvad eelvaates reaalajas.

Samm 2: Määrake värv ja läbipaistmatus

Valige värvivalija abil varju värv ja viimistlege läbipaistmatust (0.0-1.0) numbrilise sisendi abil. Märkige **inset**, et luua sisemine vari.

Samm 3: Kopeerige CSS-kood

Reguleerige samal ajal eelvaadet kontrollides, seejärel kopeerige valmis CSS-kood ühe klõpsuga.

See tööriist töötab täielikult teie brauseris. Kogu töötlemine toimub teie seadmes. Väliselt ei saadeta andmeid.

Kasutusjuhud

CSS box-shadow generaatorit saab kasutada järgmistes stsenaariumides:

1. Sügavuse loomine kaardistiilis UI jaoks

Lisage pehmed varjud blogipostituste või toote kaartidele, et luua sügavustunne, mis näib ekraanilt eemale ujuvat. Juhib kasutaja tähelepanu ja parandab klikkimise määra.

2. Nupu hõljumisefektid

Tugevdage varje nuppude kohal hõljumisel, et visuaalselt edastada, et elemendil on võimalik klõpsata. Parandab otseselt kasutatavust.

3. Modaaliakende eraldamine taustast

Rakendage modaaliakendele tumedaid varje, et neid taustasisust selgelt eraldada. Keskendab kasutaja tähelepanu konkreetsetele toimingutele.

4. Neumorphism disain

Saavutage **Neumorphism** (Uus Skeumorfism) disain mitme varju kombineerimisega. Ehitage keerukaid liideseid, mis sisaldavad uusimaid UI-trende.

5. Fookuse tähistamine vormi sisendite jaoks

Rakendage sisendielementidele fookuses sisemised varjud (**inset**), et visuaalselt rõhutada praegu aktiivset välja. Parandab vormi kasutatavust.

6. Fikseeritud päise navigatsiooniriba

Lisage kerimise ajal fikseeritud püsivatele päistele varjud, et selgitada piiri sisu ja päise vahel. Saavutab nii loetavuse kui ka disaini kvaliteedi.

Mis on CSS box-shadow

box-shadow on CSS-i omadus, mis lisab HTML-elementidele varje. See on oluline veebidisaini tehnika, mis suudab väljendada sügavust ja mõõtmeid ainult CSS-koodi abil, ilma piltideta.

box-shadow parameetrid

box-shadow määratakse järjekorras 'horisontaalne-nihe vertikaalne-nihe hägusus hajutamine värv'. Horisontaalsed ja vertikaalsed nihked määravad varju asukoha, hägusus kontrollib serva pehmust, hajutamine kontrollib varju suurust ja värvi saab määrata **RGBA**-ga, sealhulgas läbipaistvusega.

inset (Sisemine vari)

Märksõna **inset** lisamine joonistab varju elemendi sisse, mitte väljapoole. Sobib sissevajutatud vormisisendite või vajutatud nupu olekute väljendamiseks.

Mitu varju kihistamine

Varjude kihistamiseks saab määrata mitu **box-shadows** komaga eraldatuna. **Neumorphism** disain kombineerib heledaid ja tumedaid varje, et väljendada kolmemõõtmelist tekstuuri.

Korduma Kippuvad Küsimused

Kas CSS box-shadow generaator on tasuta?

Jah, see on täiesti **tasuta** kasutamiseks. Registreerimist ei nõuta ja see töötab teie brauseris, nii et saate seda kohe kasutama hakata.

Mis on hägususe (blur) ja hajutamise (spread) erinevus?

Hägusus määrab, kui pehme on varju serv, samal ajal kui hajutamine määrab, kui palju varju suurust suurendada või vähendada. Hägususega **0** ja hajutamisega **10** saate terava ja suure varju.

Mis on Neumorphism?

**Neumorphism** on disainitehnika, mis kombineerib heledaid ja tumedaid varje, et elemendid näeksid välja ekraanilt välja ulatuvad või sisse vajutatud. See loob kaasaegse ja keeruka mulje.

Millal peaksin kasutama inset'i (sisemine vari)?

Kasutage seda sissevajutatud elementide, näiteks sisestusväljade või vajutatud nupu olekute väljendamisel. Kombineerimine tavaliste (välimiste) varjudega võimaldab kolmemõõtmelisemat väljendust.

Milline on box-shadow'i mõju jõudlusele?

**box-shadow** on suhteliselt kerge CSS-i omadus, kuid suure hägususe või mitme kihilise varjuga varjud võivad renderdamiskoormust suurendada. Nutitelefonide puhul on vajalik eriline ettevaatus.

Kas seda toetavad kõik brauserid?

**box-shadow** on toetatud kõigi peamiste brauserite, sealhulgas IE9+, **Chrome**, **Firefox**, **Safari** ja **Edge** poolt. Vanemad brauserid võivad vajada tarnija eesliiteid (-webkit-box-shadow).

Kas varju värv peaks olema RGB või RGBA?

Soovitatav on **RGBA**, kuna see võimaldab läbipaistmatuse reguleerimist. Üldiselt loob varju läbipaistmatus **0.1-0.3** loomulikke varje, mis sulanduvad hästi taustaga.

Kas ma saan genereeritud CSS-koodi kasutada sellisel kujul?

Jah, genereeritud koodi saab koheselt kasutada, kopeerides ja kleepides selle oma CSS-faili. See on kirjutatud **box-shadow** omadusena ja on rakendamiseks valmis.