見出しのテスト(h2)

グラデーションとボーダーを組み合わせることで、コーポレートサイトなどで見かけるような感じのタイトルデザインにしたものです。
このページでは、「h2」を見出しとして使い、サブの見出しを「h3」を使う構成とします。

見出しのテスト(h3)

サブコンテンツをここに書きます。あまりごちゃごちゃしないシンプルな見出しを心がけます。

追加したcss
.entry-content h2 {
position: relative;
padding: .55em 1em .55em 2em;
border: 1px solid #ccc;
border-top: 3px solid #3498db;
background: -webkit-linear-gradient(top, #000 0%, #808080 100%);
background: linear-gradient(to bottom, #000 0%, #808080 100%);
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
font-size: 1.3em;
font-weight: normal;
}
.entry-content h2::after {
position: absolute;
top: .7em;
left: .6em;
z-index: 2;
content: ”;
width: 1em;
height: 1em;
border: 4px solid #3498db;
border-radius: 100%
}
ISO:100
fit check for Honolulu.

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です