CSS-egenskapsgenerator

En CSS-egenskapsgenerator är ett verktyg som bygger CSS-kod för en visuell effekt utifrån ett antal reglage och färgväljare, i stället för att användaren skriver koden för hand. Den här generatorn omfattar fyra effekter: gradienter, boxskuggor, ramradie och textskuggor. Varje panel visar en förhandsvisning i realtid och genererar CSS som är klar att kopiera.

Det här genereras

• Gradienter: linjära eller radiella färgövergångar mellan två färger
• Boxskuggor: en skugga utanför eller innanför ett element, med reglage för förskjutning, oskärpa, spridning, färg och opacitet
• Ramradie: rundade hörn, antingen samma på alla fyra hörn eller inställda individuellt
• Textskuggor: en skugga bakom text, med reglage för förskjutning, oskärpa, färg och opacitet

Varje inställning uppdaterar förhandsvisningen och den genererade CSS-koden samtidigt, så att ändringar kan kontrolleras innan koden kopieras.

Så beräknas en linjär CSS-gradient

En linjär gradient går från en färg till en annan längs en rak linje. CSS-syntaxen är:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

Vinkeln mäts i grader, från 0 till 360. position1 och position2 anger var varje färg når full styrka, som en procentandel av gradientens längd.

Räkneexempel

Generatorns startvärden är en vinkel på 90 grader, #ff5f6d vid 0 % och #ffc371 vid 100 %. Det ger:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

Den första raden är en vanlig färgreserv för webbläsare som av någon anledning inte kan återge gradienten. Den andra raden är själva gradienten.

Formel för radiell gradient

En radiell gradient sprids utåt från en mittpunkt i stället för längs en linje:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Den här generatorn skapar alltid en cirkelformad radiell gradient. Det finns inget alternativ för ellipsform eller något sätt att flytta mittpunkten; endast de två färgerna och deras stoppositioner kan ändras.

Båda gradienttyperna i det här verktyget använder exakt två färger, som ställs in med färgväljarna Färg 1 och Färg 2. Det finns inget alternativ för att lägga till ett tredje färgstopp.

Formel för CSS-boxskugga

En boxskugga är en skugga som ritas runt ett elements kanter:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset och v-offset flyttar skuggan åt vänster/höger och uppåt/nedåt. Positiva värden flyttar den åt höger eller nedåt; negativa värden flyttar den åt vänster eller uppåt. blur gör skuggans kant mjukare; ett högre värde sprider mjukheten längre. spread ökar eller minskar skuggans storlek innan oskärpan tillämpas. Om nyckelordet inset läggs till före förskjutningarna ritas skuggan innanför elementets ram i stället för utanför den.

Räkneexempel

Med standardinställningarna (horisontell förskjutning på 5 px, vertikal förskjutning på 5 px, oskärpa på 10 px, spridning på 0 px, svart med 20 % opacitet) matar verktyget ut:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Färgväljarens opacitetsreglage går från 0 till 100 och omvandlas till skalan 0 till 1 som rgba() använder, så att 20 % blir 0,2.

Formel för CSS-ramradie

Ramradie rundar ett elements hörn. Det finns två former:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

När alla fyra hörn har samma värde skriver generatorn den korta formen. När de skiljer sig åt anges de fyra värdena i exakt denna ordning: övre vänster, övre höger, nedre höger och nedre vänster.

Räkneexempel

Standardradien är 10 px på varje hörn:

1border-radius: 10px;
2

En cirkelformad avatarbild använder vanligtvis border-radius: 50% i stället, även om det värdet ligger utanför det intervall som generatorns reglage tillåter (0 till 100 pixlar).

Formel för CSS-textskugga

En textskugga fungerar som en boxskugga, men saknar ett spridningsvärde och tillämpas på bokstäver i stället för på ett elements box:

1text-shadow: h-offset v-offset blur color;
2

Räkneexempel

Med standardinställningarna (horisontell förskjutning på 2 px, vertikal förskjutning på 2 px, oskärpa på 3 px, svart med 50 % opacitet):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Vilka färgkoder generatorn accepterar

Varje färgkontroll har en färgruta och ett textfält. Textfältet accepterar en hexadecimalkod för färg, den #-form som används i CSS. Fyra längder är giltiga: tre siffror (#f00), fyra siffror (#f00c), sex siffror (#ff0000) och åtta siffror (#ff0000cc). Kortformerna betyder samma färg som långformerna, eftersom varje siffra dubbleras: #123 är samma färg som #112233.

Den sista siffran i fyrsiffrorsformen och det sista sifferparet i åttasiffrorsformen anger transparens. Skuggeneratorerna ignorerar dessa siffror och hämtar alfavärdet från opacitetsreglaget, så att reglaget alltid visar den transparens som faktiskt används. Om textfältet innehåller något som inte är en hexadecimalkod för färg, till exempel en halvfärdig kod, används svart som reserv för skuggan i stället för att en felaktig deklaration skapas.

Så använder du CSS-egenskapsgeneratorn

1. Välj en flik: Gradient, Box Shadow, Border Radius eller Text Shadow.
2. Justera reglagen, färgväljarna och kryssrutorna. Varje reglage har ett sifferfält bredvid sig där ett exakt värde kan anges. Förhandsvisningspanelen och CSS-koden uppdateras omedelbart.
3. Välj knappen ”Copy to Clipboard” och klistra in koden i ett stilmall eller i attributet style.
4. Välj ”Reset” för att återställa alla fält på de fyra flikarna till deras startvärden. Den aktiva fliken återställs också till Gradient, även om en annan flik visades.

Vanliga frågor och svar

Vad används en CSS-egenskapsgenerator till? Den omvandlar inmatning från reglage och färgväljare till färdig CSS-kod för gradienter, skuggor och rundade hörn, så att användaren inte behöver skriva eller memorera syntaxen för hand.

Vad är skillnaden mellan en linjär och en radiell gradient? En linjär gradient ändrar färg längs en rak linje vid en angiven vinkel. En radiell gradient ändrar färg utåt från en mittpunkt. Det radiella alternativet i det här verktyget använder alltid en cirkelform.

Kan det här verktyget skapa en gradient med fler än två färger? Nej. Både den linjära och den radiella gradientpanelen stöder exakt två färger, Färg 1 och Färg 2, var och en med sin egen stopposition.

Hur skiljer sig en infälld boxskugga från en vanlig? En vanlig boxskugga ligger utanför elementets kanter, som ljus som faller bakom det. En infälld skugga ligger i stället innanför kanterna och får elementet att se intryckt ut i stället för upphöjt.

Varför visas värdena för rundade hörn i ordningen övre vänster, övre höger, nedre höger, nedre vänster? Det är den ordning som CSS-egenskapen border-radius förväntar sig när fyra separata värden skrivs, medurs från det övre vänstra hörnet.

Fungerar den genererade CSS-koden i alla webbläsare? Gradienter, boxskuggor, ramradie och textskuggor stöds alla i aktuella versioner av Chrome, Firefox, Safari och Edge. Inga leverantörsprefix läggs till i resultatet.

Referenser

1. MDN Web Docs: Använda CSS-gradienter
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow