Generator for CSS-egenskaper

En generator for CSS-egenskaper er et verktøy som bygger CSS-kode for en visuell effekt ved hjelp av et sett med glidebrytere og fargevelgere, i stedet for at brukeren skriver inn koden for hånd. Denne dekker fire effekter: gradienter, skygger rundt elementer, avrundede kanter og tekstskygger. Hvert panel viser en forhåndsvisning i sanntid og genererer CSS som er klar til å kopieres.

Dette genererer den

• Gradienter: lineære eller radielle fargeoverganger mellom to farger
• Skygger rundt elementer: en skygge utenpå eller inni et element, med innstillinger for forskyvning, uskarphet, spredning, farge og gjennomsiktighet
• Avrundede kanter: avrundede hjørner, enten med samme verdi på alle fire hjørner eller angitt individuelt
• Tekstskygger: en skygge bak tekst, med kontroller for forskyvning, uskarphet, farge og tetthet

Hver innstilling oppdaterer forhåndsvisningen og den genererte CSS-koden samtidig, slik at endringer kan kontrolleres før koden kopieres.

Slik beregnes en lineær CSS-gradient

En lineær gradient går fra én farge til en annen langs en rett linje. CSS-syntaksen er:

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

Vinkelen måles i grader, fra 0 til 360. position1 og position2 angir hvor hver farge når full styrke, som en prosentandel av gradientens lengde.

Regneeksempel

Generatorens startverdier er en vinkel på 90 grader, #ff5f6d ved 0 % og #ffc371 ved 100 %. Det gir:

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

Den første linjen er en vanlig farge som reserve for nettlesere som av en eller annen grunn ikke klarer å vise gradienten. Den andre linjen er selve gradienten.

Formel for radial gradient

En radial gradient sprer seg utover fra et midtpunkt i stedet for langs en linje:

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

Denne generatoren lager alltid en sirkelformet radial gradient. Den tilbyr ikke en ellipseform eller en måte å flytte midtpunktet på; bare de to fargene og stoppunktene deres kan endres.

Begge gradienttypene i dette verktøyet bruker nøyaktig to farger, angitt med fargevelgerne Color 1 og Color 2. Det finnes ikke noe alternativ for å legge til et tredje fargestopp.

Formel for CSS-skygge rundt element

En skygge rundt et element tegnes langs kantene:

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

h-offset og v-offset flytter skyggen mot venstre/høyre og opp/ned. Positive verdier skyver den mot høyre eller ned; negative verdier skyver den mot venstre eller opp. blur gjør skyggekanten mykere; et høyere tall sprer mykheten lenger. spread øker eller reduserer skyggens størrelse før uskarpheten påføres. Hvis nøkkelordet inset legges til før forskyvningene, tegnes skyggen innenfor elementets kant i stedet for utenfor.

Regneeksempel

Med standardinnstillingene (vannrett forskyvning på 5 piksler, loddrett forskyvning på 5 piksler, uskarphet på 10 piksler, spredning på 0 piksler, svart med 20 % tetthet) gir verktøyet:

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

Glidebryteren for gjennomsiktighet i fargevelgeren går fra 0 til 100 og konverteres til skalaen fra 0 til 1 som rgba() bruker, slik at 20 % blir 0,2.

Formel for CSS-avrundede kanter

Avrundede kanter gjør hjørnene på et element runde. Det finnes to former:

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

Når alle fire hjørnene har samme verdi, skriver generatoren kortformen. Når de er forskjellige, listes de fire verdiene i nøyaktig denne rekkefølgen: øverst til venstre, øverst til høyre, nederst til høyre og nederst til venstre.

Regneeksempel

Standardradiusen er 10 piksler på hvert hjørne:

1border-radius: 10px;
2

Et sirkelformet avatarbilde bruker vanligvis border-radius: 50% i stedet, selv om denne verdien ligger utenfor området glidebryteren i generatoren tillater (fra 0 til 100 piksler).

Formel for CSS-tekstskygge

En tekstskygge fungerer som en boksskygge, men har ingen spredningsverdi og brukes på bokstaver i stedet for på elementets boks:

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

Regneeksempel

Med standardinnstillingene (vannrett forskyvning på 2 piksler, loddrett forskyvning på 2 piksler, uskarphet på 3 piksler, svart med 50 % tetthet):

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

Hvilke fargekoder generatoren godtar

Hver fargekontroll har et fargefelt og et tekstfelt. Tekstfeltet tar imot en heksadesimal farge kode, formen # som brukes i CSS. Fire lengder er gyldige: tre sifre (#f00), fire sifre (#f00c), seks sifre (#ff0000) og åtte sifre (#ff0000cc). Kortformene betyr samme farge som langformene, fordi hvert siffer dobles: #123 er samme farge som #112233.

Det siste sifferet i firesifferformen og det siste paret i åttesifferformen angir gjennomsiktighet. Skyggegeneratorene ignorerer disse sifrene og henter alfaverdien fra glidebryteren for gjennomsiktighet i stedet, slik at glidebryteren alltid viser gjennomsiktigheten som faktisk brukes. Hvis tekstfeltet inneholder noe som ikke er en heksadesimal farge, for eksempel en delvis skrevet kode, faller skyggen tilbake til svart i stedet for å lage en ugyldig deklarasjon.

Slik bruker du generatoren for CSS-egenskaper

1. Velg en fane: Gradient, Box Shadow, Border Radius eller Text Shadow.
2. Juster glidebryterne, fargevelgerne og avkrysningsboksene. Hver glidebryter har et tallfelt ved siden av seg der en nøyaktig verdi kan skrives inn. Forhåndsvisningspanelet og CSS-koden oppdateres umiddelbart.
3. Velg knappen «Copy to Clipboard» og lim inn koden i et stilark eller et style-attributt.
4. Velg «Reset» for å tilbakestille alle feltene i de fire fanene til startverdiene. Dette bytter også den aktive fanen tilbake til Gradient, selv om en annen fane ble vist.

Ofte stilte spørsmål

Hva brukes en generator for CSS-egenskaper til? Den gjør inndata fra glidebrytere og fargevelgere om til ferdig CSS-kode som lager gradienter, skygger og avrundede hjørner, slik at brukeren slipper å skrive eller huske syntaksen for hånd.

Hva er forskjellen mellom en lineær og en radial gradient? En lineær gradient endrer farge langs en rett linje ved en angitt vinkel. En radial gradient endrer farge utover fra et midtpunkt. Det radiale alternativet i dette verktøyet bruker alltid en sirkelform.

Kan dette verktøyet lage en gradient med mer enn to farger? Nei. Både det lineære og det radiale gradientpanelet støtter nøyaktig to farger, Color 1 og Color 2, hver med sitt eget stoppunkt.

Hvordan skiller en innfelt skygge rundt et element seg fra en vanlig skygge? En vanlig skygge rundt et element ligger utenfor kantene, som lys som faller bak det. En innfelt skygge ligger innenfor kantene i stedet, slik at elementet ser inntrykt ut og ikke ut som om det stikker opp.

Hvorfor vises verdiene for avrundede hjørner i rekkefølgen øverst til venstre, øverst til høyre, nederst til høyre og nederst til venstre? Det er rekkefølgen CSS-egenskapen border-radius forventer når fire separate verdier skrives, med klokken fra hjørnet øverst til venstre.

Fungerer den genererte CSS-en i alle nettlesere? Gradienter, boksskygger, border-radius og tekstskygger støttes alle i gjeldende versjoner av Chrome, Firefox, Safari og Edge. Det legges ikke til leverandørprefikser i resultatet.

Referanser

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