02
08
jquery.jsでグラディエーションロゴを作成
2008-02-08
画像や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以下ではちゃんと表示されないようです。ってことであまり使えないかも。。対策がわかればまた報告します。
どうやらIE6以下ではちゃんと表示されないようです。ってことであまり使えないかも。。対策がわかればまた報告します。
