画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。
全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。
また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。
以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。
ただ、一部異なるものといってもいずれもspan
要素を1つ追記する程度です。
<h1>あのイーハトーヴォのすきとおった風</h1>
また、ここでは見栄えの紹介は全て画像を使用していますが実際の表示は以下デモページで確認でき、デモでは複数行の時の見栄えも併せて確認することができます。
下ボーダー
シンプルにタイトル下にボーダーを引いたものです。
これ以降出てくるものも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本線)
border-style
にdouble
を指定したものです。
h1 {
padding-bottom: .5em;
border-bottom: 3px double #ccc;
}
上下にボーダー #1
シンプルにタイトルの上下にボーダーを引いたものです。
h1 {
padding: .75em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
上下にボーダー #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本線を指定しています。
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行で収まるような見出しの時に使った方が見た目が良いと思います。
実装には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
パッと見は先ほどのものと同じですが、こちらはテキスト部分にカラー指定をする必要がないので、背景を気にすることなく使用できるタイプのものです。
実装には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
こちらはボーダーを外側に向かって段々と消えていくようなものにしたもので、上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
たまに見かけることもあると思う、カラーの異なるボーダーを下に引いているデザインです。
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
このサンプルだとちょっとわかりづらいかもしれませんが、タイトル下に引いたボーダーに少し立体感を出るようにしたものです。
サンプルコードをそのまま使う場合は、背景が少し暗めな時に利用してください。
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カラー)
こちらは左ボーダーをカラーの異なるもので組み合わせたものです。
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
吹き出しの見た目を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
基本的な記述は先ほどと同じですが、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
こちらは上の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
リボンの見た目を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
先ほどのものと基本的には同じで、右側にある折り返し位置を少し変更したものです。
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
こちらも基本的な部分は変わらないのですが、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
折り返し部分を左だけにしたタイプのリボンです。
ただ、この実装方法は複数行向きではないので、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
紙の端を少し折り返したドッグイヤーのような見栄えを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
こちらもドッグイヤーなのですが、丸みをつけたりグラデーションを用いたりとより立体的な見た目にしたものです。
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種類の実装方法があります。
ページカール
見出しが浮き上がっているように見えるページカールを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
box-shadow
を使うことで影をつけ、立体的な感じにしたものです。
h1 {
padding: .5em .75em;
background-color: #f6f6f6;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
ボックスシャドウ #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
同じく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種類のラインを組み合わせたもので、まず::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種類のラインを組み合わせたもので、まず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
タイトル下にボーダーを引いたものに擬似要素を使ってマークを加えたものです。
このサンプルではダイヤ型のアイコンっぽいものを擬似要素で作成しています。
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
こちらも同じくタイトル下にボーダーを引いたものに擬似要素を使ってマークを加えたものです。
::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;
}