gradient

そういった時に使えるテキストにグラデーションをかけるテクニックを2つ紹介したいと思います。 CSSで作成するバージョンとjQueryを使って作成するバージョンがありますので、まずはCSSから

CSSを使って作成する

 このような感じに出来上がります。

実際のデモやサンプルは下記の作成者さんのサイトでご確認ください。

閲覧可能なブラウザChrome、Safari Webkit系で見てください ※ FireFoxでは見れません。。

 サンプルを確認するとこのような感じになってました。

XHTML
1
<h1 data-text="InfinityScope"> InfinityScope </h1>
CSS
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部分に以下を記述

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

グラデーション変化のところは、数値が大きくなると始まりの色から終わりの色までの変化が細かくなり沢山の色を使って変化していくことになります。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る