CSS-eigenschappengenerator

Een CSS-eigenschappengenerator is een hulpmiddel dat CSS-code voor een visueel effect samenstelt uit een reeks schuifregelaars en kleurkiezers, in plaats van dat de gebruiker de code met de hand typt. Deze generator ondersteunt vier effecten: kleurverlopen, kaderschaduwen, afgeronde hoeken en tekstschaduwen. Elk paneel toont een livevoorbeeld en genereert CSS die direct kan worden gekopieerd.

Wat de generator maakt

• Kleurverlopen: lineaire of radiale kleurovergangen tussen twee kleuren
• Kaderschaduwen: een slagschaduw of binnenste schaduw rond een element, met instellingen voor verschuiving, vervaging, spreiding, kleur en dekking
• Afgeronde hoeken: afgeronde hoeken, overal gelijk of voor elke hoek afzonderlijk ingesteld
• Tekstschaduwen: een schaduw achter tekst, met instellingen voor verschuiving, vervaging, kleur en dekking

Elke instelling werkt het voorbeeld en de gegenereerde CSS tegelijkertijd bij, zodat wijzigingen kunnen worden gecontroleerd voordat de code wordt gekopieerd.

Een CSS-lineair kleurverloop berekenen

Een lineair kleurverloop gaat langs een rechte lijn van de ene kleur naar de andere. De CSS-syntaxis is:

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

De hoek wordt gemeten in graden, van 0 tot 360. position1 en position2 bepalen waar elke kleur zijn volledige intensiteit bereikt, uitgedrukt als percentage van de lengte van het kleurverloop.

Uitgewerkt voorbeeld

De beginwaarden van de generator zijn een hoek van 90 graden, #ff5f6d op 0% en #ffc371 op 100%. Dat levert op:

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

De eerste regel is een gewone kleurfallback voor browsers die het kleurverloop om een of andere reden niet kunnen weergeven. De tweede regel is het kleurverloop zelf.

Formule voor een radiaal kleurverloop

Een radiaal kleurverloop verspreidt zich vanuit een middelpunt naar buiten, in plaats van langs een lijn:

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

Deze generator maakt altijd een cirkelvormig radiaal kleurverloop. Er is geen optie voor een elliptische vorm of om het middelpunt te verplaatsen; alleen de twee kleuren en hun stopposities kunnen worden gewijzigd.

Beide typen kleurverloop in dit hulpmiddel gebruiken precies twee kleuren, ingesteld met de kleurkiezers Kleur 1 en Kleur 2. Er is geen optie om een derde kleurstop toe te voegen.

CSS-formule voor een kaderschaduw

Een kaderschaduw is een schaduw die rond de randen van een element wordt getekend:

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

h-offset en v-offset verplaatsen de schaduw naar links/rechts en omhoog/omlaag. Positieve waarden duwen de schaduw naar rechts of omlaag; negatieve waarden naar links of omhoog. blur verzacht de rand van de schaduw; een hoger getal verspreidt de zachtheid verder. spread vergroot of verkleint de omvang van de schaduw voordat de vervaging wordt toegepast. Door het sleutelwoord inset vóór de verschuivingen te plaatsen, wordt de schaduw binnen de rand van het element getekend in plaats van erbuiten.

Uitgewerkt voorbeeld

Met de standaardinstellingen (horizontale verschuiving van 5 px, verticale verschuiving van 5 px, vervaging van 10 px, spreiding van 0 px, zwart met een dekking van 20%) geeft het hulpmiddel:

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

De schuifregelaar voor dekking van de kleurkiezer loopt van 0 tot 100 en wordt omgezet naar de schaal van 0 tot 1 die rgba() gebruikt, zodat 20% 0,2 wordt.

CSS-formule voor afgeronde hoeken

Met border-radius worden de hoeken van een element afgerond. Er zijn twee vormen:

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

Als alle vier de hoeken dezelfde waarde hebben, gebruikt de generator de verkorte vorm. Als ze verschillen, worden de vier waarden in precies deze volgorde opgegeven: linksboven, rechtsboven, rechtsonder en linksonder.

Uitgewerkt voorbeeld

De standaardradius is 10 px voor elke hoek:

1border-radius: 10px;
2

Voor een cirkelvormige avatarafbeelding wordt meestal border-radius: 50% gebruikt, hoewel die waarde buiten het bereik van de schuifregelaar van deze generator valt (van 0 tot 100 pixels).

CSS-formule voor een tekstschaduw

Een tekstschaduw werkt als een kaderschaduw, maar heeft geen waarde voor spreiding en wordt toegepast op letters in plaats van op het kader van een element:

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

Uitgewerkt voorbeeld

Met de standaardinstellingen (horizontale verschuiving van 2 px, verticale verschuiving van 2 px, vervaging van 3 px, zwart met een dekking van 50%):

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

Welke kleurcodes de generator accepteert

Elke kleurkiezer heeft een kleurstaal en een tekstvak. Het tekstvak accepteert een hexadecimale kleur code, de vorm # die overal in CSS wordt gebruikt. Vier lengtes zijn geldig: drie cijfers (#f00), vier cijfers (#f00c), zes cijfers (#ff0000) en acht cijfers (#ff0000cc). De korte vormen betekenen dezelfde kleur als de lange vormen, omdat elk cijfer wordt verdubbeld: #123 is dezelfde kleur als #112233.

Het laatste cijfer van de viercijferige vorm en het laatste paar van de achtcijferige vorm bepalen de transparantie. De schaduwgeneratoren negeren deze cijfers en halen de alpha waarde in plaats daarvan uit de schuifregelaar Dekking, zodat de schuifregelaar altijd de daadwerkelijk toegepaste transparantie toont. Als het tekstvak iets bevat dat geen hexadecimale kleur is, zoals een onvolledig ingevoerde code, valt de schaduw terug op zwart in plaats van een ongeldige declaratie te genereren.

De CSS-eigenschappengenerator gebruiken

1. Kies een tabblad: Kleurverloop, Kaderschaduw, Afgeronde hoeken of Tekstschaduw.
2. Pas de schuifregelaars, kleurkiezers en selectievakjes aan. Naast elke schuifregelaar staat een getalvak waarin een exacte waarde kan worden ingevoerd. Het voorbeeldpaneel en de CSS-code worden onmiddellijk bijgewerkt.
3. Selecteer de knop "Naar klembord kopiëren" en plak de code in een stylesheet of een style-attribuut.
4. Selecteer "Resetten" om elk veld op alle vier de tabbladen terug te zetten naar de beginwaarde. Hierdoor wordt het actieve tabblad ook teruggeschakeld naar Kleurverloop, zelfs als een ander tabblad werd bekeken.

Veelgestelde vragen

Waarvoor wordt een CSS-eigenschappengenerator gebruikt? De generator zet invoer uit schuifregelaars en kleurkiezers om in voltooide CSS-code voor kleurverlopen, schaduwen en afgeronde hoeken, zodat de gebruiker die syntaxis niet met de hand hoeft te schrijven of te onthouden.

Wat is het verschil tussen een lineair en een radiaal kleurverloop? Een lineair kleurverloop verandert van kleur langs een rechte lijn onder een bepaalde hoek. Een radiaal kleurverloop verandert van kleur vanuit een middelpunt naar buiten. De radiale optie van dit hulpmiddel gebruikt altijd een cirkelvorm.

Kan dit hulpmiddel een kleurverloop met meer dan twee kleuren maken? Nee. Zowel het lineaire als het radiale kleurverlooppaneel ondersteunt precies twee kleuren, Kleur 1 en Kleur 2, elk met een eigen stoppositie.

Wat is het verschil tussen een inwendige kaderschaduw en een gewone kaderschaduw? Een gewone kaderschaduw bevindt zich buiten de randen van het element, alsof er licht achter valt. Een binnenste schaduw bevindt zich juist binnen de randen, waardoor het element ingedrukt lijkt in plaats van verhoogd.

Waarom verschijnen de waarden voor afgeronde hoeken in de volgorde linksboven, rechtsboven, rechtsonder en linksonder? Dat is de volgorde waarin de CSS-eigenschap border-radius vier afzonderlijke waarden verwacht: met de klok mee, beginnend bij de linkerbovenhoek.

Werkt de gegenereerde CSS in elke browser? Kleurverlopen, kaderschaduwen, afgeronde hoeken en tekstschaduwen worden allemaal ondersteund in actuele versies van Chrome, Firefox, Safari en Edge. De uitvoer bevat geen leveranciersprefixen.

Referenties

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