CSS Box-Shadow Rafall

Stilltu skugga sjónrænt og afritaðu CSS kóða samstundis

Stilltu **box-shadow** lárétta og lóðrétta offsetið, óskýrleika, dreifingu, lit og ógagnsæi innsæislega með sleðum. Fínstilltu skugga í rauntíma með forskoðun og náðu auðveldlega flóknum hönnunum eins og **Neumorphism**. Afritaðu fullbúinn CSS kóða með einum smelli.

Forskoðun

Eiginleikar Skugga

Lárétt Offset (X) 0px

Lóðrétt Offset (Y) 4px

Óskýrleiki (Blur) 12px

Dreifing (Spread) 0px

Litur Ógagnsæi

Innri Skuggi (inset)

Forstillingar

Mjúkur

Miðlungs

Harður

Neumorphism

Hvernig á að nota

Það er einfalt að nota CSS box-shadow rafalinn:

Skref 1: Stilltu skugga með sleðum

Stilltu **lárétta offsetið**, **lóðrétta offsetið**, **óskýrleika** og **dreifingu** með sleðum. Breytingar endurspeglast í forskoðuninni í rauntíma.

Skref 2: Stilltu lit og ógagnsæi

Veldu **skuggalit** með litavali og fínstilltu **ógagnsæi (0.0-1.0)** með tölulegu inntaki. Hakaðu við **inset** til að búa til innri skugga.

Skref 3: Afritaðu CSS kóða

Stilltu á meðan þú athugar forskoðunina og afritaðu síðan fullbúinn CSS kóða með einum smelli.

Þetta tól keyrir alfarið í vafranum þínum. Öll vinnsla fer fram á tækinu þínu. Engin gögn eru send út á við.

Notkunarsvið

Hægt er að nota CSS box-shadow rafalann í eftirfarandi tilvikum:

1. Að skapa dýpt fyrir kortastíls UI

Bættu mjúkum skuggum við bloggfærslukort eða vörukort til að skapa tilfinningu fyrir dýpt sem virðist fljóta frá skjánum. Leiðir athygli notenda og bætir smellihlutfall.

2. Hnappa hover áhrif

Styrktu skugga þegar sveimað er yfir hnappa til að koma sjónrænt á framfæri að hægt sé að smella á frumefnið. Bætir notagildi beint.

3. Að skilja modal glugga frá bakgrunni

Notaðu dökka skugga á modal glugga til að aðgreina þá greinilega frá bakgrunni. Beinist athygli notenda að tilteknum aðgerðum.

4. Neumorphism hönnun

Náðu fram **Neumorphism** (Nýtt Skeuomorphism) hönnun með því að sameina marga skugga. Byggðu upp flókin viðmót sem innihalda nýjustu UI strauma.

5. Fókusskilaboð fyrir eyðublaðsinntak

Notaðu innri skugga (**inset**) á inntaksfrumefni á fókus til að leggja sjónrænt áherslu á virka reitinn. Bætir notagildi eyðublaðsins.

6. Föst haus header siglingarstika

Bættu skuggum við hausa sem haldast fastir við skrun til að skýra mörkin milli efnis og hauss. Nær bæði læsileika og hönnunargæðum.

Hvað er CSS box-shadow

**box-shadow** er CSS eiginleiki sem bætir skuggum við HTML frumefni. Það er nauðsynleg vefhönnunartækni sem getur tjáð dýpt og vídd með því að nota eingöngu CSS kóða án mynda.

box-shadow breytur

**box-shadow** er tilgreint í röðinni 'lárétt-offset lóðrétt-offset óskýrleiki dreifing litur'. Lárétt og lóðrétt offset ákvarða stöðu skuggans, óskýrleiki stýrir mýkt kantsins, dreifing stýrir stærð skuggans, og litur er hægt að tilgreina með **RGBA** þar á meðal gagnsæi.

inset (Innri skuggi)

Að bæta við lykilorðinu **inset** dregur skuggann inn í frumefnið frekar en utan. Hentar til að tjá inndregnar eyðublaðsinntak eða niðurdregna hnappastöðu.

Lögun margra skugga

Hægt er að tilgreina marga **box-shadows** með kommuaðskilnaði til að leggja skugga í lög. **Neumorphism** hönnun sameinar ljósa og dökka skugga til að tjá þrívíddar áferð.

Algengar Spurningar

Er CSS box-shadow rafallinn ókeypis?

Já, það er algjörlega **ókeypis** í notkun. Engin skráning er nauðsynleg og það keyrir í vafranum þínum, svo þú getur byrjað að nota það strax.

Hver er munurinn á óskýrleika (blur) og dreifingu (spread)?

**Óskýrleiki** ákvarðar hversu mjúkur skuggabrúnin er, en **dreifing** ákvarðar hversu mikið á að stækka eða minnka skuggastærðina. Með **0** óskýrleika og **10** dreifingu færðu skarpan, stóran skugga.

Hvað er Neumorphism?

**Neumorphism** er hönnunartækni sem sameinar ljósa og dökka skugga til að láta frumefni virðast standa út eða dragast inn frá skjánum. Það skapar nútímalegan, fágaðan svip.

Hvenær ætti ég að nota inset (innri skugga)?

Notaðu það þegar þú tjáir inndregin frumefni eins og inntaksreiti eða niðurdregna hnappastöðu. Samsetning með venjulegum (ytri) skuggum gerir meira þrívítt tjáningu kleift.

Hver eru áhrif box-shadow á frammistöðu?

**box-shadow** er tiltölulega léttur CSS eiginleiki, en skuggar með miklum óskýrleika eða marglaga skuggar geta aukið álag á flutning. Aukinnar varúðar er þörf fyrir snjallsíma.

Er það stutt af öllum vöfrum?

**box-shadow** er stutt af öllum helstu vöfrum, þar á meðal IE9+, **Chrome**, **Firefox**, **Safari**, og **Edge**. Eldri vafrar gætu þurft forskeyti birgja (-webkit-box-shadow).

Á skuggaliturinn að vera RGB eða RGBA?

**RGBA** er mælt með því þar sem það leyfir ógagnsæisstillingu. Almennt séð skapar **0.1-0.3** ógagnsæi skugga náttúrulega skugga sem blandast vel við bakgrunn.

Get ég notað mynduðu CSS kóðann eins og hann er?

Já, hægt er að nota myndaða kóðann strax með því að afrita og líma hann inn í CSS skrána þína. Hann er skrifaður sem **box-shadow** eiginleiki og er tilbúinn til að nota.