CSS-Eigenschaftengenerator

Ein CSS-Eigenschaftengenerator ist ein Werkzeug, das aus einer Reihe von Schiebereglern und Farbwählern CSS-Code für einen visuellen Effekt erstellt, anstatt dass der Benutzer den Code von Hand eingibt. Dieser Generator deckt vier Effekte ab: Farbverläufe, Boxschatten, abgerundete Ecken und Textschatten. Jedes Bedienfeld zeigt eine Live-Vorschau an und erzeugt kopierfertigen CSS-Code.

Was er erzeugt

• Farbverläufe: lineare oder radiale Farbübergänge zwischen zwei Farben
• Box-Schatten: ein Schlagschatten oder ein innerer Schatten um ein Element, mit Einstellungen für Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft
• Rahmenradius: abgerundete Ecken, entweder an allen vier Ecken gleich oder einzeln festgelegt
• Textschatten: ein Schatten hinter Text, mit Einstellungen für Versatz, Unschärfe, Farbe und Deckkraft

Jede Einstellung aktualisiert gleichzeitig die Vorschau und den erzeugten CSS-Code, sodass Änderungen vor dem Kopieren des Codes überprüft werden können.

So wird ein linearer CSS-Farbverlauf berechnet

Ein linearer Farbverlauf geht entlang einer geraden Linie von einer Farbe zu einer anderen über. Seine CSS-Syntax lautet:

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

Der Winkel wird in Grad von 0 bis 360 gemessen. position1 und position2 legen fest, an welcher Stelle jede Farbe ihre volle Stärke erreicht, als Prozentsatz der Länge des Farbverlaufs.

Rechenbeispiel

Die Startwerte des Generators sind ein Winkel von 90 Grad, #ff5f6d bei 0 % und #ffc371 bei 100 %. Daraus entsteht:

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

Die erste Zeile ist eine einfache Farbersatzangabe für Browser, die den Farbverlauf aus irgendeinem Grund nicht darstellen können. Die zweite Zeile ist der Farbverlauf selbst.

Formel für einen radialen Farbverlauf

Ein radialer Farbverlauf breitet sich von einem Mittelpunkt aus nach außen, statt entlang einer Linie zu verlaufen:

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

Dieser Generator erzeugt immer einen kreisförmigen radialen Farbverlauf. Er bietet weder eine Option für eine elliptische Form noch eine Möglichkeit, den Mittelpunkt zu verschieben; nur die beiden Farben und die Positionen ihrer Farbstopps lassen sich ändern.

Beide Farbverlaufstypen in diesem Werkzeug verwenden genau zwei Farben, die mit den Farbwählern Farbe 1 und Farbe 2 festgelegt werden. Es gibt keine Option, einen dritten Farbstopp hinzuzufügen.

Formel für CSS-Box-Schatten

Ein Box-Schatten ist ein Schatten, der um die Kanten eines Elements gezeichnet wird:

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

h-offset und v-offset verschieben den Schatten nach links oder rechts sowie nach oben oder unten. Positive Werte verschieben ihn nach rechts oder unten, negative Werte nach links oder oben. blur macht die Kante des Schattens weicher; ein höherer Wert dehnt die Weichzeichnung weiter aus. spread vergrößert oder verkleinert die Schattengröße, bevor die Unschärfe angewendet wird. Wird das Schlüsselwort inset vor den Versatzwerten eingefügt, wird der Schatten innerhalb des Rahmens des Elements statt außerhalb gezeichnet.

Rechenbeispiel

Bei den Standardeinstellungen (horizontaler Versatz von 5 px, vertikaler Versatz von 5 px, Unschärfe von 10 px, Ausdehnung von 0 px, Schwarz mit 20 % Deckkraft) gibt das Werkzeug Folgendes aus:

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

Der Deckkraftregler des Farbwählers reicht von 0 bis 100 und wird in die von rgba() verwendete Skala von 0 bis 1 umgerechnet, sodass 20 % zu 0,2 wird.

Formel für den CSS-Rahmenradius

Ein Rahmenradius rundet die Ecken eines Elements ab. Es gibt zwei Formen:

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

Wenn alle vier Ecken denselben Wert haben, verwendet der Generator die Kurzform. Bei unterschiedlichen Werten listet er die vier Werte in genau dieser Reihenfolge auf: oben links, oben rechts, unten rechts, unten links.

Rechenbeispiel

Der Standardradius beträgt an jeder Ecke 10 px:

1border-radius: 10px;
2

Ein kreisförmiges Avatarbild verwendet normalerweise stattdessen border-radius: 50%, obwohl dieser Wert außerhalb des Bereichs liegt, den der Schieberegler dieses Generators zulässt (0 bis 100 Pixel).

Formel für CSS-Textschatten

Ein Textschatten funktioniert wie ein Box-Schatten, hat aber keinen Wert für die Ausdehnung und wird auf Buchstaben statt auf den Kasten eines Elements angewendet:

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

Rechenbeispiel

Bei den Standardeinstellungen (horizontaler Versatz von 2 px, vertikaler Versatz von 2 px, Unschärfe von 3 px, Schwarz mit 50 % Deckkraft):

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

Welche Farbcodes der Generator akzeptiert

Jede Farbsteuerung verfügt über ein Farbfeld und ein Textfeld. Das Textfeld akzeptiert einen Hex-Farb code in der Form #, die in CSS durchgehend verwendet wird. Vier Längen sind gültig: drei Ziffern (#f00), vier Ziffern (#f00c), sechs Ziffern (#ff0000) und acht Ziffern (#ff0000cc). Die Kurzformen stehen für dieselbe Farbe wie die langen Formen, weil jede Ziffer verdoppelt wird: #123 ist dieselbe Farbe wie #112233.

Die letzte Ziffer der vierstelligen Form und das letzte Ziffernpaar der achtstelligen Form legen die Transparenz fest. Die Schattengeneratoren ignorieren diese Ziffern und übernehmen den Alphawert stattdessen vom Deckkraftregler, sodass der Regler immer die tatsächlich angewendete Transparenz anzeigt. Enthält das Textfeld etwas, das keine Hex-Farbe ist, beispielsweise einen nur teilweise eingegebenen Code, verwendet der Schatten als Ersatz Schwarz, statt eine ungültige Deklaration zu erzeugen.

So wird der CSS-Eigenschaftengenerator verwendet

1. Einen Tab auswählen: Farbverlauf, Box-Schatten, Rahmenradius oder Textschatten.
2. Die Schieberegler, Farbwähler und Kontrollkästchen anpassen. Neben jedem Schieberegler befindet sich ein Zahlenfeld zur Eingabe eines exakten Werts. Die Vorschau und der CSS-Code werden sofort aktualisiert.
3. Die Schaltfläche „In die Zwischenablage kopieren“ auswählen und den Code in ein Stylesheet oder ein style-Attribut einfügen.
4. „Zurücksetzen“ auswählen, um alle Felder in allen vier Tabs auf ihre Startwerte zurückzusetzen. Dabei wird auch der aktive Tab wieder auf „Farbverlauf“ eingestellt, selbst wenn zuvor ein anderer Tab angezeigt wurde.

Häufig gestellte Fragen

Wofür wird ein CSS-Eigenschaftengenerator verwendet? Er wandelt Eingaben über Schieberegler und Farbwähler in fertigen CSS-Code für Farbverläufe, Schatten und abgerundete Ecken um, sodass der Benutzer diese Syntax nicht von Hand schreiben oder auswendig kennen muss.

Was ist der Unterschied zwischen einem linearen und einem radialen Farbverlauf? Ein linearer Farbverlauf ändert die Farbe entlang einer geraden Linie in einem festgelegten Winkel. Ein radialer Farbverlauf ändert die Farbe von einem Mittelpunkt aus nach außen. Die radiale Option dieses Werkzeugs verwendet immer eine Kreisform.

Kann dieses Werkzeug einen Farbverlauf mit mehr als zwei Farben erstellen? Nein. Sowohl das Bedienfeld für lineare als auch das für radiale Farbverläufe unterstützt genau zwei Farben, Farbe 1 und Farbe 2, jeweils mit einer eigenen Position des Farbstopps.

Worin unterscheidet sich ein innerer Box-Schatten von einem normalen? Ein normaler Box-Schatten befindet sich außerhalb der Kanten des Elements, wie ein Schatten, der durch dahinter einfallendes Licht entsteht. Ein innerer Schatten liegt stattdessen innerhalb der Kanten und lässt das Element eher eingedrückt als hervorstehend wirken.

Warum erscheinen die Werte für abgerundete Ecken in der Reihenfolge oben links, oben rechts, unten rechts, unten links? Diese Reihenfolge erwartet die CSS-Eigenschaft border-radius für vier getrennte Werte: im Uhrzeigersinn, beginnend bei der oberen linken Ecke.

Funktioniert der erzeugte CSS-Code in jedem Browser? Farbverläufe, Box-Schatten, Rahmenradien und Textschatten werden von aktuellen Versionen von Chrome, Firefox, Safari und Edge unterstützt. Der Ausgabe werden keine Herstellerpräfixe hinzugefügt.

Referenzen

1. MDN Web Docs: CSS-Gradientverläufe verwenden
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow