おすすめグッズや役立つ情報ブログ

Sedori Plan

Web

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タグ)デザイン

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-Web

Copyright© Sedori Plan , 2018 All Rights Reserved.