CSSでステッチ風デザインにする

CSSを使ってステッチ(縫い目)のようなデザインにする方法を紹介します。デザインといってもborderプロパティを利用してステッチ風に見せるだけの簡単な表現となっていますので、難しいことはありません。

ステッチの作り方

ステッチ風に見せる際にポイントとなるのは、ボーダーで縫い目を表現し、box-shadowプロパティを使って外枠を作ることです。

.stitch {
  border: 2px dashed #f7d4ec;
  box-shadow: 0 0 0 8px #f298d8;
  padding: 15px;
  background: #f298d8;
  border-radius: 10px;
  color: #fff;
}

縫い目はborderプロパティで「dashed」を指定すれば表現できます。太さはお好みで調整してください。そして、box-shadowプロパティで4番目の値を指定することで外側の四方向に影をつけることができます。これを利用して背景色と同じ色の影を作ることで余白っぽくすることができます。あとはボックスに丸みをつけたりするとかわいい感じのステッチにしたりできます。

ステッチ風デザイン

以上が、CSSを使ってステッチ風にデザインする方法となります。

その他の記事
デバイスピクセルを考慮したサイト制作
【jQuery】表示・非表示の切り替えをするメソッド
【CSS】背景のみ透過させて表示する方法
フォーム関連要素について
【CSS】マウスオーバー時のエフェクト

TOP