web-dev-qa-db-ja.com

グラデーションテキストの色

ジェネレーター、または this のようなテキストを生成する簡単な方法はありますが、every文字を定義する必要はありません

だからこのようなもの：

.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;
}
<span class="Rainbow">Rainbow text</span>

しかし、Rainbow色ではなく、他の色（たとえば、白から灰色/水色のグラデーションなど）で生成しますこれには簡単な解決策が見つかりません。解決策はありますか？

csscss3generatorgradientlinear-gradients
39
StabDev

stopがどのように機能するのか正確にはわかりません。しかし、私はグラデーションテキストの例を持っています。たぶんこれはあなたを助けるでしょう！

_必要に応じてグラデーションに色を追加したり、 色ジェネレータ から他の色を選択したりすることもできます

.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;
}
<span class="Rainbow">Rainbow text</span>
<br />
<span class="Rainbow2">No Rainbow text</span>
66
Angel ofDemons

この効果の仕組みは非常に簡単です。要素には、グラデーションである背景が与えられます。与えられた色と色停止の割合に応じて、ある色から別の色に変化します。

たとえば、Rainbowのテキストサンプル（グラデーションを標準の構文に変換したことに注意してください）：

  • グラデーションは#f22の色0%（要素の左端）から始まります。パーセントが明示的に言及されていなくても、最初の色は常に0%で始まると想定されます。
  • 0%から14.25%の間で、色は#f22から#f2fに徐々に変化します。 7つの色の変更があり、均等な分割を探しているため、percenatgeは14.25に設定されています。
  • 14.25%（コンテナのサイズ）では、指定されたグラデーションに従って、色は正確に#f2fになります。
  • 同様に、色は、色の停止率で指定されたバンドに応じて、色が変化します。各バンドは、14.25%のステップである必要があります。

そのため、次のスニペットのように勾配が得られます。これだけでは、背景がテキストだけでなく要素全体に適用されることを意味します。

.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;
}
<span class="Rainbow">Rainbow text</span>

グラデーションはテキストのみに適用され、要素全体には適用される必要がないため、テキストの外側の領域から背景をクリップするようブラウザに指示する必要があります。これは、background-clip: textを設定することにより行われます。

（background-clip: textは実験的なプロパティであり、広くサポートされていないことに注意してください。）

テキストに単純な3色のグラデーション（つまり、赤-オレンジ-茶色）を持たせる場合は、線形グラデーションの指定を次のように変更するだけです。

  • 最初のパラメーターはグラデーションの方向です。色が左側が赤色で右側が茶色の場合は、to rightの方向を使用します。右が赤で左が茶色でなければならない場合は、to leftとして方向を指定します。
  • 次のステップでは、グラデーションの色を定義します。グラデーションは左側が赤で始まるため、最初の色としてredを指定します（パーセンテージは0％と想定されます）。
  • ここで、2つの色の変更（赤-オレンジとオレンジ-茶色）があるため、均等に分割する場合は、パーセンテージを100/2に設定する必要があります。均等に分割する必要がない場合は、必要に応じて割合を割り当てることができます。
  • したがって、50%では、色はorangeになり、最終的な色はbrownになります。最終色の位置は常に100％であると想定されます。

したがって、グラデーションの仕様は次のようになります。

background-image: linear-gradient(to right, red, orange 50%, brown).

上記の方法を使用してグラデーションを形成し、それらを要素に適用すると、必要な効果を得ることができます。

.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;
}
<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>
11
Harry

CSS linear-gradient と 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;
}

これは、段落の::after擬似要素に線形グラデーションを追加し、段落要素全体をカバーするようにします。ただし、mix-blend-mode: screenを使用すると、グラデーションはテキストがある部分にのみ表示されます。

jsfiddle は、これを職場で示すためのものです。 linear-gradient値を変更するだけで、目的を達成できます。

4
Arnelle Balane

CSSテキストグラデーションの例

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*/

オンラインジェネレーターtextgradient.com

3
Francesc
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);
} 
<div data-title='SOME TITLE'>
  <h1>SOME TITLE</h1>
</div>
1
vsync
  .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;
    }
<div class="gradient_text_class">Hello</div>
0
Manthan Patel