CSS-Texteffektgenerator

Die meisten CSS-Texteffektgalerien bieten Ihnen eine feste Voreinstellung: ein Neonlicht, eine 3D-Extrusion, egal, ob Sie es möchten oder nicht. Dieser Generator erstellt das CSS stattdessen aus Ihren Parametern, basierend auf dem Text, den Sie tatsächlich eingeben. Wählen Sie Neonlicht, 3D-Extrudieren, Buchdruck/Prägung, Kontur oder Verlaufsfüllung aus der Effektauswahl aus, passen Sie die Steuerelemente dieses Effekts an, und die Live-Vorschau sowie der kopierbare CSS-Block darunter werden bei jeder Änderung aktualisiert.

Es lohnt sich, den 3D-Extrusionseffekt zu verstehen: Für eine gewählte Tiefe (Anzahl der gestapelten Schichten) und einen Winkel wird die Schicht i horizontal um i × cos(Winkel) und vertikal um i × sin(Winkel) versetzt, berechnet in JavaScript mit den echten trigonometrischen Funktionen – nicht aus einer Nachschlagetabelle mit voreingestellten Winkeln gelesen. Bei 45 Grad sind die horizontalen und vertikalen Versätze für jede Ebene gleich, da Cosinus und Sinus von 45° den gleichen Wert haben; Drehen Sie den Winkelregler und beobachten Sie, wie der gesamte Stapel von „Textschatten“-Ebenen in Echtzeit um die Buchstaben schwingt, wobei jede einzelne etwas dunkler wird als die letzte, um ein beleuchtetes 3D-Gesicht vorzutäuschen.

Neon Glow stapelt vier „Text-Schatten“-Ebenen mit zunehmendem Unschärferadius in der von Ihnen gewählten Farbe, mit einem optionalen Flimmern: Wenn Sie es einschalten, wird eine „@keyframes“-Regel mit einer zufälligen Folge von Deckkrafteinbrüchen generiert und live animiert. Mit einer Zufallsschaltfläche können Sie das Muster neu rollen, ohne einen einzigen Keyframe von Hand schreiben zu müssen. Umrissener Text wendet „-webkit-text-Stroke“ für Browser an, die dies unterstützen, sowie einen ehrlichen 8-direktionalen „Text-Shadow“-Fallback für diejenigen, die dies nicht unterstützen – beide Zeilen werden im kopierten CSS mit einem Hinweis zum Grund geliefert. „Gradient-fill“ schneidet mit „background-clip: text“, jetzt eine Standardeigenschaft mit breiter Unterstützung, einen „linearen Farbverlauf“ an die Textform an, wobei die ältere Präfixzeile „-webkit-“ für ältere Engines beibehalten wird.

Alles wird lokal in Ihrem Browser gerendert – der von Ihnen eingegebene Text wird niemals irgendwohin gesendet. Kopieren Sie den fertigen CSS-Block, einschließlich der „@keyframes“-Regel, wenn der Effekt eine erfordert, direkt in Ihr Stylesheet.