jQueryでグラデーションロゴを作成

 先日はCSSでおしゃれなグラデーションロゴを作成ということで紹介しましたが、今度はjquery.jsを利用したものを紹介します。今回はマウスを乗せると色が変わるバージョンとなってます。
 画像やjquery.jsはこちらよりダウンロードしてお使いください。で、まずjquery.jsを読み込みます。
<script type="text/javascript" src="jquery.js"></script>
 body部分はこのようになってます。<h1>を使いたくない場合は<p>などを代用ください。
<div class="gradient2">
  <h1><a href="/"><span></span>レッツFC2ブログ!</a></h1>
</div>
 最後にCSSです。
<STYLE type="text/css">
<!--

.gradient2 h1 {
	font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 20px 0 20px;
	color: #464646;
	text-transform: uppercase;
	letter-spacing: -2px;
}
.gradient2 h1 span {
	background: url(gradient-glossy.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 18px;
}
.gradient2 a {
	color: #000;
	text-decoration: none;
}
.gradient2 a:visited {
	color: #000;
}
.gradient2 a:hover {
	color: #555;
}

-->
</STYLE>
 この他ににもさまざまなサンプルが紹介されていますので「WebDesignerWall」という海外サイトで紹介されています。
【補足です】
どうやらIE6以下ではちゃんと表示されないようです。ってことであまり使えないかも。。対策がわかればまた報告します。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
初めまして。いつも勝手ながらお世話になっています。
普段自分はIE9を使っているのですが、この記事のページがIE9だと表示すらされなかったので、一応コメントさせていただきます。
今はchromeでコメント書いています。

古い記事に失礼しました。
【2012/01/21 20:44】 | おーとえす #- | [edit]
はじめまして。

ご指摘ありがとうございます。

恥ずかしながら未だにwindowsXPを使っているため
IE9をインストールできません。。

それにしても表示すらされないというのも変ですね。

Firefoxでは問題なさそうですし。
【2012/01/22 15:57】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加