Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

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

.midsahi-1 {
  background-image: linear-gradient(#FF5B78, #ffc0cb);
}

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

見出し2

見出し2

.midsahi-2 {
  background-image: linear-gradient(#FF5B78 50%, #ffc0cb);
}

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

見出し3

見出し3

.midsahi-3 {
  background-image: linear-gradient(#FF5B78 50%, #ffc0cb 50%, #ffc0cb);
}

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

見出し4

見出し4

.midsahi-4 {
  color: white;
  background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}

ストライプの見出し。

見出し5

見出し5

.midsahi-5 {
	color: white;
	background: repeating-linear-gradient(
	-55deg,
	#222,
	#222 10px,
	#333 10px,
	#333 20px);
}

逆ストライプの見出し。

見出し6

見出し6

横ストライプの見出し。

.midsahi-6 {
	color: white;
	background: linear-gradient(
	to bottom,
	#5d9634,
	#5d9634 50%,
	#538c2b 50%,
	#538c2b
	);
	background-size: 100% 20px;
}

見出し7

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

.midsahi-7 {
	background: repeating-linear-gradient(
	to right,
	#f6ba52,
	#f6ba52 10px,
	#ffd180 10px,
	#ffd180 20px
	);
}

見出し8

見出し8

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

.midsahi-8 {
	color: white;
	background: repeating-radial-gradient(
	circle,
	purple,
	purple 10px,
	#4b026f 10px, 
	#4b026f 20px
	);
}

まとめ

参考にしたサイト

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

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

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

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

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.