ボーダーで囲む × アクセント
#ex1 h3 {
position: relative;
padding: .75em 1em .75em 1.5em;
border: 1px solid #ccc;
}
#ex1 h3::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;
}
テキストとボーダーを重ねる
#ex2 h3 {
overflow: hidden;
text-align: center;
}
#ex2 h3 span {
position: relative;
display: inline-block;
margin: 0 2.5em;
padding: 0 1em;
text-align: left;
}
#ex2 h3 span::before,
#ex2 h3 span::after {
position: absolute;
top: 50%;
content: '';
width: 400%;
height: 1px;
background-color: #ccc;
}
#ex2 h3 span::before {
right: 100%;
}
#ex2 h3 span::after {
left: 100%;
}
テキストとボーダーを重ねる
#ex3 h3 {
position: relative;
text-align: center;
}
#ex3 h3 span {
position: relative;
z-index: 2;
display: inline-block;
margin: 0 4em;
padding: 0 1em;
background-color: #fff;
text-align: left;
}
#ex3 h3::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);
}
下ボーダー（2カラー）
#ex4 h3 {
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
}
#ex4 h3::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 4px;
background-color: #3498db;
}
下ボーダー（立体感）
#ex5 h3 {
position: relative;
padding-bottom: .5em;
}
#ex5 h3::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #fff;
}
吹き出し ex6
#ex6 h3 {
position: relative;
padding: .5em .75em;
background-color: #f0f0f0;
border-radius: 6px;
}
#ex6 h3::after {
position: absolute;
top: 100%;
margin: 0px auto;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #f0f0f0;
}
吹き出し
#ex66 h3 {
position: relative;
padding: .5em .75em;
background-color: #f0f0f0;
border-radius: 6px;
}
#ex66 h3::after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top: 15px solid #f0f0f0;
top: 100%;
left: 50%;
margin-left: -10px;
}
吹き出し（枠線）
#ex7 h3 {
position: relative;
padding: .5em .75em;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 6px;
}
#ex7 h3::before,
#ex7 h3::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
height: 0;
width: 0;
border: 10px solid transparent;
}
#ex7 h3::before {
border-top: 15px solid #ccc;
}
#ex7 h3::after {
margin-top: -2px;
border-top: 15px solid #fff;
}
リボン
#ex8 h3 {
position: relative;
padding: .75em 1em;
background-color: #f0f0f0;
}
#ex8 h3::before,
#ex8 h3::after {
content: '';
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
}
#ex8 h3::before {
left: 0;
border-width: 0 15px 15px 0;
border-right-color: #ccc;
}
#ex8 h3::after {
right: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-top-color: #ccc;
}
ステッチがあるようなリボン
#ex9 h3 {
position: relative;
padding: .3em;
background-color: #f0f0f0;
}
#ex9 h3 span {
display: block;
padding: .75em 1em;
border: 1px dashed #ccc;
}
#ex9 h3::before,
#ex9 h3::after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
}
#ex9 h3::before {
top: 100%;
left: 0;
border-width: 0 15px 15px 0;
border-right-color: #ccc;
}
#ex9 h3::after {
top: -15px;
right: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-bottom-color: #ccc;
}
ページカール
#ex10 h3 {
position: relative;
padding: .5em .75em;
background-color: #f6f6f6;
}
#ex10 h3::before,
#ex10 h3::after {
position: absolute;
bottom: 8px;
z-index: -1;
content: '';
width: 30%;
height: 50%;
box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
}
#ex10 h3::before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
left: .3em;
}
#ex10 h3::after {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
right: .3em;
}
2種類のラインを重ねる
こちらは2種類のラインを組み合わせたもので、まず::after擬似要素でストライプのラインを作成し、その上に::before擬似要素で作ったラインを重ねています。
#ex11 h3 {
position: relative;
padding-bottom: .5em;
}
#ex11 h3::before,
#ex11 h3::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
height: 4px;
}
#ex11 h3::before {
z-index: 2;
width: 15%;
background-color: #444;
}
#ex11 h3::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);
}
グラデーション × ボーダー
グラデーションとボーダーを組み合わせることで、コーポレートサイトなどで見かけるような感じのタイトルデザインにしたものです。
#ex12 h3 {
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;
}
マーク
タイトル下にボーダーを引いたものに擬似要素を使ってマークを加えたものです。
このサンプルではダイヤ型のアイコンっぽいものを擬似要素で作成しています。
#ex13 h3 {
position: relative;
padding: 0 .5em .5em 1.7em;
border-bottom: 1px solid #ccc;
}
#ex13 h3::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);
}