ブログのデザインをいじっていると、地味に悩むのが見出しの装飾。派手すぎるのはダサいですが、何も装飾しないのも味気ないですよね。
今回は、画像を使わずにCSSのみですぐに実装できる見出しの装飾パターンを16個紹介します。作るの大変だった。
一応コピペでもすぐに使えるとは思いますが、色やサイズ、余白などは自分のブログに合わせて変更してほうがいいです。あとベンダープレフィックスは付けていないので、古いブラウザにも対応させたいなら各自で対応してください。
あと、それぞれ表示サンプルも作ったんですが、h要素を使いまくるとアレなのでp要素を使っています。色は#333でフォントサイズは22px、ウェイトはノーマルです。ここらへんもお好みで変えちゃってください。
|
1 2 3 |
color: #333; font-size: 22px; font-weight: normal; |
Dummy text
|
1 2 3 4 |
.ex1{ border-bottom: 1px solid #888; padding-bottom: 2px; } |
Dummy text
|
1 2 3 4 |
.ex2{ border-left: 4px solid #888; padding: 12px; } |
Dummy text
|
1 2 3 4 5 |
.ex3{ border-left: 4px solid #888; border-bottom: 1px solid #888; padding: 12px; } |
Dummy text
|
1 2 3 4 |
.ex4{ background: #ddd; padding: 12px; } |
Dummy text
|
1 2 3 4 5 |
.ex5{ background: #ddd; padding: 12px; border-left: 4px solid #888; } |
Dummy text
|
1 2 3 4 5 |
.ex6{ background: #ddd; padding: 12px 20px; border-radius: 8px; } |
Dummy text
|
1 2 3 4 5 |
.ex7{ background: #ddd; padding: 12px 20px; box-shadow : 0 2px 4px rgba(0,0,0,0.3); } |
Dummy text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.ex8{ position: relative; background: #ddd; padding: 12px 20px; } .ex8:before{ content: ""; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-top: 12px solid #aaa; border-right: 12px solid #fff; border-bottom: 12px solid #fff; border-left: 12px solid #aaa; } |
Dummy text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.ex9{ position: relative; background: #ddd; padding: 12px 20px; } .ex9:before,.ex9:after{ content: ""; position: absolute; bottom: -16px;; width: 0; height: 0; border-top: 8px solid #aaa; border-bottom: 8px solid #fff; } .ex9:before{ left: 0; border-right: 8px solid #aaa; border-left: 8px solid transparent; } .ex9:after{ right: 0; border-left: 8px solid #aaa; border-right: 8px solid transparent; } |
Dummy text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.ex10{ position: relative; background: #ddd; padding: 12px 20px; } .ex10:before{ content: ""; position: absolute; bottom: -24px; left: 2em; width: 0; height: 0; border: 12px solid transparent; border-top: 12px solid #ddd; } |
Dummy text
|
1 2 3 4 |
.ex11{ background: repeating-linear-gradient(-45deg, #ddd, #ddd 5px, #fff 5px, #fff 10px); padding: 12px 20px; } |
Dummy text
|
1 2 3 4 5 6 |
.ex12{ color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); background: linear-gradient(180deg,#aaa,#777); padding: 12px 20px; } |
Dummy text
|
1 2 3 4 5 6 |
.ex13{ border-bottom: 1px solid #888; } .ex13:first-letter { font-size: 1.8em; } |
Dummy text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.ex14 { display: flex; align-items: center; } .ex14:before, .ex14:after { content: ""; flex-grow: 1; height: 1px; display: block; } .ex14:before { background: linear-gradient(-90deg, #888, transparent); margin-right: .4em; } .ex14:after { background: linear-gradient(90deg, #888, transparent); margin-left: .4em; } |
Dummy text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.ex15{ position: relative; padding: 12px 0 2px 24px; border-bottom: 1px solid #888; } .ex15:before, .ex15:after { content: ""; position: absolute; background: #888; } .ex15:before { top: 0; left: 12px; width: 12px; height: 12px; transform: rotate(50deg); } .ex15:after { top: 18px; left: 4px; width: 8px; height: 8px; transform: rotate(20deg); } |
Dummy text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.ex16{ position: relative; padding: 12px 0 2px 24px; border-bottom: 1px solid #888; } .ex16:before, .ex16:after { content: ""; position: absolute; background: #888; border-radius: 100%; } .ex16:before { top: 0; left: 12px; width: 12px; height: 12px; } .ex16:after { top: 18px; left: 4px; width: 8px; height: 8px; } |
本当はもう少し紹介するつもりだったんですが、この記事書くのめっっっちゃ時間掛かったのでギブアップ…気が向いたらもっと追加するかもしれませんが、とりあえず紹介は以上です。
てかこれ以上凝ったものを作るとなると、画像使ったほうが早いし楽なんだよね。
