コピペで簡単♪cssの見出しデザインサンプル10個作ってみた | CreativeTips
2014年12月25日css, WEB制作 cssでの見出しデザインを作ってみました。 ブログとかで使う見出しや小見出しなんかに使えると思います。 殆どのものを擬似要素を使って作ってみました。 中々センスある見出しデザインを作るのは難しいですね＞＜ ご参考になれば幸いです。 サンプルはこんな感じになります。 Resultボタンを押して表示を確認してみてください。 各ソースの紹介 それぞれのソース別にコードを紹介します。 なお各HTMLはこのようになっています。 <h3 class="sample1">CSS見出しデザイン</h3> <h3 class="sample2">CSS見出しデザイン</h3> <h3 class="sample3">CSS見出しデザイン</h3> <h3 class="sample4">CSS見出しデザイン</h3> <h3 class="sample5">CSS
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
