H1一つでここまで出来るCSS見出しデザインのアイデア9個

5
months
25
配信元サイト
SQUEEZE

HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。

  • このエントリーをはてなブックマークに追加
  • いいね!
  • google+
  • evernote

COMMENT

CSS3を利用したH1のデザインを紹介されています。

ソースも公開されていますのでとても参考になります。

http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img01.png http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img02.png http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img03.png http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img04.png http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img05.png http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img06.png http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img07.png http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img08.png http://squeeze.jp/wp-content/uploads/2013/02/heading-design-css-only-img09.png