Hello world

I'm fine

このディレクトリの他のファイル

gradient.php

このディレクトリのブログ

jQueryMemo 蕃山

勉強になったサイト

書き方

<style>
h3 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #555555;
display:inlilne;


}

h3 div {

position: absolute;
width:240px;
height: 32px;
background:#fff;
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.50; /*FF*/
opacity:0.50;

}
#sale{color:red;}
</style>


<script type="text/javascript" src="/js/jquery.js"></script>
<script src="/js/jquery.dimensions.js" type="text/javascript"></script>
<script src="/js/jquery.gradient.js" type="text/javascript"></script>

<script type="text/javascript">

(function($){

jQuery(function(){

jQuery("h3").prepend('<div class="" id="gradient"></div>');

jQuery("#gradient").gradient({
from: '000000',
to: 'ffffff',
direction: 'horizontal',
opacity: '50'
})


});



})(jQuery);
</script>

<div style="padding:3em;width:240px;border:1px solid #ccc;">
<h3>Hello world</h3>
</div>

<div style="padding:3em;width:240px;border:1px solid #ccc;">
<h3 id="sale">I'm fine</h3>
</div>

このドキュメントについて

CSS Gradient Text Effectで紹介されているテキストグラデーションの手法をjQueryでトライしたものです。
期待したとおりには、なかなか行きませんでしたが、画像をまったく使わないで、ちょっと変わったテキストへの、表現を追加できました。

IE6 + fat windows では、グラデーションが期待通りにはかからなかった。

IE7 FireFox2では、使いどころを考えれば使えるかもしれない。

jQueryは、ブラウザチェックができるので、ブラウザごとに、適用方法を分けるといいかも

表現方法としては、見出しエレメントの中に、divを入れ込む方法なので、htmlで記述するのは、あまりにも、、、、なので、DOMでの視覚効果にとどめたほうがいい。

なぜか、spanタグにグラデーションをかけることができなかった。このためグラデーションが安定してかかるdivを使った。

透過処理も、cssと、jQueryグラデーションのopacity両方使った、、、グラデーションのopacityぜんぜん利いていないかも、、、

グラデーションだけのページ。ブラウザによって、グラデーションのかかるタグが異なるようです。