LEDっぽい文字をCSSで組む

Read More

今日はCSSでLEDっぽいの表現できないかなーと思ってぽちぽちやってみた。

LEDってのはLight Emitting Diodeの頭文字で発光ダイオードのこと。

信号機なんかで使われているアレね。
一つ一つの粒が光ってるやつ。


■アルファベットをLEDっぽく表現する
<style type="text/css">
<!--
.led {
 line-height:7px;
 letter-spacing:-1.0px;
 background:#000;
 color:/*#4E0000;*/#000;
 float:left;
 margin:0;
 padding:0;
}
.led .char {
 color:#F70707;
 text-shadow: 0px 0px 15px #FF0000;
}
//-->
</style>
<div class="led">
■■■■■■■■<br />
■■<span class="char">■■■■</span>■■<br />
■<span class="char">■■</span>■■<span class="char">■■</span>■<br />
■<span class="char">■■</span>■■<span class="char">■■</span>■<br />
■<span class="char">■■</span>■■<span class="char">■■</span>■<br />
■<span class="char">■■■■■■</span>■<br />
■<span class="char">■■</span>■■<span class="char">■■</span>■<br />
■<span class="char">■■</span>■■<span class="char">■■</span>■<br />
■■■■■■■■<br />
</div>



■基本



■Ver.2



■Ver.3



■Ver.4




どのVerがカッコいいかな。
個人的にはやっぱVer.3とかが好きかな。

Ver.3のCSS
.led .char {
 color:#17EABC;
 text-shadow: 2px -2px 10px #08B28D;
}




マーキータグとか使ったり、javas使ったりして動かしたらおもしろいかも知れない。
ただ、ブラウザによって見た目に差異がが出てくるので素直に画像を使った方が良いとも言える。


さらにtext-shadowはIEでは使えない。


その為自分は css3shadow.htc という外部スクリプトを読み込むことで見た目の差異を軽減させている。

■css3shadow.htc
ファイルのDLと使い方説明のサイト↓
http://p2b.jp/1253331309


ただ自分の環境だと他のファイルと干渉することがあって、利用するにしてもかなり気を使って利用すべきだと思った。

あと結局はjavascriptなのでポンコツマシンだと処理が重重になる。




これらを踏まえると現時点ではtext-shadowは積極的に利用すべきではない。

利用するにしても、"少ーしだけテキストに味付けをする"くらいに表現を抑えて使った方が良い。



Category "HTML・JS・CSS" の最新記事