CSS ir pilna ar iespējām uzlabot jūsu vietņu izskatu; teksta un lodziņu ēnas ir lieliski piemēri. Tie piedāvā līdzīgus rezultātus ēnām, kas atrodamas attēlu rediģēšanas programmatūrā, piemēram, Photoshop.
Bet kā darbojas CSS ēnas? Ienirsimies tieši iekšā.
Kā lietot CSS Box Shadow
Varat lietot CSS lodziņa ēnu ar vienu CSS rindiņu, kurā ir diapazons līdz sešām vērtībām. Vērtību secība ir ļoti svarīga, lai jūsu CSS lodziņa ēna darbotos, un tā izskatās šādi:
box-shadow: nobīde-x nobīde-y izplūduma izkliedētās krāsas ielaidums;Apskatīsim katru vērtību secībā.
CSS lodziņa ēnas pozīcija
Offset-x un offset-y vērtības nosaka lodziņa ēnas pozīciju. Nobīde-x vērtība apzīmē ēnas horizontālo stāvokli, savukārt nobīde-y ir vertikālā nobīde.
lodziņa ēna: 10 pikseļi 10 pikseļi;Pozitīvas vērtības rada ēnu zem elementa un pa labi no tā.
Varat arī izmantot negatīvas vērtības h nobīdei un v nobīdei:
lodziņa ēna: -10px -10px;Negatīvā h nobīde pārvieto ēnu pa kreisi, bet negatīva v nobīde to pārvieto uz augšu:
CSS lodziņa ēnu aizmiglojums
Kā redzat, pievienojot ēnai h-nobīdi un v-nobīdi, tiek izveidota viengabalaina ēna bez apspalvojuma. Izplūduma vērtība aizmiglo jūsu CSS lodziņa ēnu un stājas spēkā, ja norādāt trešo vērtību:
box-shadow: 10px 10px 20px;Jo lielāku skaitli pievienosiet izplūšanas vērtībai, jo izplūdušāka būs jūsu CSS lodziņa ēna. Šī vērtība nevar būt negatīva.
CSS Box Shadow Spread
Izplatības vērtība ļauj mainīt ēnas izmēru, nemainot tās pozīciju.
box-shadow: 10px 10px 20px 30px;Pozitīva izkliedes vērtība padarīs jūsu CSS lodziņa ēnu lielāku, bet negatīva vērtība samazinās to.
CSS kastes ēnu krāsa
CSS lodziņa ēnas pēc noklusējuma ir elementa teksta krāsa, taču varat to ignorēt, pievienojot krāsu:
kastes ēna: 10px 10px 20px 10px #0000ff;Izmantotajai krāsai ir jābūt CSS likumīgā krāsu formātā, piemēram, heksadecimālajā kodā, RGB kodā vai iepriekš definētā krāsā. Jūs varat uzziniet par hex kodiem un citas CSS likumīgās krāsu opcijas, pirms sākat darbu ar ēnām.
CSS Box Shadow Inset
CSS lodziņa ēnas pēc noklusējuma ir ārpus tām piešķirtā elementa. Pievienojot ielaidumu rekvizītam box-shadow, varat parādīt ēnu elementa iekšpusē.
kastes ēna: 10px 10px 20px 10px #0000ff ielaidums;Šī ir iepriekš noteikta teksta vērtība; vienkārši pievienojiet vai noņemiet to, lai iestatītu vērtību.
Kā lietot CSS teksta ēnu
CSS teksta ēnas ir kā lodziņa ēnas, lai gan tām ir mazāk vērtību, ko mainīt. CSS teksta ēnas sintakse izskatās šādi:
teksta ēna: nobīde-x nobīde-y izplūšanas rādiusa krāsa;Bet kā šīs vērtības darbojas?
CSS teksta ēnas pozīcija
CSS teksta ēnu nobīdes darbojas ļoti līdzīgi tām pašām lodziņa ēnu vērtībām:
teksta ēna: 10 pikseļi 10 pikseļi;Pozitīvas vērtības novietos ēnu zem teksta un pa labi no tā.
Negatīvās vērtības darbojas pretēji, novietojot ēnu virs teksta un pa kreisi no tā.
teksta ēna: -10px -10px;Varat sajaukt negatīvās un pozitīvās vērtības, lai perfekti novietotu CSS teksta ēnu.
CSS teksta ēnu izplūšanas rādiuss
CSS teksta ēnas izplūšanas rādiuss ļauj aizmiglot ēnu aiz teksta.
teksta ēna: 10 pikseļi 10 pikseļi 10 pikseļi; Šīs vērtības noklusējuma vērtība ir 0 (nav izplūšanas).
CSS teksta ēnu krāsa
Pēc noklusējuma CSS teksta ēnas atbilst teksta krāsai. Varat mainīt teksta krāsu, pievienojot to CSS teksta ēnas rekvizīta beigām.
teksta ēna: 10px 10px 10px #0000ff;Tāpat kā CSS lodziņa ēnu krāsas, šim nolūkam ir jāizmanto CSS likumīgā krāsa.
CSS lodziņa un teksta ēnu dizaina piemēri
Kad esat sapratis pamatus, varat sākt eksperimentēt ar CSS lodziņa un teksta ēnu izmantošanu. Tālāk sniegtajām idejām vajadzētu iedvesmot jūs izdomāt savus radošos veidus, kā izmantot šos CSS rekvizītus.
Divkrāsu apmales ar divām CSS lodziņa ēnām
HTML elementam varat pievienot vairāk nekā vienu lodziņa ēnu vai teksta ēnu. Ja vien starp tiem ir komats, vienam īpašumam varat pievienot jaunas ēnas.
kaste-ēna: 30px 30px#0000ff, -30 pikseļi-30 pikseļi 0px#00ff00;Šī divu krāsu apmale ir labs piemērs tam. Divas CSS kastes ēnas ar pretējām pozīcijām un bez izplūšanas/izkliedes rada izcilu radošu apmali.
Divas CSS teksta ēnas dramatiskam efektam
Līdzīgi kā iepriekš, varat pievienot un novietot tekstu vairākas teksta ēnas, lai iegūtu interesantus rezultātus.
teksta ēna: 35 pikseļi 20 pikseļi 4 pikseļi tumši pelēks, -35 pikseļi -20 pikseļi 4 pikseļi tumši pelēks;Šajā piemērā ir parādīta teksta rindiņa ar ēnu augšpusē un ēnu apakšā, kurām abām ir uz tekstu balstītas krāsu vērtības.
Daudzkrāsaini foni ar ievietotām CSS lodziņa ēnām
CSS ir pietiekami jaudīgs, lai izveidotu unikālus un interesantus līdzekļus bez ārējiem failiem. Lielisks piemērs tam ir ievietotas CSS lodziņa ēnas izmantošana kā fons.
kastes ēna: 20px 10px 10px 40px #000000 ielaidums, -50px -30px 8px 60px pelēks ielaidums, 30px 20px 6px 90px gaiši pelēks ielaidums;Šai kastītei ir balts fons, kā arī trīs ieliktas ēnas dažādās krāsās. Ēnas pārklājas viena ar otru, lai izveidotu unikālu fonu.
Šī efekta tālāka uzlabošana ir vienkārša pievienojot stilīgu CSS fona gradientu uz savu elementu.
CSS lodziņa ēnas un teksta ēnas radošam tīmekļa dizainam
CSS lodziņu un teksta ēnas ir viegli izmantot, tiklīdz zināt, kā ar tiem strādāt. Tagad jums ir nepieciešamie rīki, lai sāktu darbu pie saviem dizainparaugiem, taču jums vajadzētu turpināt pētīt CSS, lai uzlabotu savas prasmes.
