Login

Nickname
Passwort

Thread: Texte mit Farbverlauf im GB

Dienstag, 21. November 2017, 22:44 Uhr
Frischfleisch
Rudedolph1518425
Beiträge: 356
Alter: etwa 6 Jahre
Wohnort:
Texte mit Farbverlauf im GB

Da im Stammtisch die Frage aufkam, wie man im GB Texte mit Farbverlauf versehen kann, habe ich mich schlau gemacht und zwei Varianten gefunden.

Variante 1:

Diese ist grundsätzlich nicht schwer, ist aber gleichzeitig sehr aufwendig, da jedes Zeichen in einen BB-Code gepackt werden muss.

Beispiel:



[color=#ff0000]I[/color][color=#ff1000]c[/color][color=#ff2000]h[/color] [color=#ff4000]b[/color][color=#ff4f00]i[/color][color=#ff5f00]n[/color] [color=#ff7f00]e[/color][color=#db9106]i[/color][color=#b6a40c]n[/color] [color=#6dc817]L[/color][color=#49da1d]a[/color][color=#24ed23]m[/color][color=#00ff29]a[/color]

Das folgende Tool kann euch die Arbeit allerdings abnehmen:

http://patorjk.com/text-color-fader

Dort gebt ihr euren Text in den Editor, sucht die Farben aus oder lasst random aussuchen, stellt den Output Code auf "Standard Forum Code" und klickt auf "Generate Color Fadet Text". Es wird dann der Text als Vorschau und darunter der Code angezeigt, den ihr kopieren müsst. Am besten einfach auf "Select All", dann kopieren und einfügen.

Der Nachteil: Der gesamte Code ist sehr vollgepackt und sehr unübersichtlich.


Variante 2:

Wer seine Codes etwas übersichtlicher gestalten will und sich ein bisschen mit HTML/CSS auskennt, nutzt die zweite Variante: für BB-Codes modifizierte CSS-Codes.

Beispiel:



[p style="background: linear-gradient(45deg, #FF0000 0%, #05C1FF 83%, #000000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/p]

Wie der Befehl es bereits besagt, verläuft der Farbrichtung hier linear. "45deg" im Beispiel steht für die Gradzahl (0-360), welche die Verlaufsrichtung bestimmt.
90 Grad (90deg) lässt die Farbe von links nach rechts, 270 von rechts nach links, 180 Grad (180deg) von oben nach unten, 360 Grad bzw. 0 Grad (360deg bzw. 0deg) von unten nach oben verlaufen. Mit 45 Grad (45deg) verläuft sie diagonal von links unten nach rechts oben. Und so geht es immer so weiter.

Als nächstes können die gewünschten Farbcodes angegeben (mindestens 2) und mit den Prozentzahlen der Verlauf der Farbe gesteuert werden.

Hierbei kann euch das Tool hier weiterhelfen:

http://angrytools.com/gradient/

Für die Ausgabe des Verlaufs-Codes stellt es unten auf "CSS - hex". Die vorletzte Zeile mit dem Kommentar /* w3c */ ist der, den ihr braucht. /* w3c */ kann dabei aber einfach weggelassen werden.


Möchte man aber die Farbe von innen heraus als Kreis, also radial, verlaufen lassen, lautet der Code etwas anders.

Beispiel:



[p style=" background: radial-gradient(ellipse at center, #ff0000 0%, #000000 100%); webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/p]

Hier steht der erste Farbcode für die Mitte, der zweite für den äußeren Rand.

Viel Vergnügen beim Ausprobieren.

Bei Fragen stehe ich gerne zur Verfügung. :)

Jüngster Zuwachs

LeeLoo, erstellt am
   Donnerstag, 13. Dezember 2018, 21:05 Uhr
Arlisse, erstellt am
   Montag, 10. Dezember 2018, 20:09 Uhr
-Walker-, erstellt am
   Sonntag, 18. November 2018, 01:28 Uhr
JaquelineLaFleur, erstellt am
   Mittwoch, 14. November 2018, 08:12 Uhr
RIP_StanLee, erstellt am
   Montag, 12. November 2018, 20:30 Uhr
WhyNot, erstellt am
   Montag, 12. November 2018, 20:11 Uhr
AtrejuNygaard, erstellt am
   Mittwoch, 07. November 2018, 00:43 Uhr
LyrischeFeder, erstellt am
   Sonntag, 21. Oktober 2018, 15:41 Uhr
Unscheinheiligkeit, erstellt am
   Donnerstag, 18. Oktober 2018, 00:25 Uhr
JoergenSkalbjerg, erstellt am
   Mittwoch, 10. Oktober 2018, 15:37 Uhr