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

Vilkite šliaužiklius, kad suformuotumėte šešėlį, sluoksniuokite juos gyliui išgauti ir akimirksniu nukopijuokite paruoštą CSS.

Šešėlių sluoksniai
Sluoksnis 1
CSS
Reguliuokite šliaužiklius, kad suformuotumėte šešėlį.

Kiekvienas šešėlis atvaizduojamas jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“.

DUK

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ą, prigludusį š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ą.

CSS Cubic Bezier generatoriusVilkite dvi rankenėles, kad suformuotumėte animacijos kreivę, stebėkite judantį tašką ir nukopijuokite cubic-bezier() reikšmę.Gradientų generatoriusKurkite tiesinius, radialinius ar kūginius gradientus, pridėkite spalvų taškus, nustatykite kryptį ir nukopijuokite CSS vienu spustelėjimu.Kampų apvalinimo (border-radius) generatoriusApvalinkite kiekvieną kampą šliaužikliais, kurkite organines formas elipsiniu režimu ir akimirksniu nukopijuokite CSS.Flexbox generatoriusKonfigūruokite flex konteinerį ir jo elementus vizualiais valdikliais, stebėkite išdėstymą gyvai ir nukopijuokite CSS vienu spustelėjimu.CSS Grid generatoriusNustatykite stulpelius ir eilutes, vilkite per langelius elementams išdėstyti ir vienu spustelėjimu nukopijuokite tinklelio CSS bei atitinkamą HTML.CSS clamp() skaičiuoklėĮveskite dydį mažiems ir dideliems ekranams ir gaukite kintančią clamp() reikšmę, kuri sklandžiai prisitaiko – šriftams, paraštėms ar tarpams.Spalvų konverterisKonvertuokite spalvas tarp HEX, RGB, HSL, HSV, CMYK ir LAB – redaguokite bet kurį lauką, o kiti atsinaujins automatiškai.CSS tvarkytuvas ir glaudintuvasSutvarkykite netvarkingą CSS patogiam skaitymui arba suglaudinkite jį gamybiniam naudojimui – su saugiuoju režimu, kuris niekada nekeičia taisyklių tvarkos.Kontrasto tikrintuvasĮveskite teksto ir fono spalvas, kad sužinotumėte WCAG kontrasto santykį bei atitinkamus AA ir AAA lygius.