CSSで作る見出しデザイン

SONY DSC By: jonas.lowgren
見出しはサイトの見た目を決める上で重要な箇所です。
印象的な見出しは、それだけでサイトを引き立ててくれます。
今回は、そんな見出しのデザインをCSSで10パターン作成してみましたので、参考にして下さい。
見出しデザイン
当ブログの見出し
CSS
.heading1{ position:relative; padding-left:20px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading1:before{ content:''; height:12px; width:12px; display:block; background:#00A8FF; box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; position:absolute; top:-0px; left:5px; transform:rotate(-50deg); -webkit-transform:rotate(-50deg); -moz-transform:rotate(-50deg); -o-transform:rotate(-50deg); -ms-transform:rotate(-50deg); } .heading1:after{ content:''; height:8px; width:6px; display:block; background:#00A8FF; box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; position:absolute; top:16px; left:2px; transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-75deg); }
チェックマークの見出し
CSS
.heading2{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading2:after, .heading2:before{ content:''; height:18px; width:4px; display:block; background:#00A8FF; position:absolute; top:8px; left:15px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); } .heading2:before{ height:10px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); top:16px; left:7px }
矢印マークの見出し
CSS
.heading3{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading3:before{ content:''; height:0; width:0; display:block; border:5px transparent solid; border-right-width:0; border-left-color:#00A8FF; position:absolute; top:11px; left:8px; } .heading3:after{ content:''; height:2px; width:10px; display:block; background:#00A8FF; position:absolute; top:15px; left:0px; }
十字マークの見出し
CSS
.heading4{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading4:before{ content:''; height:15px; width:3px; display:block; background:#00A8FF; box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; position:absolute; top:-3px; left:8px; } .heading4:after{ content:''; height:3px; width:13px; display:block; background:#00A8FF; box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset; position:absolute; top:1px; left:5px; }
円マークの見出し
CSS
.heading5{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading5:before{ content:''; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; height:12px; width:12px; display:block; position:absolute; top:13px; left:5px; background-color:#00A8FF; box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset }
円を重ね合わせた見出し
CSS
.heading6{ position:relative; padding-left:30px; border-bottom:2px solid #ccc; font-weight: bold; font-size: 22px; line-height: 38px; } .heading6:before{ content:''; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; height:12px; width:12px; display:block; position:absolute; top:14px; left:7px; background-color:#6B0CE8; box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset; filter:alpha(opacity=50); -moz-opacity:0.50; -khtml-opacity: 0.50; opacity:0.50; z-index: 1; } .heading6:after{ content:''; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; height:15px; width:15px; display:block; position:absolute; top:7px; left:2px; background-color:#00A8FF; box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset }
フキダシの見出し
CSS
.heading7{ position:relative; padding:9px; font-weight: bold; font-size: 18px; background-color: #51A2C1; color: #fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } .heading7:before{ content:''; height:0; width:0; display:block; border:13px transparent solid; border-right-width:0; border-left-color:#51A2C1; position:absolute; top:25px; left:15px; transform:rotate(-270deg); -webkit-transform:rotate(-270deg); -moz-transform:rotate(-270deg); -o-transform:rotate(-270deg); -ms-transform:rotate(-270deg); }
ボーダーを利用した見出し1
CSS
.heading8{ position:relative; padding:9px; padding-left:15px; font-weight: bold; font-size: 18px; background-color: #51A2C1; color: #fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } .heading8:before{ content:''; height:25px; width:2px; display:block; position:absolute; top:5px; left:4px; background-color:#fff; border-left: 4px solid #fff; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }
ボーダーを利用した見出し2
CSS
.heading9{ position:relative; padding:9px; padding-left:15px; font-weight: bold; font-size: 18px; background-color: #ccc; border: 1px dashed #51A2C1; border-left: 5px solid #51A2C1; }
下線を付けた見出し
CSS
.heading10{ position:relative; padding:9px; padding-left:0px; font-weight: bold; font-size: 18px; } .heading10:before{ content:''; height:15px; width: 100%; display:block; position:absolute; top:18px; left:0px; background-color:#ccc; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity: 0.20; opacity:0.20; box-shadow: 0px 3px 3px 3px rgba(255,255,255, 0.3) inset; }
Related Posts

Trackback URL
http://webnonotes.com/css/heading_sample/trackback/Comments
[…] 出典 : Web’S Notes http://webnonotes.com/css/heading_sample/ […]