Elementų šešėlių (box-shadow) generatorius

CSS box-shadow savybės veikimas ir parametrai

CSS box-shadow savybė yra pagrindinis įrankis, leidžiantis kurti gylio ir tūrio pojūtį plokščiuose tinklalapių dizaino elementuose. Šis generatorius leidžia vizualiai valdyti visus šešėlio parametrus naudojant šliaužiklius ir iškart matyti rezultatą ekrane. Kiekvienas šešėlis atvaizduojamas jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“.

Norint sukurti tikslų šešėlį, svarbu suprasti penkis pagrindinius parametrus, kurie tiesiogiai koreguoja CSS kodą:

• Horizontalus poslinkis: Šis parametras perkelia šešėlį horizontalia ašimi. Šliaužiklio rėžis yra nuo -50px (šešėlis perkeliamas į kairę) iki 50px (šešėlis perkeliamas į dešinę).
• Vertikalus poslinkis: Šis parametras perkelia šešėlį vertikalia ašimi. Šliaužiklio rėžis yra nuo -50px (šešėlis perkeliamas aukštyn) iki 50px (šešėlis perkeliamas žemyn).
• Suliejimas (Blur): Šis parametras nustato, kiek šešėlio kraštai bus sušvelninti. Reikšmė gali kisti nuo 0px (visiškai aštrus, kietas kraštas) iki 100px (labai minkštas, išsklaidytas šešėlis).
• Sklaida: Šis parametras padidina arba sumažina šešėlio dydį prieš pradedant jį sulieti. Šliaužiklio rėžis yra nuo -50px iki 50px. Neigiama sklaidos reikšmė sutraukia šešėlį į vidų, todėl jis tampa mažesnis už patį elementą.
• Neskaidrumas: Šis parametras reguliuoja šešėlio spalvos permatomumą, leidžiantį sukurti subtilesnį arba intensyvesnį efektą.

Vidinio ir išorinio šešėlio skirtumai

Pagal numatytuosius nustatymus šešėlis yra projektuojamas už elemento ribų, sukuriant įspūdį, kad elementas yra pakeltas virš fono. Tačiau įrankyje esanti parinktis „Vidinis šešėlis (inset)“ leidžia pakeisti šią elgseną.

Kai įjungiama ši parinktis, šešėlis nukreipiamas į elemento vidų. Tai pakeičia vizualinį suvokimą: elementas nebeatrodo pakeltas, o priešingai – atrodo įspaustas į foną. Šis efektas dažniausiai naudojamas kuriant įdubusius įvesties laukus (input), paspaustus mygtukus arba specifines vartotojo sąsajos korteles, kurioms reikia suteikti gylio į vidų.

Sudėtingų efektų kūrimas sluoksniuojant šešėlius

Vieno šešėlio sluoksnio dažnai nepakanka, kad būtų išgautas tikroviškas fizinis gylis. Naudojant tik vieną sluoksnį su dideliu suliejimu, šešėlis atrodo purvinas ir plokščias. Realiame pasaulyje šviesa kuria kelis šešėlių lygius – tamsesnį ir aštresnį arti objekto bei švelnesnį, šviesesnį toliau nuo jo.

Šis įrankis leidžia pasiekti šį efektą naudojant kelis šešėlių sluoksnius:

1. Numatytasis nustatymas: Įrankis iš anksto sugeneruoja penkis sluoksnius. Pirmasis sluoksnis turi numatytąsias reikšmes 0 8 24 -4 ir 18% permatomą juodą spalvą, o kiti keturi sluoksniai iš pradžių yra paslėpti.
2. Sluoksnių valdymas: Naudodami mygtuką „Pridėti sluoksnį“, galite sukurti naują šešėlio sluoksnį su numatytosiomis reikšmėmis. Jei tam tikro sluoksnio nebereikia, jį galima pašalinti paspaudus mygtuką „Pašalinti sluoksnį“.
3. CSS generavimas: Kai naudojami keli sluoksniai, įrankis automatiškai sujungia juos į vieną CSS taisyklę, atskirdamas kiekvieno sluoksnio parametrus kableliais.

Sluoksniavimas leidžia sukurti tokius efektus kaip itin švelnus, platus šešėlis (naudojant kelis mažo nepermatomumo sluoksnius su skirtingais suliejimo ir sklaidos dydžiais) arba glaustas, prigludęs šešėlis, kuris pabrėžia elemento kontūrus.

Generatoriaus sąsaja ir valdymas

Sąsajoje kiekvienas šešėlio sluoksnis turi savo valdymo bloką, kuriame pateikiami šie elementai:

• Sluoksnis: Identifikuoja konkretų redaguojamą sluoksnį.
• Horizontalus poslinkis ir Vertikalus poslinkis: Šliaužikliai su realiuoju laiku atnaujinamomis reikšmėmis nuo -50px iki 50px.
• Suliejimas: Šliaužiklis nuo 0px iki 100px.
• Sklaida: Šliaužiklis nuo -50px iki 50px.
• Šešėlio spalva: Spalvų pasirinkimo langas.
• Neskaidrumas: Šliaužiklis šešėlio permatomumui reguliuoti.
• Vidinis šešėlis (inset): Perjungiklis, keičiantis šešėlio kryptį.

Visi šliaužiklių pakeitimai akimirksniu atnaujina generuojamą CSS kodą, kurį galima nukopijuoti vienu paspaudimu sekcijoje „CSS“.

Dažniausiai užduodami klausimai (FAQ)

Ką tiksliai valdo poslinkis, suliejimas ir sklaida?

Poslinkis (offset) perkelia šešėlį kairėn / dešinėn ir aukštyn / žemyn, suliejimas (blur) sušvelnina jo kraštus, o sklaida (spread) padidina arba sumažina jį prieš suliejant. Neigiama sklaida sutraukia šešėlį į vidų – tai naudinga norint sukurti glaustą, prigludusiį šešėlį.

Ką daro vidinio šešėlio (inset) parinktis?

Įprastas šešėlis krenta už elemento ribų, tarsi šviesa už pakeltos kortelės. Parinktis „inset“ nukreipia jį į vidų, todėl elementas atrodo įspaustas – tai naudinga kuriant įdubusius įvesties laukus ar paspaustus mygtukus.

Kodėl verta naudoti kelis šešėlių sluoksnius?

Vienas šešėlis, viršijęs tam tikrą dydį, atrodo plokščias. Tikroviškas gylis paprastai išgaunamas derinant siaurą, tamsų šešėlį su švelniu, platesniu – pridėkite antrą sluoksnį ir suderinkite kiekvieną atskirai, kad pasiektumėte šį efektą.

Kur apdorojami mano įvesti duomenys ir pasirinkimai?

Kiekvienas šešėlis atvaizduojamas jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“, todėl visas kūrimo procesas vyksta lokaliai jūsų įrenginyje.