css text-Farbverlauf

Hatte, habe ich ein bisschen herum schauen und kann nichts finden darüber.

Wenn ich einen Absatz von text, gibt es eine Möglichkeit, vielleicht mit CSS3 allmählich zu ändern die Farbe des Textes, wie es geht nach unten auf die Seite? anstatt den Weg, die Steigung tut es, weil Sie auf das Wort, das nicht der gesamte Absatz des Textes.

So, ich möchte den text zu beginnen weiß und dann verblassen Sie in schwarz, wie es nur geht an das Ende des Absatzes.

Ich bin wirklich nicht sicher, es kann getan werden... Vielleicht gibt es ein java script, das kann es.

Dank.

InformationsquelleAutor ragebunny | 2011-12-05
  1. 9

    Kann man es mit CSS, aber es funktioniert nur in webkit-Browsern (Chrome und Safari):

    CSS:

    p {
    background: -webkit-linear-gradient(red, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

    HTML:

    <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>

    • Das ist erstaunlich.... Aber so eine Schande, seine nur webkit-Browser.... Ich Frage mich, ob es eine Lösung für den IE und firefox!? Dank für, die.
    • Hoffentlich anderen Browsern wird start für die Umsetzung dieser features, aber bis dahin ist webkit nur leider.
    InformationsquelleAutor joshnh
  2. 1

    War ich in der Lage, etwas zu tun, ähnlich wie in reinem css, aber es funktioniert nicht im IE, da es nicht unterstützt mix-blend-mode-css-Eigenschaft:
    http://caniuse.com/#feat=css-mixblendmode

    Das code-snippet unten. Hoffe, es hilft jemand.

    <html>
<head>
<style>
.gradient {
    position: relative;
    content: '';
    display: block;
    width: 260px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1)));
    background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
    background:    -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
    background:     -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
    background:      -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
    background:         linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%);
}
.gradient p {
  color: #000;
  background: #fff;
  mix-blend-mode: lighten;
}
</style>
</head>
<body>
    <div class="gradient">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</body>
</html>
    InformationsquelleAutor mp_loki
  3. 1

    Ist hier eine einfache Lösung mit grundlegenden CSS. Sie können fügen Sie ein overlay-div mit linear-gradient von weiß zu transparent. Dieses div wird in voller Breite und Höhe den gewünschten text ein.

    Beispiel:

    <style>
   .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(white, transparent);
   }
</style>

<div style="position: relative;">
   <p>
      Some text<br>
      Some text<br>
      Some text<br>
      Some text<br>
   </p>
   <div class="overlay"></div>
</div>
    InformationsquelleAutor saad-mb
  4. 0

    Ist der einfachste Weg für cross-browser-text-Gradienten ist, um ein Bild zu verwenden.

    http://webdesignerwall.com/tutorials/css-gradient-text-effect

    InformationsquelleAutor Casey Robinson
Schreibe einen Kommentar