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 長谷川恭久»