CSSを使ったテキストをデザインとして魅せるテクニック集
2007年05月21日-
スポンサード リンク
Mandarin Design: Text Tricks
CSSを使ったテキストを魅せるテクニック集が色々公開されていました。
例えば、次のような見出しの1文字を修飾するテクニック
次のような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サイトはいくらでも作れそうですね。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- Three.jsでパーティクルが雨のように降り注ぐ実装デモ
- ホバーで文字がバラバラと集まるエフェクト実装
- ClipPathを使ったオシャレな画面切り替えスライドショー実装
- テキストをSVGを使って円形アニメーションさせるデモ
- Three.jsをつかった3Dなローディングアニメーション実装
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- 過去のエントリ