<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ぜんぜん利いていないかも、、、
グラデーションだけのページ。ブラウザによって、グラデーションのかかるタグが異なるようです。