CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life
久々に CSS3 についてのエントリーです. 以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』 が大変好評だったので, CSS3 関連のエントリーもちょくちょく投稿していこうかなと思います. 今回は, text-shadow についてまとめました. text-shadow はその名の通りテキストに影をつけるプロパティです. しかし, そんな単純なプロパティだったらわざわざエントリーにしません. text-shadow プロパティはオフセット値やぼかし具合が指定可能であることはよく知られています. が, なんとこれいくらでも指定できちゃうんです!! コンマ区切りで! 複数の text-shadow を指定することで文字をぼかしたり強調したり光らせたり燃やしたりといったさまざまな装飾が簡単に行えます. そんな活用例をサンプルとしてまとめましたので
phiary
みなさん, Web サービスやブログを作る際に見出しのデザインに悩んだことはありませんか? 意外とこれが曲者で, Web デザインについての情報はたくさんありますが, 見出しについてはこれといった決定版ってのがないんですよねぇ. 今回は, CSS の border プロパティを使って見出しを装飾する方法を紹介します. 以前書いたエントリー『CSS の border-style 一覧』で紹介した border-style に加え border-color や border-width を活用することで簡単に見出しを装飾することができます. 色々なパターンの見出しを作っておりますので, 実際に実行したり fork してイジったりして遊んでもらえると幸いです. また, 超有名ブログの見出しについても少しまとめてみたので, よかったら参考にしてみてください. シンプルな見出し シンプルな見出しです
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life
『CSS の border プロパティを使って見出しを装飾しよう』 第２弾!(第４弾まであります!!) 引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します. ちょい派手な見出しです. シンプルな見出しです. 大見出しから中見出しを想定して作りました. 色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい. シンプルな見出し ちょい派手な見出し←今ここ ド派手な見出し(近日公開予定) 超有名サイトの見出し(近日公開予定) Table of contents サンプル Header Type 01 Header Type 02 Header Type 03 Header Type 04 Header Type 05 Header Type 06 サンプル サン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
