Gradient text-Farbe

Gibt es einen generator , oder eine einfache Möglichkeit zum generieren von text, wie diese, ohne jedoch zu definieren jeder Brief

So etwas wie dieses:

CSS:

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

HTML:

<span class="rainbow">Rainbow text</span>

Aber nicht mit rainbow Farben, sondern generieren mit anderen Farben (z.B. weiß-Grau/hellblau Gradienten, etc.) kann ich nicht finden, eine einfache Lösung für dieses. Alle Lösungen?

Es gibt viele websites, die bieten das gleiche wie cssmatic.com
Was ist dort das problem? Ändern Sie den Farbverlauf, wie du möchtest. Wenn Sie sich Fragen, über tools/Generatoren (von denen ich glaube, Sie sind), dann Ihre Frage wird geschlossen, da off-topic/Meinung.
Das gilt nur für den hintergrund nicht die Farbe für den text selbst 😐
Ich bin versucht, um zu wissen, wie man den gleichen Effekt wie der Regenbogen-text-Probe, aber mit anderen Farben @Harry nicht Fragen, für einen generator perse eine Lösung auf, wie einfach die Farben selbst / wie das Regenbogen-Beispiel funktioniert, wäre eine große Hilfe aswell.
Ich sehe, du hast bereits eine Antwort. Willst du immer noch wissen, wie es funktioniert? Wenn ja, gebe ich eine ausführliche Antwort.
Ich würde gerne wissen, wie es funktioniert. Da die gegebene Antwort verwendet einen anderen Ansatz, bei dem klappt, aber ich Liebe noch zu wissen) @Harry
Ich würde gerne sehen, es aswell @Harry

InformationsquelleAutor StabDev | 2016-06-15

Ich nicht genau weiß, wie die stop Zeug funktioniert.
Aber ich habe eine gradient text Beispiel. Vielleicht wird dies Ihnen zu helfen!

_you können auch weitere Farben für den Farbverlauf-wenn Sie möchten, oder wählen Sie einfach andere Farben aus der color generator

CSS:

.rainbow2 {
    background-image: -webkit-linear-gradient(left, #E0F8F7, #585858, #fff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #E0F8F7, #585858, #fff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #E0F8F7, #585858, #fff); /* Standard syntax; must be last */
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.rainbow {

  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

HTML:

<span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>

Einfache, schöne Lösung! Dank
nun, das ist eine clevere Art, das auch zu erreichen! gute Arbeit! 😀
aber die -webkit-background-clip: text; Eigenschaft nicht unterstützt, IE11, eine alternative?

InformationsquelleAutor Angel ofDemons

11

Die Art, wie dieser Effekt funktioniert, ist sehr einfach. Das element ist ein hintergrund, der die Steigung. Es geht von einer Farbe in eine andere in Abhängigkeit von den Farben und color-stop vomhundertsätze für Sie.

Beispielsweise in der Regenbogen-text-Beispiel (beachten Sie, dass ich konvertiert haben, müssen Sie den Farbverlauf in der standard-syntax):
- Der Verlauf beginnt bei der Farbe #f22 bei 0% (das ist die linke Kante des Elements). Erste Farbe ist immer davon ausgegangen, starten 0% auch wenn der Prozentsatz nicht ausdrücklich erwähnt ist.
- Zwischen 0% zu 14.25% ändert sich die Farbe von #f22 zu #f2f allmählich. Die percenatge ist auf 14.25 da gibt es sieben, die Farbe ändert sich und wir sind auf der Suche für gleiche Teilungen.
- Bei 14.25% (der container-Größe), die Farbe wird exakt #f2f wie pro die Steigung angegeben.
- Ebenso die Farben ändern sich von einem zum anderen je nach den bands festgelegte Farbe stoppen Prozentsätze. Jede band sollte ein Schritt von 14.25%.
So, wir bekommen am Ende eine Steigung wie in der unten snippet. Nun das allein würde bedeuten hintergrund gilt für das ganze element und nicht nur den text.

CSS:
```
.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f 14.25%, #22f 28.5%, #2ff 42.75%, #2f2 57%, #2f2 71.25%, #ff2 85.5%, #f22);
  color: transparent;
}
```
HTML:
```
<span class="rainbow">Rainbow text</span>
```
Da, der Farbverlauf angewendet werden soll, nur auf den text und nicht auf das element, auf das ganze, wir brauchen den browser anweisen, um die clip-hintergrund aus den Bereichen außerhalb des Textes. Dies wird durch die Einstellung background-clip: text.

(Beachten Sie, dass die background-clip: text ist eine experimentelle Eigenschaft und ist nicht weit unterstützt.)

Nun, wenn Sie wollen, dass der text einfach, 3-Farbverlauf (das ist, sagen wir von rot - orange - Braun), wir brauchen nur zu ändern der linear-gradient Spezifikation wie folgt:
- Erste parameter ist die Richtung des Verlaufs. Wenn die Farbe sollte rot sein an der linken Seite und Braun auf der rechten Seite, dann verwenden Sie die Richtung, die to right. Wenn es rot sein sollte an Recht und Braun auf der linken Seite, dann geben die Richtung wie to left.
- Nächsten Schritt definieren Sie die Farben des Gradienten. Da unser Verlauf sollte als rot auf der linken Seite, geben Sie einfach red als die erste Farbe (in Prozent wird angenommen, dass 0%).
- Jetzt, da wir zwei Farbwechsel (rot - orange und orange - Braun), der Prozentsätze muss 100 /2 für gleiche Teilungen. Wenn gleich splits sind nicht erforderlich, wir weisen die Prozentsätze, wie wir wollen.
- So an 50% sollte die Farbe sein orange und dann die endgültige Farbe wäre brown. Die position und die endgültige Farbe ist immer davon ausgegangen, dass bei 100%.
Somit den Farbverlauf Spezifikation sollte wie folgt lauten:
```
background-image: linear-gradient(to right, red, orange 50%, brown).
```
Wenn wir die form der Verläufe mit der oben genannten Methode und wenden Sie diese auf das element, können wir den gewünschten Effekt.

CSS:
```
.red-orange-brown {
  background-image: linear-gradient(to right, red, orange 50%, brown);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.green-yellowgreen-yellow-gold {
  background-image: linear-gradient(to right, green, yellowgreen 33%, yellow 66%, gold);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
```
HTML:
```
<span class="red-orange-brown">Red to Orange to Brown</span>

<br>

<span class="green-yellowgreen-yellow-gold">Green to Yellow-green to Yellow to Gold</span>
```
InformationsquelleAutor Harry
4

Können Sie erreichen, dass die Wirkung mit einer Kombination aus CSS - linear-gradient und mix-blend-mode.

HTML
```
<p>
    Enter your message here... 
    To be or not to be, 
    that is the question...
    maybe, I think, 
    I'm not sure
    wait, you're still reading this?
    Type a good message already!
</p>
```
CSS
```
p {
    width: 300px;
    position: relative;
}

p::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);
    mix-blend-mode: screen;
}
```
Was dieser tut, ist fügen Sie einen linearen Verlauf auf, der Absatz ist ::after pseudo-element und machen es deckt die komplette Absatz-element. Aber mit mix-blend-mode: screen, der Verlauf wird zeigen nur auf Gebiete, wo es ist text.

Hier ein jsfiddle zu zeigen, bei der Arbeit. Ändern Sie einfach die linear-gradient Werte zu erreichen, was Sie wollen.
- Das sieht vielversprechend aus. Außer für den hintergrund hinter der text ist auch fading mit es. Abgesehen davon, dass eine einfache und schöne Lösung! +1
- oh, ich war der Annahme, dass der hintergrund einfach nur weiß sein. mix-blend-mode verbindet das element mit allen anderen Elementen hinter ihm, nicht nur den text, so dass, wenn der Absatz hat auch einen hintergrund, der Regenbogen-Farben wird auch die Mischung mit Ihnen. Ich weiß, es nervt 🙁
- Es muss nicht saugen, ich Liebe den Ansatz seiner einfach und nützlich. Versuchte ich es mit dieser Weg.
- Es funktioniert nicht auf chrome58
InformationsquelleAutor Arnelle Balane

Beispiel der CSS-Text-Gradient

background-image: -moz-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -webkit-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -o-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -ms-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: linear-gradient(top,#E605C1 0%,#3B113B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
display:inline-block; /*required*/

Online-generator
textgradient.com

Mir fehlte display. Dank

InformationsquelleAutor Francesc

CSS:

body{ background:#3F5261; text-align:center; font-family:Arial; } 

h1 {
  font-size:3em;
  background: -webkit-linear-gradient(top, gold, white);
  background: linear-gradient(top, gold, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  position:relative;
  margin:0;
  z-index:1;

}

div{ display:inline-block; position:relative; }
div::before{ 
   content:attr(data-title); 
   font-size:3em;
   font-weight:bold;
   position:absolute;
   top:0; left:0;
   z-index:-1;
   color:black;
   z-index:1;
   filter:blur(5px);
}

HTML:

<div data-title='SOME TITLE'>
  <h1>SOME TITLE</h1>
</div>

InformationsquelleAutor vsync

0

CSS:
```
  .gradient_text_class{
      font-size: 72px;
      background: linear-gradient(to right, #ffff00 0%, #0000FF 30%);
      background-image: linear-gradient(to right, #ffff00 0%, #0000FF 30%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
```
HTML:
```
<div class="gradient_text_class">Hello</div>
```
- Bitte geben Sie eine Erklärung oder Beschreibung, warum dies wäre die Lösung.
- Die akzeptierte Antwort nicht alles erklären entweder. Warum also sollte diese ein?
- Denn die akzeptierte Antwort zeigt, dass es funktioniert (d.h. "run snippet")
- Sorry für die zuvor unerklärliche code. aber Jetzt habe ich-Ausschnitt für die Vorschau von meinem code.
InformationsquelleAutor Manthan Patel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.