そういった時に使えるテキストにグラデーションをかけるテクニックを2つ紹介したいと思います。 CSSで作成するバージョンとjQueryを使って作成するバージョンがありますので、まずはCSSから
CSSを使って作成する
このような感じに出来上がります。
実際のデモやサンプルは下記の作成者さんのサイトでご確認ください。
閲覧可能なブラウザChrome、Safari Webkit系で見てください ※ FireFoxでは見れません。。
サンプルを確認するとこのような感じになってました。
|
<h1 data-text="InfinityScope"> InfinityScope </h1> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
h1[data-text] { position: relative; color: red; } h1[data-text]::after { content: attr(data-text); z-index: 2; color: green; position: absolute; left: 0; -webkit-mask-image: -webkit-gradient( linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(40%, rgba(0,0,0,0)) ); |
h1[data-text]::afterのcolor部分を変更してグラデーション部分を変更するとまた違ったテキストが出来るので応用してカラフルなテキストを作ってみるのも楽しいかも
jQueryを使って作成する
次にご紹介するのはjQueryを使って作成されているものです。
閲覧可能なブラウザ IE6, Firefox3, Opera9.64, Chrome1, Safari4
使い方
HEADER部分に以下を記述
|
<link rel="stylesheet" type="text/css" href="pxgradient.css" /> <script type="text/javascript" src="jquery-1.5.min.js"></script> <script type="text/javascript" src="pxgradient-1.0.1.jquery.js"></script> <script type="text/javascript"> /* .text の部分をグラデーションしたい部分に変更 */ $(".text").pxgradient({ /* グラデーション変化 (1-10まで) */ step: 10, /* グラデーションのいろ */ colors: ["#fc0","#0fc","#00f"], /* グラデーションする方向 */ dir: "x" }); </script> |