Box Shadow ģenerators

Kas ir šis rīks?

box-shadow ir CSS īpašība, kas velk ēnu aiz (vai iekšpusē) elementa. Rakstot ar roku, tā prasa līdz pieciem vērtībām noteiktā secībā — horizontālā nobīde, vertikālā nobīde, izplūduma rādiuss, izkliedes rādiuss un krāsa — plus neobligāto inset atslēgvārdu, ko visu ir viegli sajaukt vai iegūt pārāk smalku/pārāk smagu pirmajā mēģinājumā.

Šis rīks to pārvērš tiešā manipulācijā: velciet slīdni, vērojiet, kā ēna mainās tiešraides priekšskatījuma kastē, un nokopējiet precīzu CSS, kad tas izskatās pareizi. Krāsu izvēlētājs kopā ar caurspīdīguma slīdni automātiski ģenerē pareizu rgba() vērtību, jo caurspīdīgas ēnas parasti izskatās labāk nekā pilnīgi necaurspīdīgas.

Kāpēc to izmantot?

• Tiešraides priekšskatījums atjaunojas tūlītēji, pielāgojot jebkuru kontroli — redziet precīzu ēnu, pirms iesaistāties kodā.
• Pilna kontrole pār offset-x, offset-y, izplūdumu, izkliedi, krāsu un caurspīdīgumu vienuviet.
• Viena klikšķa pievieno inset iespaidam "iespiests / iegrimis", nevis peldošu krītošo ēnu.
• Izvada gatavu kopēt un ielīmēt CSS, ar krāsu jau pārvērstu rgba() jūsu izvēlētā caurspīdīguma līmenī.
• Darbojas pilnībā jūsu pārlūkā — nekas, ko konfigurējat, netiek nekur augšupielādēts.
• Bez maksas, bez reģistrācijas, darbojas mobilajā ierīcē.

Kā to lietot

1. Iestatiet offset-x un offset-y, lai novietotu ēnu — pozitīvas vērtības to virza pa labi/uz leju, negatīvas — pa kreisi/uz augšu.
2. Palieliniet izplūduma rādiusu, lai mīkstinātu ēnas malu; palieliniet izkliedi, lai ēna būtu lielāka par pašu elementu.
3. Izvēlieties krāsu un pielāgojiet caurspīdīgumu — vairums reālistisku ēnu izmanto 15–40% caurspīdīgumu, nevis tīri melnu krāsu.
4. Atzīmējiet 'inset', ja vēlaties, lai ēna parādās elementa apmales iekšpusē, nevis aiz tās.
5. Nokopējiet ģenerēto CSS un ielīmējiet to savā stila lapā.

Piemērs

Ievade

Nobīde: 0px, 10px · Izplūdums: 20px · Izkliede: 0px · Krāsa: melna 35% caurspīdīgumā

Izvade

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Maiga ēna tieši zem elementa bez horizontālas nobīdes — viens no biežāk sastopamajiem kartīšu/pogu ēnu stiliem.

Viena ēna pret slāņotām ēnām

Šis rīks veido vienu ēnas slāni, kas sedz lielāko daļu reālu lietošanas gadījumu — pogas, kartītes, modālie logi un nolaižamās izvēlnes gandrīz vienmēr izmanto vienu ēnu. CSS atbalsta arī komatu atdalītas vairākas ēnas uz viena elementa sarežģītākiem dziļuma efektiem (piemēram, ciešu, tumšu ēnu, kas ievietota zem maigas, plašas ēnas), taču tas ir uzlabojums, ko varat pievienot ar roku: ģenerējiet vienu ēnu šeit, tad pavairojiet rindu, pielāgojiet otro vērtību kopu, un savienojiet tās ar komatu.

Biežākie box-shadow modeļi

• Smalka kartītes pacēluma efekts: neliela nobīde (0–4px), mērena izplūdums (8–16px), 10–20% caurspīdīguma melna krāsa.
• Paceltais modālais logs/nolaižamā izvēlne: lielāka nobīde (4–10px) un izplūdums (20–30px), 20–35% caurspīdīgums stiprākam peldēšanas iespaidam.
• Iespiesta/iegrimusi poga: atzīmējiet inset, izmantojiet nelielu, negatīvi jūtamu nobīdi un mērenu izplūdumu, lai ēna izskatītos kā iedobe, nevis pacēlums.
• Krāsaina mirdzuma efekts: izvēlieties zīmola krāsu, nevis melnu, palieliniet caurspīdīgumu līdz 40–60%, un nedaudz palieliniet izkliedi maigam mirdzuma efektam ap pogām.
• Asa/cieta ēna: iestatiet izplūdumu uz 0 un izkliedi uz 0, lai iegūtu cietu, nobīdītu silueta ēnu, nevis mīkstu ēnu.

Apvienošana ar noapaļotiem stūriem

Ēnas un noapaļoti stūri tiek izmantoti kopā pastāvīgi — kartītes, pogas un modālie logi gandrīz vienmēr apvieno abus. Izmantojiet Border Radius ģeneratoru, lai noapaļotu tā paša elementa stūrus, tad pielietojiet abas ģenerētās CSS deklarācijas kopā.

→ Border Radius ģenerators · Vienību pārveidotājs

Biežāk uzdotie jautājumi