CSS でテキストを縞模様にするにはどうすればよいですか?
テキストのようなもの、background-image
またはbackground-color
テキストに適用されるもの。または、そのように色付けされたフォントをダウンロードする必要がありますか?
CSS でテキストを縞模様にするにはどうすればよいですか?
テキストのようなもの、background-image
またはbackground-color
テキストに適用されるもの。または、そのように色付けされたフォントをダウンロードする必要がありますか?
デモ: http: //jsfiddle.net/LMg7q/2/
.striped{
font-size: 128px;
background-size: 16px;
-webkit-background-clip: text;
color: transparent;
background-color: #AC0;
background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .3) 75%, transparent 75%, transparent);
}
background-clip
およびの使用に注意してくださいbackground-size
background-color:text
は普遍的ではなく、このソリューションをWebkitに限定しますこれは、IE を含むクロス (モダン) ブラウザーで動作します。
私はsvgがあなたが求めているものだと信じています:
http://jsdo.it/Raam.Danger.Rosh-Hai/t93l
<svg width="12cm" height="4cm" viewBox="0 0 1200 400">
<desc>Example textdecoration01 - behavior of 'text-decoration' property</desc>
<rect x="1" y="1" width="1198" height="398" fill="pink" stroke="blue" stroke-width="2" />
<g font-size="220" fill="url(#img2)" stroke="white" stroke-width="1" >
<text x="100" class="text" y="205">Normal text</text>
<defs>
<pattern id="img2" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="http://price.sourceforge.net/manual/images/vert_stripes.gif" x="0" y="0" width="130" height="130" />
</pattern>
</defs>
</g>
</svg>
pattern
SVGの a に画像を使用できます。
xlink:href="http://price.sourceforge.net/manual/images/vert_stripes.gif"
画像へのリンクです。
あなたが望むものに変更するだけです。
それに続くwidth
とheight
は、複製されるイメージのサイズを制御します。
楽しんで。</p>
1 つの方法は、各文字をスパン要素でラップし、スパンに色を適用することです。各文字には独自の色があります。
<span style="color:red">H</span>
<span style="color:blue">O</span>
<span style="color:green">I</span>
これはどのブラウザでも機能しますが、維持するか、テキストを変更する必要がある場合は大変です。
デモを見る
h1 {
font-size: 72px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.03, rgb(250,3,3)),
color-stop(0.52, rgb(240,255,127)),
color-stop(0.76, rgb(42,24,173)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
実装例に追加します。オンラインでプレイしたい場合は、コードをここで見つけることができます。
https://codepen.io/anon/pen/QEmgbB?editors=1000
<svg width="188" height="32" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="style-stripes" width="90" height="64" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="90" y2="0" style="stroke: #E03A3E; stroke-width:8;" />
<line x1="0" y1="8" x2="90" y2="8" style="stroke: #963D97; stroke-width:8;" />
<line x1="0" y1="16" x2="90" y2="16" style="stroke: #009DDC; stroke-width:8;" />
<line x1="0" y1="24" x2="90" y2="24" style="stroke: #61BB46; stroke-width:8;" />
</pattern>
</defs>
<g fill="url(#style-stripes)" stroke="none" font-size="32" font-family="serif">
<text x="0" y="24" style="fill:#333;fill-opacity:1;">Reactive</text>
<text x="120" y="24">Style</text>
</g>
</svg>