どうも@De_webdesignです。
ブログや記事を書く際に使用できるCSSで実装できるオシャレな見出しの作り方を紹介していきます。
僕自身はあまり凝った装飾よりかは、フォントや太さの違いだけでデザインをするのが好きなので使用しませんが、皆さんのブログなど使用して読者にわかりやすい記事を書いていただけたらと思います。
目次
- 斜めに傾けたタイトル
- 背景に回り込むようなタイトル
- ポップな吹き出しタイトル
- 付箋みたいなタイトル
- ラインマーカーのような下線
- タイトル最初の文字を大きく
- 左と下にボーダー
- 背景+下ボーダー
- ボーダーの上にテキストを重ねる
- リボン
1.斜めに傾けたタイトル
Sample Title
.naname{
position:relative;
margin:10px -1px;
text-align:center;
color:#333;
padding:10px;
background:#f50;
-webkit-transform: rotate(-3deg) skew(-3deg);
-moz-transform: rotate(-3deg) skew(-3deg);
-o-transform: rotate(-3deg) skew(-3deg);
-ms-transform: rotate(-3deg) skew(-3deg);
transform: rotate(-3deg) skew(-3deg);
text-shadow:1px 1px 0 rgba(255,255,255,1);
box-shadow: 4px 4px 4px #222
}
こちらは比較的シンプルなので、どのデザインにも合いやすいと思います。傾きや色、フォントを変えるだけでだいぶ印象が変わると思うのでぜひ試してみてください。
2.背景に回り込むようなタイトル
Sample Title
.mawarikomi{
position:relative;
margin:40px -10px;
padding:5px;
text-align:center;
color:#ffe8e8;
background:#f50;
box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);
background-image: -webkit-gradient(linear, left top, left bottom,
from( rgba(0, 0, 0, 0.0)),
color-stop(0.08, rgba(255, 255, 255, 0.5)),
color-stop(0.12, rgba(255, 255, 255, 0.5)),
color-stop(0.12, rgba(0, 0, 0, 0.0)),
color-stop(0.88, rgba(0, 0, 0, 0.0)),
color-stop(0.88, rgba(255, 255, 255, 0.5)),
color-stop(0.92, rgba(255, 255, 255, 0.5)),
color-stop(0.92, rgba(0, 0, 0, 0.0)),
to( rgba(0, 0, 0, 0.0))
);
background-image: -moz-linear-gradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
background-image: -o-linear-gradient(top,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
background-image: linear-gradient(to bottom,
transparent 8%,
rgba(255, 255, 255, 0.5) 8%,
rgba(255, 255, 255, 0.5) 12%,
transparent 12%,
transparent 88%,
rgba(255, 255, 255, 0.5) 88%,
rgba(255, 255, 255, 0.5) 92%,
transparent 92%
);
}
.mawarikomi:before{
content:" ";
position:absolute;
top:-5px;
left:0;
width:0;
height:0;
border-width:0 0 5px 10px;
border-style:solid;
border-color:transparent;
border-bottom-color:#c66;
}
これも先ほど同様シンプルで、ちょっとした変化を与えたいときに使用できますね。この記事では使っていませんが、仕事でこの前使用しました。見出しだけでなくタグを写真の上に表示して使う方法でしたが。
3.ポップな吹き出しタイトル
Sample Title
.pop{
position:relative;
padding:5px 20px;
font:bold 28px/1.6 Arial, Helvetica, sans-serif;
color:#333;
background:#fff;
text-shadow:
1px 1px 0 #fff,
2px 2px 0 #999;
border-top:#333 solid 3px;
border-bottom:#333 solid 3px;
background-image: -webkit-gradient(linear, left top, right bottom,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(255, 255, 255, 0.0)),
to( rgba(255, 255, 255, 0.0))
);
background-image: -webkit-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -moz-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -o-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: linear-gradient(to bottom -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-size:4px 4px;
}
.pop:before{
content:" ";
position:absolute;
top:100%;
left:24px;
width:0;
height:0;
border-width:12px;
border-style:solid;
border-color:transparent;
border-top-color:#333;
}
.pop:after{
content:" ";
position:absolute;
top:100%;
left:28px;
width:0;
height:0;
border-width:8px;
border-style:solid;
border-color:transparent;
border-top-color:#f0f0f0;
z-index:1;
}
ポップなデザインにはもってこいのタイトルですね。僕は使用することはありませんが、タイトルを見立たせるという意味ではとてもいい装飾だと思います。beforeとafterで下の吹き出しを作り、背景のストライプはbackgroound-imageで表現してますね。
4.付箋みたいなタイトル
Sample Title
.fusen{
position: relative;
margin: 40px 22px 40px 10px;
padding: 14px 15px 0px 20px;
color: #fff;
font-weight:bold;
background: #f50;
box-shadow: 12px 0 0 0 #f50, 0 12px 0 0 #f50, 1px 15px 4px -3px rgba(0,0,0,0.2);
}
.fusen:before{
content: " ";
position: absolute;
top: 100%;
left: 100%;
width: 0;
height: 0;
border-width: 12px 12px 0 0;
border-style: solid;
border-top-color: #f90;
color: transparent;
}
こちらは、タイトルというよりは他で使う機会の方が多いですね。何かのポイントを説明するときとかに使用してみてはいかがでしょうか？
5.ラインマーカーのような下線
Sample Title
.line-marker{
display: inline-block;
position: relative;
padding: 0 .4em .1em;
background: linear-gradient(transparent 60%, #f50 0%);
}
after要素で下線を表現しています。これはポップなやつにもシンプルなやつにも使えるやつですね。
6.タイトル最初の文字を大きく
sample title
.first-letter-big {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
.first-letter-big:first-letter {
margin-right: .1em;
font-size: 1.6em;
color:#555;
}
シンプルにデザインしたい場合は、これなんか使いやすいんじゃないんですかね。僕も使用してみようかなーと思っているのですがなかなか使う機会に巡り合えてませんが。
7.左と下にボーダー
Sample Title
.border-left-bottom {
margin:20px 0;
position: relative;
padding: .25em 0 .5em .75em;
border-left: 6px solid #f50;
}
.border-left-bottom::after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 1px solid #ccc;
}
afterを使用してのデザインです。これを機にbeforeやafterなどの疑似要素に慣れてしまいましょう。これが使えるようになるとデザインの幅が広がる気がします。
8.背景+下ボーダー
Sample Title
.back-border-bottom {
padding: .5em .75em;
background-color: #eee;
border-bottom: 1px solid #ccc;
}
少ない労力で大きい効果を得るならこれですね。ただ注意点は装飾があまりないので、色使いやフォントにかなりデザインが左右されるので「俺はデザインセンスあるよ！」って方はバンバン使ってください。コツは、背景に指定している色よりも濃い色を下ボーダーに指定してあげることですかね。
9.ボーダーの上にテキストを重ねる
Sample Title
.border-text {
position: relative;
text-align: center;
}
.border-text span {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 2.5em;
padding: 0 1em;
background-color: #fff;
text-align: left;
}
.border-text::before {
position: absolute;
top: 50%;
z-index: 1;
content: '';
display: block;
width: 100%;
height: 1px;
background-color: #ccc;
}
何かを仕切るときに使えるCSSですね。
h1のbeforeで線を表現し、spanで文字を重ねていますがコツはspanの背景色を周囲の色と同じ色に指定してあげることで文字の後ろだけ線がないように見えるようになります。
10.リボン
Sample Title
.ribon {
position: relative;
height: 50px;
line-height: 50px;
padding: 0 1em;
margin:20px 0;
background-color: #f0f0f0;
}
.ribon::before,
.ribon::after {
content: '';
position: absolute;
}
.ribon::after {
top: 0;
right: 0;
z-index: 2;
border-width: 25px 20px;
border-style: solid;
border-color: transparent;
border-right-color: #fff;
}
この表現は僕はおそらくこの先も使うことはないでしょう。笑
やりたい方はどうぞコピーしていってください。
