javascriptで文字にドロップシャドウをつける方法

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

SiMPLE*SiMPLEさんのエントリー、CSSだけで文字にドロップシャドウをつける方法(あまり良くない方法)について。

発想自体がすごく素敵。
コメントで指摘されているアクセシビリティ、SEO等の問題はJavaScriptでやっちゃったら解決できるんじゃないかと思うので早速作ってみる。
るんだったら画像使った早いかもしれないですね。

cssで記述するコード

h1 {
color: #000;
position: relative;
}
h1 span {
color: #fff;
display: block;
position: absolute;
top: -1px;
left: -1px;
}

(x)htmlで記述するコード

<h1>とあるwebクリエイターのblog</h1>

javascriptで記述するコード

window.onload = function(){
h1 = document.getElementsByTagName('h1');
for (i = 0; i < h1.length; i++) {
tp = h1[i];
tp.innerHTML = '<span>'+tp.innerHTML+ '</span> ' + tp.innerHTML;
}
}

サンプル

css off で javascript onには未対応です。
まぁそこまでや

スポンサードリンク

«CSS Nite in OSAKA ザ・ルールズ・オブ・スタイルシート by 益子貴寛 | メイン | CSS Nite in OSAKA エコなWebデザイナーになろう by 長谷川恭久»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1363
コメント

> コメントで指摘されているアクセシビリティ、SEO等の問題はJavaScriptでやっちゃったら解決できるんじゃないか

まったくもって幻想ですよ。JavaScriptも読み上げますので・・・。

投稿者:shiten | 2006年12月 2日 21:21

> shitenさん

コメントありがとうございます。

『読み上げる』とのご指摘のようなので、音声ブラウザでh1要素内の記述が2重に読み上げれるということでしょうか?

よろしければ、その音声ブラウザのソフト名を教えていただけないでしょうか?

投稿者:西畑 | 2006年12月 4日 01:25
コメントを投稿