Ēnu efekti tumšajā režīmā: kā pielāgot CSS ēnu vērtības tumšajiem saskarnēm
Tumšais režīms kļuvis par standartu lietojumprogrammās un tīmekļa vietnēs, taču lielākā daļa padomu par ēņiem pieņem, ka fons ir gaišs. Kad tu pārvietosi savas ēnu vērtības uz tumšu saskarni, melnas ēnas uz tumšiem paneļiem pilnīgi pazūd. Dziļums, ko tu tik rūpīgi izveidoji gaišajam režīmam, irzuda. Tumšajiem fonam nepieciešams pavisam atšķirīgs pieeja, un tas sākas ar izpratni, kāpēc melnas ēnas tumšumā nedarbojas.
Problēma ir vienkārša: ēnas darbojas, radot kontrastu. Melna ēna uz gaiša fona rada redzamu tumšumu. Melna ēna uz tumša fona rada gandrīz nekādu kontrastu. Tu nevari padarīt kaut ko tumšāku par to, kas tas jau ir. Tas nozīmē, ka viss tavs augstuma sistēma ir jāpielāgo, kad pārslēdzies uz tumšo režīmu.
Šis ceļvedis tevi iepazīstina ar ēnu izmaiņām, kuras tev jāveic, kā tās pareizi pārbaudīt un kad paļauties uz robežām un kontrastu nevis tikai uz ēņiem. Uzzināsi arī, kuras ēnu vērtības darbojas gan gaišās, gan tumšās tēmās bez pastāvīgas pārslēgšanās.
Kāpēc melnas ēnas nedarbojas tumšajā režīmā
Tradicionālā box-shadow pieeja izmanto daļēji caurspīdīgu melnu krāsu: rgba(0, 0, 0, 0.12). Tas lielisks darbojas uz baltā un gaiša pelēka fona, jo tumšums izceļas pret gaišāku virsmu. Uz tumša fona, piemēram, #1a1a1a vai #0f0f0f, tā pati ēna ir gandrīz neredzama.
Reālā gaisma fiziskajā telpā darbojas pretēji. Uz tumšām virsmām tu redzat gaišākas ēnas, ko rada gaismas avoti. Iedomājies tumšu istabu ar lampu — ēna ir redzama, jo tā ir pretī gaismas avotam, nevis tāpēc, ka tā ir tumšāka par virsmu. Tāpēc tumšajā UI dizainā izmanto pretējo: gaišākas ēnas nevis tumšākas.
Kad tu izmanto tīru melnu ēnu uz tumša paneļa, tu prasi: "Padarī šo jau tumšo lietu vēl tumšāku." Panelis jau absorbē gaismu, tāpēc tumšākas ēnas pievienošana neko nepievieno. Acis nevar saskatīt atšķirību.
Risinājums ir pārslēgšanās uz gaišākām ēnām tumšajiem fonam. Tā vietā, lai izmantotu rgba(0, 0, 0, 0.12), tu izmanto kaut ko līdzīgu rgba(255, 255, 255, 0.08) vai rgba(255, 255, 255, 0.12). Tas pievieno gaismas kontrastu, ko acis faktiski var noteikt uz tumša virsmas.
CSS ēnu ģeneratora izmantošana tumšajā režīmā
Veidojot tumšā režīma ēnas, ēnu ģenerators kļūst vēl vērtīgāks nekā gaišajam režīmam. Tev jāpriekšskatīta ēnas pret reālistiskiem tumšajiem fonam, nevis jāuzmin necaurlaidības un neskaidrības vērtības.
Sāc ar fona krāsas iestatīšanu ģeneratorā, lai tā atbilstu tavai tumšai saskarni. Ja tavs tumšais motīvs izmanto #1a1a1a, iestat to kā priekšskatījuma fonu. Pēc tam pielāgo ēnu krāsu no melnas uz baltu un sāc eksperimentēt ar necaurlaidību un neskaidrību.
Subtila tumšā režīma ēna varētu izskatīties šādi:
box-shadow: 0px 4px 16px 0px rgba(255, 255, 255, 0.08);Tas pievieno gaismu tumšai virsmai, radot redzamu dziļumu bez tam, ka saskarni padarītu auksti vai pārmērīgi spīdīgu. Necaurlaidība ir zema — 8% — jo baltas ēnas var pārslogot tumšu saskarni, ja tu neesi uzmanīgs.
Mainītu necaurlaidības slīdni ģeneratorā un novēro, kas notiek. Pamanīsi, ka pat neliels balas ēnas necaurlaidības pieaugums var radīt lielu vizuālu atšķirību uz tumšajiem fonam. Tas, kas izskatās labi uz tumšas virsmas, bieži vien ir daudz gaišāks nekā tu gaidītu.
Offset, neskaidrības un izplatības pielāgošana tumšajiem fonam
X un Y offset parasti paliek nemainīgi starp gaišo un tumšo režīmu. Joprojām vēlies, lai ēnas pārvietojas uz leju un ir centētas kartītēm un paneļiem. Atšķirība ir neskaidrībā un izplatībā.
Tumšajam režīmam bieži vien ir nepieciešama lielāka neskaidrība, jo baltas ēnas pēc dabas ir pamanāmākas nekā melnas. Ēna, kas izskatās mīksta un dabiiska uz gaiša fona, uz tumša fona var izrādīties skarba, pat pie mazākas necaurlaidības. Neskaidrības palielināšana izkliež gaismu, padarot to mazāk mākslīgu.
Neskaidrību palielini par 25% vai vairāk, pārejot no gaiša uz tumšo. Kartītes ēna, kas izmantoja blur: 12px, varētu izmantot blur: 16px vai blur: 20px tumšajā režīmā. Tas rada gradualāku pāreju no paneļa uz fonu, kas izskatās dabigāk un mazāk strauts.
Izplatība parasti paliek uz nulles vai nedaudz negatīva. Negatīva izplatība var palīdzēt noturēt ēnu cieši pie elementa, īpaši noderīgi tumšajā režīmā, kur vēlies augstumu bez vizuālā smaguma.
Tumšā režīma ēnu piemēri
Subtila kartītes ēna tumšajam režīmam
box-shadow: 0px 4px 16px 0px rgba(255, 255, 255, 0.06);Izmanto to parastajai kartītei, saraksta vienumiem vai mērinstrumenta paneļiem uz tumšajiem fonam. Necaurlaidība ir ļoti zema — 6% — jo balts izceļas ātri. Neskaidrība ir vidēja, lai ēna paliktu mīksta.
Peldoša kartīte tumšajam režīmam
box-shadow: 0px 12px 32px 0px rgba(255, 255, 255, 0.10);Izmanto to izceltam saturam, novirzīšanas stāvokļiem vai kartītēm, kurām jāizskatās vairāk paaugstinātas. Y offset un neskaidrība pieaug, lai izveidotu lielāku atdalīšanu. Necaurlaidība pieaug nedaudz līdz 10%, lai paaugstinājums būtu redzams.
Modālā loga ēna tumšajam režīmam
box-shadow: 0px 24px 64px -8px rgba(255, 255, 255, 0.15);Modālie logi sēž virs vispārējā, tāpēc ēna ir drosmīgāka. Necaurlaidība sasniedz 15% un neskaidrība pagarinās līdz 64px. Negatīvā izplatība notur ēnu cieši pie elementa. Tas joprojām ir daudz gaišāks nekā salīdzināma gaišā režīma modāļa ēna, bet tas rada skaidru atdalīšanu.
Ieversta ēna tumšajam režīmam
box-shadow: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.04);Ievertas ēnas uz tumšajiem fonam ir sarežģītas. Balta ieveļta ēna var izskatīties dīvaina. Paturi to ļoti subtilu — 4% necaurlaidību vai mazāk. Tas var darboties iespiestiem ievades laukam vai vadielemiem, taču daudzas tumšās UI pilnībā izlaiž ievertas ēnas un paļaujas uz robežu krāsām.
Tumšā režīma ievades ēna
box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.04);Ievades lauki tumšajā režīmā bieži ir iedziļinājumi. Ļoti subtila gaismas ēna var hint ievades laukam, nepadarot to spīdīgu. Daži dizaini izlaiž ēnu un izmanto robežu.
Vairākas ēnas tumšajā režīmā
Tumšais režīms ir vieta, kur vairākas ēnas patiešām mirdzas. Viena gaismas ēna var izskatīties plakana vai mākslīga. Divas ēnas — cieta kontakta ēna un mīkstāka vide ēna — izskatās dabigāks.
box-shadow:
0px 1px 3px rgba(255, 255, 255, 0.04),
0px 8px 24px rgba(255, 255, 255, 0.08);Pirmā ēna ir cieta un subtila, pārstāvējot gaismu kontaktu ar tuvajiem virsmas. Otrā ir mīkstāka un lielāka, pārstāvējot apkārtējās gaismas atstarošanu. Kopā viņi rada dziļumu bez skarba izskata.
Ģenerators izveido vienu ēnu vienlaikus, tāpēc, ja vēlies šo slāņotu efektu, izveido katru ēnu atsevišķi, kopē tās un manuāli apvieno ar komatu.
Kad izlaist ēnas un izmantot robežas tā vietā
Tumšais režīms ir mācījis daudzus dizainerus svarīgu stundu: ēnas ne vienmēr ir labākais rīks atdalīšanas radīšanai. Dažreiz robeža darbojas labāk.
Subtila gaismas robeža bieži vien var aizstāt ēnu tumšajā režīmā:
border: 1px solid rgba(255, 255, 255, 0.12);Tas rada skaidru vizuālo atdalīšanu, neieviešot gaismu, kas varētu izskatīties nenatūrāla. Robeža plus ļoti subtila ēna bieži darbojas labāk nekā ēna viena.
Daudzas modernas tumšas saskarnes izmanto šo kombinēto pieeju:
- Gaisa robeža, lai definētu malu
- Neobligāta ļoti subtila balta ēna paaugstinājumam
- Krāsu kontrasts un fona atšķirības papildus hierarhijai
Tas rada dziļumu caur vairākām metodēm, nevis paļaujoties tikai uz ēnām.
Tumšo ēnu pārbaude dažādos tumšajos fonam
Ne visas tumšās fons ir vienādas. Tumšais pelēks #1a1a1a ir pavisam atšķirīgs no gandrīz-melna #0f0f0f. Tava ēna ir jādarbina visā savā krāsu paletē.
Iestat ģeneratora fonu uz katru tumšo krāsu, ko izmanto savā dizainā, un priekšskatīti ēnu ar tiem pašiem iestatījumiem. Var gadīties, ka ēna darbojas perfekti uz #1a1a1a, bet pazūd uz #0f0f0f. Tādā gadījumā vai nu jāpalielina necaurlaidība nedaudz, vai jāizmanto atšķirīga ēnas vērtība šim kontekstam.
Tāpēc fona krāsas selektors ēnu ģeneratorā ir svarīgs tumšajam režīmam. Izmanto to, lai pārbaudītu savas ēnas pret vairāku tumšu nokrāsojumiem, nevis tikai vienu.
Krāsainas ēnas tumšajā režīmā
Tu neesi ierobežots tikai ar baltām ēnām tumšajā režīmā. Krāsainas ēnas var darboties skaisti, ja tās atbilst tavai zīmolam vai tēmai.
Zilā tintā ēna tumšajam režīmam varētu izskatīties šādi:
box-shadow: 0px 8px 24px 0px rgba(100, 150, 255, 0.12);Vai subtila silta tona:
box-shadow: 0px 8px 24px 0px rgba(255, 180, 100, 0.08);Krāsainas ēnas var izskatīties koherentākas ar tumšu saskarni nekā tīra balta, it īpaši, ja krāsa ir saistīta ar tavs zīmolu. Paturi necaurlaidību zemu — tas pats noteikums attiecas uz to, vai ēna ir balta vai krāsaina. Krāsa jābūt redzamai, bet ne apgrūtinošai.
Konsekventes tumšā režīma ēnu sistēmas izveidošana
Labākie tumšā režīma dizaini izmanto tikai 3–4 ēnu vērtības konsekventi:
Mazs paaugstinājums (kartītes, grupēts saturs): `css box-shadow: 0px 4px 16px 0px rgba(255, 255, 255, 0.06); `
Vidējs paaugstinājums (nolaižamie saraksti, popover): `css box-shadow: 0px 12px 32px 0px rgba(255, 255, 255, 0.10); `
Liels paaugstinājums (modālie logi, pārklājumi): `css box-shadow: 0px 24px 64px -8px rgba(255, 255, 255, 0.15); `
Novirzīšana/aktīvs stāvoklis (pievieno uzsvaru): `css box-shadow: 0px 12px 32px 0px rgba(255, 255, 255, 0.12); `
Dokumentē šīs vērtības savā dizaina sistēmā. Izmanto tās konsekventi. Tas rada paredzamu hierarhiju, ko lietotāji iemācās atpazīt.
Bieži sastoptas tumšā režīma ēnu kļūdas
Visizplatītākā kļūda ir gaišā režīma ēnu vērtību nemainīta izmantošana tumšajā režīmā. Iegūsi neredzamas ēnas un plakanu saskarni.
Vēl viena kļūda ir tumšā režīma ēnu pārāk spilgta padarīšana. Baltas ēnas ar 20% vai 30% necaurlaidību var izskatīties skarba un mākslīga uz tumšajiem fonam. Paturi tumšā režīma ēnas daudz subtilākas nekā tu domā, ka tās jābūt.
Daži dizaineri tumšajā režīmā pilnībā izlaiž ēnas un izmanto tikai robežas un krāsas kontrastu. Tas var darboties, bet tas zaudē dziļumu un paaugstinājumu, ko nodrošina ēnas. Mērķis ir līdzsvars — subtils ēnas plus citas atdalīšanas metodes.
Visbeidzot, nepārbaudī tumšā režīma ēnas uz gaiša fona un nepieņem, ka tās darbosies. Vizuālais rezultāts ir pilnīgi atšķirīgs. Vienmēr priekšskatīti tumšas ēnas pret faktiskajiem tumšajiem fonam tavā ģeneratorā vai dizaina rīkā.
Gaiša un tumšā motīva saderība
Ja tev jāatbalsta gan gaiša, gan tumšā motīva ar to pašu komponenti, nevari izmantot vienu ēnas vērtību. Tev ir jāpārslēdz ēnas atkarībā no motīva.
CSS mainīgo izmantošana padarī to tīru:
:root {
--shadow-card: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
:root {
--shadow-card: 0px 4px 16px 0px rgba(255, 255, 255, 0.06);
}
}
.card {
box-shadow: var(--shadow-card);
}Pārlūks automātiski pielieto pareizo ēnu, pamatojoties uz lietotāja sistēmas preferences. Tas ir daudz tīrāks nekā atsevišķu selektoru pārvaldīšana gaiša un tumšā režīmam.
Izmanto ēnu ģeneratoru, lai izveidotu gan gaiša, gan tumšā versiju, pēc tam saglabā tās kā mainīgos. Zināsi, ka abas ir pārbaudītas un vizuāli pareizas pirms to izsūtīšanas.
Kad tumšā režīma ēnas patiešām darbojas labi
Neskatoties uz izaicinājumiem, tumšā režīma ēnas pilnīgi darbojas, kad tās padarī pareizas. Modāļa logi tumšajā režīmā labojās no subtilām gaismas ēnām, jo tie sēž virs lapas. Novirzīšanas stāvokļi kartītēm izskatās atsauces ar nelielu ēnas palielināšanu. Navigācija, kas peldē virs satura, ir nepieciešama ēna atdalīšanas nodrošināšanai.
Atslēga ir ierobežojumu ievērošana: baltas ēnas, zemāka necaurlaidība, lielāka neskaidrība un vienmēr pārbaude pret reāliem tumšajiem fonam. Kad to dari, tumšā režīma ēnas nodrošina tos pašus vizuālos ieguvumus, kā gaišā režīma ēnas — dziļumu, hierarhiju un atbildi.
Tumšais režīms vairs nav biheits. Tas ir standarts. Ēnu izveide tumšajiem fonam ir obligāta prasme mūsdienu tīmekļa dizainā. Izmanto savu ēnu ģeneratoru, lai pārbaudītu un uzlabotu savas tumšā režīma ēnas, izveido konsekventi ēnu vērtību komplektu un dokumentē tās savai komandai. Tavs tumšais režīms izskatīsies polierts, nevis plakans.