サイトのリニューアルの仕事があって、仮のデザインを作っているのですが画像で見出しを作るとちょっとした修正も画像ソフトを使うのが面倒になってきました。
なので出来るだけCSSでカッコよく見出しを作ろうと思って前回の記事とは違ったCSS3だけで作る見出しデザインをご紹介します。
photo credit: editing kool keith via photopin (license)
ページコンテンツ
CSS3のみ使った見出し
見出し1
|
1 2 3 |
.midsahi-1 { background-image: linear-gradient(#FF5B78, #ffc0cb); } |
上から下への濃いピンクから薄いピンクに変わっていくグラデーション。
見出し2
|
1 2 3 |
.midsahi-2 { background-image: linear-gradient(#FF5B78 50%, #ffc0cb); } |
上の濃いピンクのグラデーションを消す。
見出し3
|
1 2 3 |
.midsahi-3 { background-image: linear-gradient(#FF5B78 50%, #ffc0cb 50%, #ffc0cb); } |
上下共にグラデーションを消す。
見出し4
|
1 2 3 4 |
.midsahi-4 { color: white; background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); } |
ストライプの見出し。
見出し5
|
1 2 3 4 5 6 7 8 9 |
.midsahi-5 { color: white; background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px); } |
逆ストライプの見出し。
見出し6
横ストライプの見出し。
|
1 2 3 4 5 6 7 8 9 10 11 |
.midsahi-6 { color: white; background: linear-gradient( to bottom, #5d9634, #5d9634 50%, #538c2b 50%, #538c2b ); background-size: 100% 20px; } |
見出し7
縦ストライプの見出し。
|
1 2 3 4 5 6 7 8 9 |
.midsahi-7 { background: repeating-linear-gradient( to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px ); } |
見出し8
円模様のストライプの見出し。
|
1 2 3 4 5 6 7 8 9 10 |
.midsahi-8 { color: white; background: repeating-radial-gradient( circle, purple, purple 10px, #4b026f 10px, #4b026f 20px ); } |
まとめ
参考にしたサイト
URLhttp://css-tricks.com/stripes-css/
[サンプル] CSS3で作るグラデーション・ストライプの見出し（hタグ）デザイン
ぜひ、試してみてください。
