CSS3でパッチワーク・ステッチ風の画像を作る

CSS
もっと簡単にCSS3だけでステッチ画像を作り背景装飾する

ちょっとした見出し程度でしたらPhotoshopを使わずともCSSで指定する方が簡単で早いです。
こんな感じになります。
20130624035339

手順

  1. 背景色を指定する
  2. 線を表示するためにborderを使わずにoutlineを使う
  3. outlineをステッチ風に見せるため線種を「dashed」にする
  4. outline-offsetで余白幅の指定をする

HTML、CSSの例

<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出し</title>
<style>
.midashi10{
  color:#fff;
  width:200px;
  line-height:30px;
  text-align:center;
  padding:5px;
  background-color:#cc3333;
  outline:1px dashed #fff;
  outline-offset:-3px;
}
</style>
</head>
<body>
<div class="midashi10">見出し</div>
</body>
</html>

20130624064151

※こちらのサイトの記事を参考にして作成しました。
http://liginc.co.jp/designer/archives/6091