これはすごい!テキストに影を付け印象的にする「CSS text-shadow Fun」

CSSのtext-shadowとJavaScriptを利用してテキストの影を非常に印象的にするテクニックです。
※サポートブラウザはSafari、FF3.5、Operaなどです。
via:CSS text-shadow Fun
これはすごい!テキストに影を付け印象的にする「CSS text-shadow Fun」サンプル

使用方法
まずはテキストを書きます。

<div id="text-shadow-box">
<div class="wall">
<p id="tsb-text">影を付けたいテキスト</p>
<div></div>
</div>
<div id="tsb-spot"></div>
</div>

上記を記述したら、CSSを以下のようにします。
<style type="text/css" media="all">
#text-shadow-box {
position: relative;
width: 598px;
height: 406px;
background: #666;
overflow: hidden;
cursor: none;
border: 1px solid #333;
}
#text-shadow-box div.wall {
position: absolute;
top: 175px;
left: 0;
width: 100%;
}
#tsb-text {
margin: 0;
color: #999;
font-family: Helvetica, Arial, sans-serif;
font-size: 80px;
line-height: 0.5em;
height: 1px;
font-weight: bold;
text-align: center;
}
div.wall div {
position: absolute;
background: #999;
top: 42px;
left: 0;
height: 300px;
width: 100%;
}
#tsb-spot {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(spotlight.png) top center;
}
</style>

最後にJavaScriptを記述します。
<script type="text/javascript" language="javascript" charset="utf-8">
/**
* Zachary Johnson
* June 2009
* www.zachstronaut.com
*/

var text;
var spot;

window.onload = function () {
document.getElementById('text-shadow-box').onmousemove = onMouseMove;
text = document.getElementById('tsb-text');
spot = document.getElementById('tsb-spot')
}

function onMouseMove(e) {
var xm = e.clientX - 300;
var ym = e.clientY - 175;
var d = Math.sqrt(xm*xm + ym*ym);
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';

xm = e.clientX - 600;
ym = e.clientY - 450;
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}
</script>

これで完成です。
下記サンプルの上で、マウスを動かしてみてください。 これはすごい!テキストに影を付け印象的にする「CSS text-shadow Fun」サンプル

sponsors

「これはすごい!テキストに影を付け印象的にする「CSS text-shadow Fun」」をシェアする

記事作成:
記事URL:

TOP > > > これはすごい!テキストに影を付け印象的にする「CSS text-shadow Fun」