Mandarin Design: Text Tricks

CSSを使ったテキストを魅せるテクニック集が色々公開されていました。

例えば、次のような見出しの１文字を修飾するテクニック



次のようなCSSで実現可能のようです。

<!-- the drop cap -->
<span style="margin-right:6px;margin-top:5px;float:left;color:white;background:khaki;border:1px solid darkkhaki;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family:times;">T</span>his is a drop cap with a black background, white text, and a black border.<div style="clear:both;"><br></div>

知っておけば後々に使えそう。

また、次のように文字だけでレイアウトしたデザインのサンプルも紹介されています。
文字だけなのにポスターみたいですごくカッコいいですね。

他にも次のようにバナー画像風の描画をCSSで行うサンプルなんかも公開されています。



「Advanced Typography techniques using CSS」でも次のようなCSSを使ったカッコいいフォント効果が紹介されています。



画像に頼らずとも、工夫次第でカッコいいWEBサイトはいくらでも作れそうですね。