テキストにグラデーションをかけて少しリッチに見せる（CSS & jQuery）

2012.07.13 Category:CSS Tag:jQuery

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

CSSを使って作成する

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

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

CSS Text Gradients

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

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

<h1 data-text="InfinityScope"> InfinityScope </h1>

1	<h1 data-text="InfinityScope"> InfinityScope </h1>

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] {

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>