CSS3で作るグラデーション・ストライプの見出し(hタグ)デザインまとめ

CSS3で作るグラデーション・ストライプの見出し(hタグ)デザインまとめ

サイトのリニューアルの仕事があって、仮のデザインを作っているのですが画像で見出しを作るとちょっとした修正も画像ソフトを使うのが面倒になってきました。

なので出来るだけCSSでカッコよく見出しを作ろうと思って前回の記事とは違ったCSS3だけで作る見出しデザインをご紹介します。


  CSSだけでカッコよく作る見出し(hタグ)デザイン(サンプル付き)
CSSだけでカッコよく作る見出し(hタグ)デザイン(サンプル付き)

  CSSだけで簡単に作る見出し(hタグ)デザイン2(サンプル付き)
CSSだけで簡単に作る見出し(hタグ)デザイン2(サンプル付き)

photo credit: editing kool keith via photopin (license)

CSS3のみ使った見出し

見出し1

見出し1

上から下への濃いピンクから薄いピンクに変わっていくグラデーション。

見出し2

見出し2

上の濃いピンクのグラデーションを消す。

見出し3

見出し3

上下共にグラデーションを消す。

見出し4

見出し4

ストライプの見出し。

見出し5

見出し5

逆ストライプの見出し。

見出し6

見出し6

横ストライプの見出し。

見出し7

縦ストライプの見出し。
見出し7

見出し8

見出し8

円模様のストライプの見出し。

まとめ

参考にしたサイト

URLhttp://css-tricks.com/stripes-css/

[サンプル] CSS3で作るグラデーション・ストライプの見出し(hタグ)デザイン

ぜひ、試してみてください。

CSS3で作るグラデーション・ストライプの見出し(hタグ)デザインまとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*