シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。
全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。
また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。

以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

<h1>あのイーハトーヴォのすきとおった風</h1>

また、ここでは見栄えの紹介は全て画像を使用していますが実際の表示は以下デモページで確認でき、デモでは複数行の時の見栄えも併せて確認することができます。

Demo

下ボーダー

下ボーダーの見出しイメージ

シンプルにタイトル下にボーダーを引いたものです。
これ以降出てくるものもborder-styleにsolidを指定しているものが多めですが、double, dashed, dottedなどボーダーの種類を変えるだけでもいろいろな見せ方ができます。

h1 {
  padding-bottom: .5em;
  border-bottom: 1px solid #ccc;
}

下ボーダー×先頭の文字大きく

下ボーダー×先頭の文字大きくの見出しイメージ

先ほどのものに加えて、先頭の文字のみ大きくなるようにしたものです。

h1 {
  padding-bottom: .5em;
  border-bottom: 1px solid #ccc;
}
h1:first-letter {
  margin-right: .1em;
  font-size: 1.5em;
}

下ボーダー（2本線）

下ボーダー（2本線）の見出しイメージ

border-styleにdoubleを指定したものです。

h1 {
  padding-bottom: .5em;
  border-bottom: 3px double #ccc;
}

上下にボーダー #1

上下にボーダー #1の見出しイメージ

シンプルにタイトルの上下にボーダーを引いたものです。

h1 {
  padding: .75em 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

上下にボーダー #2

上下にボーダー #2の見出しイメージ

こちらも上下にボーダーを引いたものですが、上下ともに見た目を2本線にしつつ、外側に面しているものは少し太くなるよう指定したものになります。
ここでは太さを変えたかったのでわざわざ擬似要素を用いていますが、単純な2本線でいいなら普通にborder-style: double;のボーダーが上下に表示されるようh1要素に記述するだけでできます。

h1 {
  position: relative;
  padding: 1em 0;
}
h1::before,
h1::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 6px;
  box-sizing: border-box;
}
h1::before {
  top: 0;
  border-top: 2px solid #ccc;
  border-bottom: 1px solid #ccc;
}
h1::after {
  bottom: 0;
  border-top: 1px solid #ccc;
  border-bottom: 2px solid #ccc;
}

左ボーダー

左ボーダーの見出しイメージ

シンプルにタイトル左にボーダーを引いたものです。

h1 {
  padding: .25em 0 .25em .75em;
  border-left: 6px solid #ccc;
}

左ボーダー×下ボーダー

左ボーダー×下ボーダーの見出しイメージ

先ほどのものに加えて、下にもボーダーを引いたものです。

h1 {
  padding: .25em 0 .5em .75em;
  border-left: 6px solid #ccc;
  border-bottom: 1px solid #ccc;
}

左ボーダー×下ボーダー（擬似要素使用）

左ボーダー×下ボーダー（擬似要素使用）の見出しイメージ

もちろん上で使用したように指定するのでも同じような見た目にできるのですが、上の方法だと異なるカラーのボーダーを使用している時に境目が気になることがあります。
同じカラーを使用している場合はわからないのですが、カラーが異なるボーダーを組み合わせて使用する場合はこちらの方法で実装した方が見た目が綺麗です。

h1 {
  position: relative;
  padding: .25em 0 .5em .75em;
  border-left: 6px solid #3498db;
}
h1::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}

ボーダーで囲む

ボーダーで囲むの見出しイメージ

タイトル全体をボーダーで囲ったものです。

h1 {
  padding: .5em .75em;
  border: 1px solid #ccc;
}

ボーダーで囲む×角丸

ボーダーで囲む×角丸の見出しイメージ

先ほどのものに加えて、角丸になるよう指定したものです。

h1 {
  padding: .5em .75em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

ボーダーで囲む×手書き風

ボーダーで囲む×手書き風の見出しイメージ

同じくボーダーで囲んだものに角丸指定をしたものなのですが、border-radiusの指定を少し変えることでこのような手書き風っぽい見た目にすることができます。

h1 {
  padding: 1em;
  border: 3px solid #ccc;
  border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

ボーダーで囲む×アクセント

ボーダーで囲む×アクセントの見出しイメージ

タイトル全体をボーダーで囲ったものに、少しアクセントを入れたものです。
ここではcalcを使って実装していますが、使えないブラウザでも同じように表示したい場合は、h1要素の中身をspanで括るなどして少しCSSを変更すれば実装できます。

h1 {
  position: relative;
  padding: .75em 1em .75em 1.5em;
  border: 1px solid #ccc;
}
h1::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #3498db;
  border-radius: 4px;
}

背景色

背景色付きの見出しイメージ

シンプルにタイトル全体に背景色を指定したものです。

h1 {
  padding: .5em .75em;
  background-color: #f6f6f6;
}

背景色×角丸

背景色×角丸の見出しイメージ

先ほどのものに加えて、角丸になるよう指定したものです。

h1 {
  padding: .5em .75em;
  background-color: #f6f6f6;
  border-radius: 6px;
}

背景色×下ボーダー

背景色×下ボーダーの見出しイメージ

こちらは背景色を指定したものに、下ボーダーを引いたものです。

h1 {
  padding: .5em .75em;
  background-color: #f6f6f6;
  border-bottom: 1px solid #ccc;
}

背景色×上下にボーダー

背景色×上下にボーダーの見出しイメージ

こちらは背景色を指定したものに、上下でボーダーを引いたものです。

h1 {
  padding: .5em .75em;
  background-color: #f6f6f6;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

背景色×左ボーダー

背景色×左ボーダーの見出しイメージ

背景色を指定したものに、左ボーダーを引いたものです。

h1 {
  padding: .5em .75em;
  background-color: #f6f6f6;
  border-left: 6px solid #ccc;
}

背景色×2本線で囲む

背景色×2本線で囲むの見出しイメージ

背景色を指定したものをボーダーで囲ったもので、ボーダーのスタイルには2本線を指定しています。

h1{
  padding: .5em .75em;
  background-color: #f6f6f6;
  border: 3px double #ccc;
}

補足やサブタイトル的なものを表示

補足やサブタイトル的なものを表示の見出しイメージ

例えば大きい見出しに薄い文字で英訳を表示させたり、ちょっと補足的な感じでタイトルと一緒に文章を表示させたいといった時に使えるタイプのものです。
HTMLは下記のようにh1要素内にspan要素を作り、その中に補足やサブタイトルとなるものを記述します。

<h1>
  <span>ここに補足やサブタイトルなど</span>
  ここにはタイトルや見出しとして表示したいテキストをいれる
</h1>

あとはCSSを下記のように記述することでキャプチャのようなタイトルを実装できます。

h1 {
  padding-bottom: .5em;
  border-bottom: 1px solid #ccc;
}
h1 span {
  display: block;
  margin-bottom: .2em;
  color: #aaa;
  font-size: .9em;
}

今回は見出し上にしていますが、見出し下に表示させたい時はspan要素の記述位置を変更して、CSSのmargin-bottomをmargin-topにするなどすれば簡単に変更できます。

テキストとボーダーを重ねる #1

テキストとボーダーを重ねる #1の見出しイメージ

タイトルの両端にボーダーが引かれているようなデザインです。
一応複数行でも大きく崩れないようにはしていますが、1行で収まるような見出しの時に使った方が見た目が良いと思います。
実装にはHTMLとCSSを下記のように記述し、HTMLはspan要素を追記し、CSSではh1 spanに周りと同じカラーの背景色を指定する必要があります。

<h1><span>あのイーハトーヴォのすきとおった風</span></h1>

h1 {
  position: relative;
  text-align: center;
}
h1 span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: #fff;
  text-align: left;
}
h1::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

テキストとボーダーを重ねる #2

テキストとボーダーを重ねる #2の見出しイメージ

パッと見は先ほどのものと同じですが、こちらはテキスト部分にカラー指定をする必要がないので、背景を気にすることなく使用できるタイプのものです。
実装にはHTMLとCSSを下記のように記述し、こちらもHTMLにspan要素を追記する必要があります。

<h1><span>あのイーハトーヴォのすきとおった風</span></h1>

h1 {
  overflow: hidden;
  text-align: center;
}
h1 span {
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  text-align: left;
}
h1 span::before,
h1 span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 400%;
  height: 1px;
  background-color: #ccc;
}
h1 span::before {
  right: 100%;
}
h1 span::after {
  left: 100%;
}

テキストとボーダーを重ねる #3

テキストとボーダーを重ねる #3の見出しイメージ

こちらはボーダーを外側に向かって段々と消えていくようなものにしたもので、上2つと同様でHTMLにspan要素を追記する必要があります。

<h1><span>あのイーハトーヴォのすきとおった風</span></h1>

h1 {
  position: relative;
  text-align: center;
}
h1 span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 4em;
  padding: 0 1em;
  background-color: #fff;
  text-align: left;
}
h1::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  background: -webkit-linear-gradient(-45deg, transparent, #ccc 10%, #ccc 90%, transparent);
  background: linear-gradient(-45deg, transparent, #ccc 10%, #ccc 90%, transparent);
}

「テキストとボーダーを重ねる」の実装方法について...

ここでは3通りの方法を紹介しましたが同じような見栄えにする方法は他にもあり、例えばlinear-gradientを使ったり、Flexboxを使ったりといった方法もあります。
記述のシンプルさや汎用性の高さ、ブラウザサポートなど種類によって様々なメリット・デメリットがあるのでどれが一番良いというのは決めかねますが、先述したようにいろいろ実装方法があるので場面によって使い分けてみてください。

下ボーダー（2カラー） #1

下ボーダー（2カラー） #1の見出しイメージ

たまに見かけることもあると思う、カラーの異なるボーダーを下に引いているデザインです。

h1 {
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
}
h1::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #3498db;
}

下ボーダー（2カラー） #2

下ボーダー（2カラー） #2の見出しイメージ

このサンプルだとちょっとわかりづらいかもしれませんが、タイトル下に引いたボーダーに少し立体感を出るようにしたものです。
サンプルコードをそのまま使う場合は、背景が少し暗めな時に利用してください。

h1 {
  position: relative;
  padding-bottom: .5em;
}
h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
}

左ボーダー（2カラー）

左ボーダー（2カラー）の見出しイメージ

こちらは左ボーダーをカラーの異なるもので組み合わせたものです。

h1 {
  position: relative;
  padding: .25em 0 .5em .75em;
  border-left: 6px solid #ccc;
}
h1::before {
  position: absolute;
  left: -6px;
  bottom: 0;
  content: '';
  width: 6px;
  height: 50%;
  background-color: #3498db;
}
h1::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
}

吹き出し #1

吹き出し #1の見出しイメージ

吹き出しの見た目をCSSのみで再現したものです。
下記では記述していませんが、box-shadowを薄っすらかけたりしてもいいですね。

h1 {
  position: relative;
  padding: .5em .75em;
  background-color: #f0f0f0;
  border-radius: 6px;
}
h1::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #f0f0f0;
}

吹き出し #2

吹き出し #2の見出しイメージ

基本的な記述は先ほどと同じですが、box-shadowを追記して内側に少し影がかかるようにしたものです。

h1 {
  position: relative;
  padding: .5em .75em;
  background-color: #f0f0f0;
  border-radius: 6px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .1) inset;
}
h1::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 15px solid #f0f0f0;
}

吹き出し #3

吹き出し #3の見出しイメージ

こちらは上の2つとは違って、枠線だけの吹き出しです。

h1 {
  position: relative;
  padding: .5em .75em;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
}
h1::before,
h1::after {
  position: absolute;
  top: 100%;
  left: 30px;
  content: '';
  height: 0;
  width: 0;
  border: 10px solid transparent;
}
h1::before {
  border-top: 15px solid #ccc;
}
h1::after {
  margin-top: -2px;
  border-top: 15px solid #fff;
}

ボックス

ボックスの見出しイメージ

立体的な箱のようなデザインのタイトルです。

h1 {
  position: relative;
  padding: .5em .75em;
  background-color: #e8e8e8;
}
h1::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: -webkit-calc(100% - 20px);
  width: calc(100% - 20px);
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #f0f0f0;
}

リボン #1

リボン #1の見出しイメージ

リボンの見た目をCSSのみで再現したものです。
サンプルではそのような見栄えにしていませんが、幅を調節するなどして枠からはみ出るような見た目にするとより良い感じに見えます。

h1 {
  position: relative;
  padding: .75em 1em;
  background-color: #f0f0f0;
}
h1::before,
h1::after {
  content: '';
  position: absolute;
  top: 100%;
  border-style: solid;
  border-color: transparent;
}
h1::before {
  left: 0;
  border-width: 0 15px 15px 0;
  border-right-color: #ccc;
}
h1::after {
  right: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-top-color: #ccc;
}

リボン #2

リボン #2の見出しイメージ

先ほどのものと基本的には同じで、右側にある折り返し位置を少し変更したものです。

h1 {
  position: relative;
  padding: .75em 1em;
  background-color: #f0f0f0;
}
h1::before,
h1::after {
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent;
}
h1::before {
  top: 100%;
  left: 0;
  border-width: 0 15px 15px 0;
  border-right-color: #ccc;
}
h1::after {
  top: -15px;
  right: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-bottom-color: #ccc;
}

リボン #3

リボン #3の見出しイメージ

こちらも基本的な部分は変わらないのですが、HTMLにspan要素を追記し、CSSを少し変更することでステッチがあるようなリボンになります。
ここで紹介しているのはつまらない見た目ですが、border-radiusで丸みをつけたり、背景色はほんのりグラデーションつけたものとかにすると可愛い感じのデザインにもなります。

<h1><span>あのイーハトーヴォのすきとおった風</span></h1>

h1 {
  position: relative;
  padding: .3em;
  background-color: #f0f0f0;
}
h1 span {
  display: block;
  padding: .75em 1em;
  border: 1px dashed #ccc;
}
h1::before,
h1::after {
  content: '';
  position: absolute;
  border-style: solid;
  border-color: transparent;
}
h1::before {
  top: 100%;
  left: 0;
  border-width: 0 15px 15px 0;
  border-right-color: #ccc;
}
h1::after {
  top: -15px;
  right: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-bottom-color: #ccc;
}

リボン #4

リボン #4の見出しイメージ

折り返し部分を左だけにしたタイプのリボンです。
ただ、この実装方法は複数行向きではないので、1行しか入らないようなタイトルで使用してください。

h1 {
  position: relative;
  height: 50px;
  line-height: 50px;
  padding: 0 1em;
  background-color: #f0f0f0;
}
h1::before,
h1::after {
  content: '';
  position: absolute;
}
h1::before {
  top: 100%;
  left: 0;
  border-width: 0 15px 15px 0;
  border-style: solid;
  border-color: transparent;
  border-right-color: #ccc;
}
h1::after {
  top: 0;
  right: 0;
  z-index: 2;
  border-width: 25px 20px;
  border-style: solid;
  border-color: transparent;
  border-right-color: #fff;
}

リボンのその他実装方法

上で紹介したもの以外にも下記のようなデザインのリボンもCSSで実装することができます。

ドッグイヤー #1

ドッグイヤー #1の見出しイメージ

紙の端を少し折り返したドッグイヤーのような見栄えをCSSのみで再現したものです。

h1 {
  position: relative;
  padding: 1em;
  background-color: #f6f6f6;
}
h1::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #fff #fff #ddd #ddd;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

ドッグイヤー #2

ドッグイヤー #2の見出しイメージ

こちらもドッグイヤーなのですが、丸みをつけたりグラデーションを用いたりとより立体的な見た目にしたものです。

h1 {
  position: relative;
  padding: 1em 4em 1em 1em;
  -webkit-background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
  background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
  border-radius: 6px;
}
h1::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 1.65507em;
  height: 3.5493em;
  background: -webkit-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
  background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
  border-bottom-left-radius: 6px;
  box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
  -webkit-transform: translateY(-1.89424em) rotate(-40deg);
  transform: translateY(-1.89424em) rotate(-40deg);
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
}

この実装方法は以下で公開されているもので、他にも2種類の実装方法があります。

A Pen by Lea Verou

ページカール

ページカールの見出しイメージ

見出しが浮き上がっているように見えるページカールをCSSのみで再現したものです。
サンプルでは両端に影を付けていますが、どちらかの擬似要素を削除すれば片方だけ浮いているように見せることもできます。

h1 {
  position: relative;
  padding: .5em .75em;
  background-color: #f6f6f6;
}
h1::before,
h1::after {
  position: absolute;
  bottom: 8px;
  z-index: -1;
  content: '';
  width: 30%;
  height: 50%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
}
h1::before {
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  left: .3em;
}
h1::after {
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  right: .3em;
}

ボックスシャドウ #1

ボックスシャドウ #1の見出しイメージ

box-shadowを使うことで影をつけ、立体的な感じにしたものです。

h1 {
  padding: .5em .75em;
  background-color: #f6f6f6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

ボックスシャドウ #2

ボックスシャドウ #2の見出しイメージ

立体的に見せるために内側に1pxの線を入れたりすることがありますが、それをbox-shadowのinsetを使って再現したものです。

h1 {
  padding: .5em .75em;
  background-color: #f6f6f6;
  border: 1px solid #eee;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
}

ボックスシャドウ #3

ボックスシャドウ #3の見出しイメージ

同じくbox-shadowを使って内側に線をいれたもので、上と左に白を、右と下に少し暗めの線を入れた感じにしています。

h1 {
  padding: .5em .75em;
  background-color: #f6f6f6;
  border: 1px solid #eee;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset, -1px -1px 0 rgba(100, 100, 100, .1) inset;
}

紙を切り取ったようなデザイン

紙を切り取ったようなデザインの見出しイメージ

紙を途中で切り取ったようなデザインをCSSのみで再現したもので、別のコンテンツが始まるのがわかりやすくなりますね。

h1 {
  padding: .5em .75em;
  background: #f4f4f4;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}

紙を切り取ったようなデザインにアイコンを付けた見出しイメージ

ちなみに上のキャプチャのようにアイコンを付けたりしても面白いかと思います。
この見栄えであれば画像を使用しなくても、擬似要素を使って下記のように記述すれば実装できます。

h1 {
  position: relative;
  padding: .5em .75em;
  background: #f4f4f4;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}
h1::after {
  position: absolute;
  bottom: -9px;
  right: 10%;
  content: '\002702';
  color: #aaa;
  font-size: 18px;
  line-height: 1;
}

カウント表示させる

カウント表示させるの見出しイメージ

counter-incrementを使って見出し横にカウントが表示されるようにする方法です。
counter-resetcounter-incrementを指定する要素などは環境にあわせて変更してください。

body {
  counter-reset: titleNum;
}
section {
  counter-increment: titleNum;
}
h1 {
  position: relative;
  padding: 0 0 .5em 2em;
  border-bottom: 1px solid #ccc;
}
h1::before {
  position: absolute;
  top: 0;
  left: 0;
  content: counter(titleNum);
  width: 28px;
  height: 28px;
  line-height: 28px;
  background-color: #ccc;
  border-radius: 100%;
  color: #fff;
  font-size: .9em;
  text-align: center;
}

マーカーのような下線

マーカーのような下線の見出しイメージ

マーカーで引いたようなテキストと被っている下線を再現したものです。
ここでは複数行のことや古いブラウザにも少しいじれば対応できたりすることなども考えて擬似要素を使用していますが、linear-gradient使うことで擬似要素なしで実装することもできます。

h1 {
  position: relative;
  padding: 0 .4em .1em;
}
h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 100%;
  height: 10px;
  background-color: #b6f0fc;
}

グラデーション

グラデーションの見出しイメージ

背景をグラデーションにしたタイプのデザインです。

h1 {
  padding: .5em .75em;
  background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
  background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

手っ取り早くグラデーション指定したい場合はジェネレータを使ったり、同じ見た目なのであれば以下のようなサイトも便利だと思います。

ストライプ

ストライプの見出しイメージ

こちらはrepeating-linear-gradientを用いて、CSSのみでストライプ背景を実装してみたものです。

h1 {
  padding: .5em .75em;
  background: -webkit-repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);
  background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

2種類のラインを重ねる #1

2種類のラインを重ねる #1の見出しイメージ

こちらは2種類のラインを組み合わせたもので、まず::after擬似要素でストライプのラインを作成し、その上に::before擬似要素で作ったラインを重ねています。

h1 {
  position: relative;
  padding-bottom: .5em;
}
h1::before,
h1::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  height: 4px;
}
h1::before {
  z-index: 2;
  width: 15%;
  background-color: #444;
}
h1::after {
  width: 100%;
  background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
  background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}

2種類のラインを重ねる #2

2種類のラインを重ねる #2の見出しイメージ

こちらも2種類のラインを組み合わせたもので、まずh1にborder-top: 1px solid #ccc;で1pxのラインを引き、その上に::after擬似要素で作成した少し太いラインを重ねたものになります。

h1 {
  position: relative;
  padding-top: .75em;
  border-top: 1px solid #ccc;
}
h1::after {
  position: absolute;
  top: -2px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 3px;
  background-color: #333;
}

グラデーション×ボーダー

グラデーション×ボーダーの見出しイメージ

グラデーションとボーダーを組み合わせることで、コーポレートサイトなどで見かけるような感じのタイトルデザインにしたものです。

h1 {
  padding: .75em 1em;
  border: 1px solid #ccc;
  border-top: 3px solid #3498db;
  background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}

グラデーション×ボーダー×マーク

グラデーション×ボーダー×マークの見出しイメージ

基本的な部分は先ほどのものと同様で、そこに擬似要素を使ってマークを付けてみたものです。
サンプルで使用しているのをbackground-colorを使って塗りつぶしの丸にしたり、border-radiusを取っ払って正方形のアイコンみたいなものにしたり、擬似要素の部分をいじればいろいろな見栄えにできると思います。

h1 {
  position: relative;
  padding: .75em 1em .75em 2em;
  border: 1px solid #ccc;
  border-top: 3px solid #3498db;
  background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}
h1::after {
  position: absolute;
  top: 1em;
  left: .6em;
  z-index: 2;
  content: '';
  width: 10px;
  height: 10px;
  border: 3px solid #3498db;
  border-radius: 100%
}

マーク #1

マーク #1の見出しイメージ

タイトル下にボーダーを引いたものに擬似要素を使ってマークを加えたものです。
このサンプルではダイヤ型のアイコンっぽいものを擬似要素で作成しています。

h1 {
  position: relative;
  padding: 0 .5em .5em 1.7em;
  border-bottom: 1px solid #ccc;
}
h1::after {
  position: absolute;
  top: .4em;
  left: .4em;
  z-index: 2;
  content: '';
  width: 12px;
  height: 12px;
  background-color: #ccc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

マーク #2

マーク #2の見出しイメージ

こちらも同じくタイトル下にボーダーを引いたものに擬似要素を使ってマークを加えたものです。
::before, ::afterと2つの擬似要素を組み合わせれば、このような見た目のマークもCSSのみで再現することができます。

h1 {
  position: relative;
  padding: 0 .5em .5em 2em;
  border-bottom: 1px solid #ccc;
}
h1::before,
h1::after {
  position: absolute;
  content: '';
  border-radius: 100%
}
h1::before {
  top: .2em;
  left: .2em;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: rgba(150, 150, 150, .5);
}
h1::after {
  top: .7em;
  left: .7em;
  width: 13px;
  height: 13px;
  background: rgba(210, 210, 210, .5);
}

おまけ

あるアイテムをモチーフにスタイリングした見出しイメージ

最後はおまけで、あるお方があるアイテムをモチーフにスタイリングしたタイトルです。
種類もしっかり3パターン用意されており、HTMLとCSSをそれぞれ下記のように記述します。

<h1 class="t_standard">Standard</h1>

<h1 class="t_soft">Soft</h1>

<h1 class="t_hard">Hard</h1>

.t_standard {
  padding: .6em 1em;
  background: #666;
  background: -webkit-linear-gradient(top, #f00 0%, #c00 100%);
  background: linear-gradient(to bottom, #f00 0%, #c00 100%);
  border-top: 1px solid #ccc;
  border-right: 10px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 30px double #ccc;
  border-radius: 7px;
  color: #ddd;
  font-weight: 600;
  font-size: 1.25em;
}

.t_soft {
  padding: .6em 1em;
  background: #fff;
  background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
  background: linear-gradient(to bottom, #eee 0%, #ccc 100%);
  border-top: 1px solid #888;
  border-right: 10px solid #aaa;
  border-bottom: 1px solid #888;
  border-left: 30px double #aaa;
  border-radius: 7px;
  color: #f00;
  font-weight: 600;
  font-size: 1.25em;
}

.t_hard {
  padding: .6em 1em;
  background: #666;
  background: -webkit-linear-gradient(top, #666 0%, #252525 100%);
  background: linear-gradient(to bottom, #666 0%, #252525 100%);
  border-top: 1px solid #888;
  border-right: 10px solid #f00;
  border-bottom: 1px solid #888;
  border-left: 30px double #f00;
  border-radius: 7px;
  color: #ddd;
  font-weight: 600;
  font-size: 1.25em;
}

[CSS]GoodDesign賞にノミネートされて落選すること間違い無しのすごくアレっぽい見出しスタイルを作成した | OZPAの表4