Punctele cheie
- 01Fiecare parametru box-shadow are propriul glisier plus intrare numerică pentru reglare pixel-precision.
- 02Comutarea inset schimbă între shadow cădere și shadow interior pentru efecte apăsate sau neumorfice.
- 03Color și opacity sunt controlate separat ieșire rgba() pentru CSS lizibil.
- 04Previzualizarea folosește proprietatea CSS reală pe un element real — ceea ce vezi este exact ceea ce stylesheet-ul tău renderizează.
De Ce Să Folosești un Generator Box-Shadow Vizual
CSS box-shadow acceptă până la șase valori — offset orizontal offset vertical blur radius spread radius color și cuvânt inset opțional. Tastarea lor din memorie funcționează pentru shadow-uri simple dar pentru orice mai nuanțat — o strălucire strânsă o shadow cădere adâncă o stratalură de elevație moale — ghicești și reîncărcezi până iese bine.
Un generator vizual duce în jos bucla de iterație. Mișcă un glisier vezi schimbarea instantaneu și copiază doar când ești mulțumit. Generatorul box-shadow al Handytool se execută complet în browserul tău deci previzualizarea este proprietatea CSS reală aplicată unui element real — nicio diferență de renderare între instrument și pagina actuală.
Cum Să Proiectezi o Box Shadow
- 01
Ajustează offset-urile orizontale și verticale
Valorile pozitive mișcă shadow dreapta și jos. Valorile negative o mișcă stânga și sus. O shadow centrată (0 0) creează efect strălucire.
- 02
Setează blur radius
Valorile blur mai mari creează shadow-uri mai moi mai difuze. Zero blur produce o contur shadow ușor solid.
- 03
Ajustează spread radius
Spread pozitiv mărește shadow înainte de blur. Spread negativ o micșorează care este util pentru shadow-uri strânse sub-element.
- 04
Alege o culoare și opacity
Folosește selector de culoare pentru a alege nuanța shadow apoi regleza opacitate pentru subtilitate. Ieșirea folosește rgba() pentru a ține valorile lizibile.
- 05
Comută inset dacă e necesar
Inset comută de la un shadow cădere la o shadow interioară — util pentru butoane apăsate intrări scufundate și suprafețe neumorfice.
- 06
Copiază declarația CSS
Apasă Copiere pentru a prelua valoarea box-shadow completă și lipește-o în stylesheet.
Nu Încărcare Nu Cont
Generatorul este complet client-side. Alegerile de culoare valorile numerice și stările de previzualizare rămân în browserul tău — nimic nu este trimis la un server. Nu este cont de creat și limită de utilizare.
Deoarece elementul de previzualizare folosește proprietatea CSS box-shadow reală ieșirea este corectă prin definiție — nu este rendering canvas sau aproximare de captură de ecran implicată. Valorile pixel pe care le copiezi sunt valorile pixel pe care browserul le aplică.
FAQ Generator Box-Shadow
Ce face valoarea spread?
Spread pozitiv mărește shadow în toate direcțiile înainte ca blur să se aplice; spread negativ o micșorează. Util pentru străluciri strânse și definite atunci când împerechiat cu blur scăzut.
Pot adăuga mai mult de o box shadow?
Acest generator ieșit o shadow o dată. Pentru a le stratifica copiază valoarea și separa multiple shadow-uri cu virgule în CSS — box-shadow acceptă o listă separată cu virgulă.
De ce shadow-ul meu inset este invizibil?
Shadow-urile inset desenează în interiorul elementului deci au nevoie de culoare de fundal sau padding vizibil pentru a arăta. Nu vor apărea pe elemente transparente sau cu zero dimensiune.
Este previzualizarea pixel-exactă?
Da — previzualizarea folosește proprietatea CSS box-shadow reală pe un element DOM real deci ceea ce vezi este exact ceea ce stylesheet-ul tău va produce.
Ce este o shadow neumorfică?
Neumorfismul folosește două shadow-uri — o luminos și o neagru — offset în direcții opuse pentru a face un element apare ridicat sau apăsat dintr-o suprafață plată. Ambele shadow-uri sunt de obicei inset pentru varianta apăsată.