Box shadow generatorius

Kaip naudotis box shadow generatoriumi

1. Pradėk nuo šablono arba palik numatytąjį Švelnus šešėlį. Eilutėje Šablonai yra Švelnus, Aštrus, Sluoksniuotas, Pakilimas, Neumorfizmas, Vidinis ir Švytėjimas.
2. Skiltyje Šešėlių sluoksniai spustelėk sluoksnį, kad jį pasirinktum. Kiekvieną sluoksnį gali perkelti mygtukais Perkelti aukštyn ir Perkelti žemyn arba ištrinti mygtuku Pašalinti. Pridėti sluoksnį dubliuoja pasirinktą sluoksnį, kad galėtum koreguoti jo kopiją.
3. Redaguok pasirinktą sluoksnį skiltyje Redaguoti pasirinktą sluoksnį: tempk tašką laukelyje Poslinkis arba naudok slankiklius ir skaičių laukelius: Horizontalus poslinkis (px), Vertikalus poslinkis (px), Suliejimas (px) ir Išplitimas (px).
4. Pasirink Šešėlio spalva spalvų rinkikliu arba įvesk bet kurią CSS spalvą kodo laukelyje, tada nustatyk Nepermatomumas (%). Pažymėk Vidinis šešėlis (inset), kad šešėlis būtų piešiamas bloko viduje.
5. Pakoreguok Peržiūros nustatymai (Bloko spalva, Fono spalva, Kampų spindulys (px)), kad matytum šešėlį su savo tikromis spalvomis. Jie veikia tik peržiūrą.
6. Mygtuku Kopijuoti nukopijuok deklaraciją iš CSS kodas.

Klaviatūra: pasirink tašką laukelyje Poslinkis ir rodyklių klavišais perkelk jį po 1 px arba po 10 px su Shift.

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

Kaip veikia box-shadow

Vieno šešėlio sintaksė: box-shadow: [inset] x y blur spread color.

• x ir y pastumia šešėlį į dešinę ir žemyn. Neigiamos reikšmės stumia jį į kairę ir aukštyn. Šviesos šaltinis virš elemento reiškia teigiamą y.
• Blur (suliejimas) sušvelnina kraštą. Jis negali būti neigiamas. Suliejimas 0 duoda aštrių kraštų bloko kopiją.
• Spread (išplitimas) prieš suliejant padidina (teigiamas) arba sumažina (neigiamas) šešėlį. Neigiamas išplitimas su dideliu y palaiko šešėlį po elementu, o ne aplink jį.
• Spalva dažniausiai turi skaidrumo. Šis įrankis nepermatomas spalvas užrašo kaip HEX, o permatomas – kaip rgba(), kurį supranta visos naršyklės. Jei įvesta spalva jau turi alfa kanalą, Nepermatomumas (%) jį dar padaugina.
• inset deda šešėlį rėmelio viduje, tarsi blokas būtų įspaustas į puslapį.

Šešėlis seka elemento border-radius ir niekada nekeičia išdėstymo: jis neužima vietos ir nesukelia slinkties juostų.

Kodėl dėti kelis šešėlius?

Tikri šešėliai nėra vienas sulietas stačiakampis. Mažas, tamsus ir aštrus šešėlis krenta tiesiai po objektu, o didelis, blyškus ir miglotas sklinda toliau. Sudėjus nuo dviejų iki penkių sluoksnių, tai imituojama ir atrodo daug natūraliau nei vienas sunkus šešėlis. Šablonas Sluoksniuotas kiekviename žingsnyje padvigubina poslinkį ir suliejimą su mažu nepermatomumu; šią techniką išpopuliarino daugelis dizaino sistemų. Pakilimas imituoja trijų sluoksnių „Material Design“ šešėlius.

Pirmasis sąrašo sluoksnis piešiamas virš kitų, lygiai kaip CSS reikšmėje. Eiliškumas svarbiausias tada, kai maišai vidinius ir išorinius šešėlius arba naudoji sodrias spalvas.

Neumorfizmas

Neumorfizmas („minkšta sąsaja“) naudoja du šešėlius elementui, kurio spalva sutampa su fono spalva: tamsų, pastumtą žemyn ir į dešinę, ir šviesų, pastumtą aukštyn ir į kairę. Šablonas Neumorfizmas abi spalvas nustato į #e0e5ec. Turėk omenyje, kad šis stilius turi mažą kontrastą, todėl mygtukams su juo reikia aiškios fokuso būsenos ir įskaitomų užrašų.