CSS Gradient Generator

Vad är CSS Grid?

CSS Grid Layout är ett tvådimensionellt layoutsystem för webben som låter dig skapa komplexa, responsiva rutnätslayouter med rent CSS. Till skillnad från flexbox (som är endimensionell) hanterar CSS Grid både kolumner och rader samtidigt. Du definierar ett rutnät på behållarelementet och placerar sedan underordnade element i rutnätsceller, rader eller namngivna områden.

CSS Grid stöds av alla moderna webbläsare (sedan 2017) och har blivit standardmetoden för sidlayouter. Det är särskilt kraftfullt för: sidmallar med sidhuvud/sidfot/sidopanel, bildgallerier, instrumentpaneler, formulärlayouter och alla designer som kräver en konsekvent kolumn/radstruktur. Grid och flexbox kompletterar varandra — använd grid för övergripande layout, flexbox för komponentinterna arrangemang.

CSS-gradientsyntax

Funktionen linear-gradient() tar en riktning (vinkel eller nyckelord) foljt av fargstoppar. Grundsyntaxen ar background: linear-gradient(vinkel, farg1 position1, farg2 position2). Vinkeln anges i grader -- 0deg gar fran botten till toppen, 90deg fran vanster till hoger och 180deg fran toppen till botten. Du kan lagga till sa manga fargstoppar som behovs.

Radiella gradienter anvander radial-gradient(form storlek at position, farg1, farg2). Formen kan vara circle eller ellipse. Storleksnyckelorden (closest-side, farthest-corner, etc.) styr hur langt gradienten stNacker sig. Om de utelamnas anvander webblasaren standardvarden som vanligtvis ser korrekta ut.

Hur du använder denna generator

Ställ in antal kolumner och rader, justera storlekar med fr-enheter, pixlar eller procent och ställ in mellanrum. Dra och släpp för att placera element i rutnätet eller använd det visuella gränssnittet för att definiera rutnätsområden. Verktyget genererar ren CSS-kod som du kan kopiera och klistra in i ditt projekt. Förhandsgranska resultatet i realtid medan du justerar parametrar.

Designtips for gradienter

Subtila gradienter ser mer professionella ut an dramatiska. En skiftning pa 10-20 grader i nyanston mellan tva narliggande farger skapar ett elegant, modernt utseende. Undvik att kombinera fler an tre farger om du inte avsiktligt skapar en regnbagseffekt. Stora ytor gynnas av mjuka gradienter, medan smia UI-element som knappar klarar av djarvare overgangar.

For morkt tema skapar gradient-overlagringsr pa morka bakgrunder djup utan att vara storande. Anvand halvtransparenta fargstoppar (rgba eller hsla) for att skapa glasliknande effekter. Lagra flera gradienter med kommatecken i background-egenskapen for komplexa kompositioner.

Prestandaovervaganden

CSS-gradienter ar GPU-accelererade och extremt snabba -- mycket battre an att ladda gradientbilder. Mycket komplexa gradienter med manga fargstoppar kan dock orsaka smarre renderingsskillnader mellan webblasare. Testa alltid dina gradienter i Chrome, Firefox och Safari. Moderna webblasare stoder gradienter utan vendor-prefix, sa -webkit-linear-gradient ar inte langre nidVandigt.

Vanliga frågor

Vad är skillnaden mellan CSS Grid och Flexbox?

Grid är tvådimensionellt (rader OCH kolumner), flexbox är endimensionellt (rad ELLER kolumn). Använd grid för sidlayouter och tvådimensionella arrangemang. Använd flexbox för att justera element i en enda rad — navigeringsmenyer, knappgrupper, kort i en rad. De fungerar utmärkt tillsammans: en grid-layout med flexbox-justerade celler är ett vanligt mönster.

Vad betyder enheten fr?

Fr (fractional unit) representerar en del av det tillgängliga utrymmet i rutnätsbehållaren. Om du definierar grid-template-columns: 1fr 2fr 1fr delas det tillgängliga utrymmet (efter fast storlek och mellanrum) i 4 delar: kolumn 1 får 1/4, kolumn 2 får 2/4, kolumn 3 får 1/4. Fr-enheter fungerar som flexbox:s flex-grow men för rutnätsspår.