Box Shadow ģenerators

Velciet slīdņus, lai veidotu box-shadow ēnu, klājiet slāņus dziļumam un acumirklī nokopējiet gatavo CSS.

Ēnas slāņi
Slānis 1
CSS
Pielāgojiet slīdņus, lai izveidotu ēnu.

Katra ēna tiek renderēta jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo.

BUJ

Ko tieši kontrolē nobīde, izpludināšana un izplatīšanās?

Nobīde (Offset) pārvieto ēnu pa kreisi/pa labi un uz augšu/uz leju, izpludināšana (blur) mīkstina tās malas, bet izplatīšanās (spread) palielina vai samazina to pirms izpludināšanas. Negatīva izplatīšanās savelk ēnu uz iekšu, kas ir noderīgi ciešai, tuvai ēnai.

Ko dara iekšējās ēnas (inset) opcija?

Parasta ēna krīt ārpus elementa, līdzīgi kā gaisma aiz paceltas kartītes. Iekšējā ēna (Inset) to pagriež uz iekšu, liekot elementam izskatīties iespiestam — tas ir noderīgi padziļinātiem ievades laukiem vai nospiestām pogām.

Kāpēc klāt vairāk nekā vienu ēnas slāni?

Viena ēna virs noteikta izmēra izskatās plakana. Reālistisks pacēlums parasti apvieno šauru, tumšu ēnu ar mīkstu, platāku ēnu — pievienojiet otru slāni un pielāgojiet katru atsevišķi, lai panāktu šo efektu.

CSS Cubic Bezier ģeneratorsVelciet abus rokturus, lai veidotu paātrinājuma līkni, vērojiet punkta kustību pret vienmērīgu kustību un nokopējiet cubic-bezier() vērtību.Gradientu ģeneratorsIzveidojiet lineāru, radiālu vai konisku gradientu, pievienojiet krāsu punktus, iestatiet virzienu un nokopējiet CSS ar vienu klikšķi.Border Radius ģeneratorsNoapaļojiet katru stūri ar slīdņiem, veidojiet organiskas lāses formas ar eliptisko režīmu un acumirklī nokopējiet CSS.Flexbox ģeneratorsIestatiet flex konteineru un tā elementus ar vizuālām vadīklām, vērojiet izkārtojuma reakciju reāllaikā un nokopējiet CSS ar vienu klikšķi.CSS Grid ģeneratorsIestatiet kolonnas un rindas, velciet pāri šūnām, lai izvietotu elementus, un ar vienu klikšķi nokopējiet režģa CSS kopā ar atbilstošo HTML.CSS clamp() kalkulatorsIevadiet izmēru maziem un lieliem ekrāniem un iegūstiet plūstošu clamp() vērtību, kas vienmērīgi mērogojas starp tiem — fontu izmēriem, iekšējām un ārējām malām vai spraugām.Krāsu konvertētājsKonvertējiet krāsas starp HEX, RGB, HSL, HSV, CMYK un LAB — rediģējiet jebkuru lauku, un pārējie tiks atjaunināti reāllaikā.CSS sakārtotājs un minimizētājsSakārtojiet nekārtīgu CSS, lai to būtu vieglāk lasīt, vai minimizējiet to publicēšanai — ar drošu režīmu, kas nekad nemaina kārtulu secību.Kontrasta pārbaudītājsIevadiet teksta un fona krāsu, lai redzētu WCAG kontrasta attiecību un uzzinātu, kuri AA un AAA līmeņi atbilst prasībām.