久々のCSSテクニック記事です。
タイトル通り、今回はブログでよく使われている「ステッチ風の見出しデザイン」を作る方法を紹介します。
See the Pen ステッチ1 by Kuzlog (@Kuzlog) on CodePen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
h3 { color: #fff; position: relative; width: 480px; margin: 1.5em auto; padding: 20px 16px 18px; background: #0D47A1; border-radius: 4px; } h3:before { content: ""; position: absolute; left: 1%; top: 5px; width: 98%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 50%, transparent 50%, transparent 100%); background-size: 12px 4px; } h3:after { content: ""; position: absolute; left: 1%; bottom: 5px; width: 98%; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 50%, transparent 50%, transparent 100%); background-size: 12px 4px; } |
1つ目は疑似要素を用いて縫い目部分を再現する方法で、次に紹介するborderを使った方法と比べて以下のような特徴があります。
記述は多いですが、見出しに使うならこっちのほうが綺麗に仕上がるかな？
See the Pen ステッチ2 by Kuzlog (@Kuzlog) on CodePen.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
h3 { width: 480px; color: #fff; margin: 1.5em auto; padding: 14px 16px 12px; margin-bottom: 1.0em; background: #0D47A1; color: #fff; border: 2px dashed #fff; border-radius: 6px; box-shadow: 0 0 0 4px #0D47A1; } |
こっちのほうが簡単に作れますが、さっきと違って縫い目（border）の太さに比例して長さ・間隔も大きくなっていくので、微調整は出来ません。
その変わり、borderを使っているのでborder-radiusを使った丸みに沿った縫い目を付けることが出来ます。
というわけで、仕上がりの綺麗さを重視するなら疑似要素を使った方法、丸っぽくて柔らかな雰囲気を出したいならborderを使った方法というように使い分けていくのがオススメです！
