CSS box-shadow rekvizīts ir viens no galvenajiem rīkiem tīmekļa dizainā, lai vizuāli nodalītu elementus, piešķirtu tiem dziļumu un vadītu lietotāja uzmanību. Izmantojot Box Shadow ģenerators rīku, ir iespējams vizuāli konfigurēt un reāllaikā redzēt, kā dažādas parametru vērtības ietekmē elementa izskatu, un uzreiz iegūt gatavu kodu integrēšanai projektā.
CSS box-shadow rekvizīta uzbūve
Lai pilnvērtīgi izmantotu rīku, ir svarīgi izprast, kā katrs slīdnis ietekmē gala CSS kodu. Standarta box-shadow deklarācija sastāv no vairākām skaitliskām vērtībām un krāsas definīcijas. Rīks ļauj kontrolēt šādus parametrus:
- Horizontālā nobīde: Nosaka, cik tālu ēna nobīdās pa kreisi vai pa labi no elementa. Slīdņa diapazons ir no -50px līdz 50px. Negatīvas vērtības nobīda ēnu pa kreisi, pozitīvas — pa labi.
- Vertikālā nobīde: Kontrolē ēnas pārvietošanos uz augšu vai uz leju. Diapazons ir no -50px līdz 50px. Negatīvas vērtības virza ēnu uz augšu, pozitīvas — uz leju.
- Izpludināšana: Nosaka, cik mīkstas un izkliedētas būs ēnas malas. Šī vērtība var būt no 0px (asa, precīza ēna) līdz 100px (ļoti izkliedēta, maiga ēna).
- Izplatīšanās: Palielina vai samazina ēnas pamata izmēru pirms izpludināšanas piemērošanas. Slīdņa diapazons ir no -50px līdz 50px. Pozitīva vērtība izpleš ēnu uz visām pusēm, savukārt negatīva vērtība savelk ēnu uz iekšu, padarot to mazāku par pašu elementu.
- Ēnas krāsa un Necaurspīdīgums: Krāsu izvēlne ļauj definēt ēnas toni, bet atsevišķs slīdnis regulē caurspīdīguma līmeni, lai ēna dabiski saplūstu ar fonu.
Nobīdes, izpludināšanas un izplatīšanās mijiedarbība
Vizuālo uztveri tieši ietekmē visu trīs skaitlisko parametru attiecība. Piemēram, lai radītu dabisku pacēluma efektu, nepietiek tikai ar lielu izpludināšanas vērtību. Ja izpludināšana ir liela, bet izplatīšanās paliek nulle, ēna var izskatīties pārāk netīra vai nedabiska.
Izmantojot negatīvu izplatīšanās vērtību, tiek panākts efekts, kurā ēna tiek ievilkta elementa perimetra iekšpusē. Apvienojot to ar mērenu vertikālo nobīdi un izpludināšanu, var izveidot ļoti smalku, ciešu ēnu, kas liek elementam izskatīties tikai nedaudz paceltam virs virsmas, neradot vizuālu troksni.
Parastās un iekšējās ēnas atšķirības
Pēc noklusējuma ēna tiek renderēta ārpus elementa robežām, radot iespaidu, ka elements peld virs fona. Tomēr, aktivizējot opciju Iekšējā ēna (Inset), ēnas virziens tiek pilnībā mainīts.
Iekšējā ēna tiek zīmēta elementa iekšpusē, radot dziļuma un ieliekuma efektu. Šis režīms ir noderīgs, lai vizuāli attēlotu elementus, kas ir iespiesti virsmā. Tipiski lietošanas piemēri ir formas ievades lauki, kurus nepieciešams parādīt kā iedziļinātus, vai pogas aktīvais stāvoklis (pressed state), kad lietotājs uz tās noklikšķina.
Dziļuma un reālisma radīšana ar vairākiem slāņiem
Viena plakana ēna bieži vien nespēj precīzi imitēt to, kā gaisma izplatās reālajā pasaulē. Dabiskā apgaismojumā ēna parasti sastāv no vairākām daļām: asākas, tumšākas ēnas tieši zem objekta un gaišākas, izkliedētākas ēnas, kas plūst tālāk.
Lai to sasniegtu tīmekļa dizainā, tiek izmantota vairāku ēnu slāņu klāšana. Rīks atbalsta vairāku slāņu pārvaldību:
- Sadaļā Ēnas slāņi varat pārskatīt pašreizējos slāņus.
- Poga Pievienot slāni izveido jaunu ēnas slāni ar noklusējuma vērtībām.
- Poga Noņemt slāni ļauj dzēst atlasīto slāni, kas vairs nav nepieciešams.
Rīks sākotnēji piedāvā piecus sagatavotus slāņus. Pirmajam slānim ir noklusējuma vērtības 0 8 24 -4 ar 18% caurspīdīgu melnu krāsu, savukārt pārējie četri slāņi sākotnēji ir paslēpti. Kad tiek izmantoti vairāki slāņi, ģenerētais CSS kods automātiski apvieno visas definētās ēnas vienā rindā, atdalot tās ar komatiem.
Datu apstrāde un privātums
Izmantojot šo rīku, visa parametru pielāgošana un vizuālā attēlošana notiek lokāli. Katra ēna tiek renderēta jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo serveros, nodrošinot, ka jūsu dizaina izstrādes process paliek pilnībā jūsu ierīcē.
Biežāk uzdotie jautājumi
Ko tieši kontrolē nobīde, izpludināšana un izplatīšanās?
Nobīde (Offset) pārvieto ēnu pa kreisi/pa labi un uz augšu/uz leju, izpludināšana (blur) mīkstina tās malas, bet izplatīšanās (spread) palielina vai samazina to pirms izpludināšanas. Negatīva izplatīšanās savelk ēnu uz iekšu, kas ir noderīgi ciešai, tuvai ēnai.
Ko dara iekšējās ēnas (inset) opcija?
Parasta ēna krīt ārpus elementa, līdzīgi kā gaisma aiz paceltas kartītes. Iekšējā ēna (Inset) to pagriež uz iekšu, liekot elementam izskatīties iespiestam — tas ir noderīgi padziļinātiem ievades laukiem vai nospiestām pogām.
Kāpēc klāt vairāk nekā vienu ēnas slāni?
Viena ēna virs noteikta izmēra izskatās plakana. Reālistisks pacēlums parasti apvieno šauru, tumšu ēnu ar mīkstu, platāku ēnu — pievienojiet otru slāni un pielāgojiet katru atsevišķi, lai panāktu šo efektu.