さくらのレンタルサーバ15周年!ロゴデザインコンテスト
さくらのレンタルサーバ15周年!ロゴデザインコンテスト
2012.07.03

グランジからかわいい系まで!CSS3でステッチ(縫い目)を表現する方法

姐さん

今回はボタンなどのあしらいに便利な小ネタをご紹介します。

01

上記画像のような、糸で縫いつけたようなあしらいをCSS3だけで実装できちゃうんです。

デモページ

HTML

<body>
<h2>outlineでステッチ</h2>
<p class="s1">LIFE IS GOOD
<h2>outlineでステッチ+box-shadowで更に外枠</h2>
<p class="s2">LIFE IS GOOD
<h2>borderでステッチ+box-shadowで外枠</h2>
<p class="s3">LIFE IS GOOD
<h2>角丸</h2>
<p class="s4">LIFE IS GOOD
<h2>変形</h2>
<p class="s5">LIFE IS GOOD
<p></body>

CSS

body {
    background: #ccc;
}
h2 {
	text-align:center;
}
p {
    font-size: 40px;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
	padding:10px 0;
}
/*outlineでステッチ*/
p.s1 {
	padding:10px 0;
	color: #4b2520;
	text-shadow: #b96d64 1px 1px 1px;/*レタープレスのハイライト*/
    outline: 1px dashed #ccc;/*縫い目*/
    outline-offset: -5px;/*内側5px*/
	/*グラデーション*/
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #8a4138), color-stop(0.00, #b05045));
	background: -webkit-linear-gradient(top, #b05045 0%, #8a4138 100%);
	background: -moz-linear-gradient(top, #b05045 0%, #8a4138 100%);
	background: linear-gradient(top, #b05045 0%, #8a4138 100%);
    margin: 0 auto 40px auto;
	width:400px;
	box-shadow: 1px 1px 6px 0px rgba(10,10,0,.5);
}
/*outlineでステッチ+box-shadowで更に外枠*/
p.s2 {
	color: #4b2520;
	text-shadow: #b96d64 1px 1px 1px;/*レタープレスのハイライト*/
	outline: 1px dashed #ccc;
    outline-offset: -5px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #8a4138), color-stop(0.00, #b05045));
	background: -webkit-linear-gradient(top, #b05045 0%, #8a4138 100%);
	background: -moz-linear-gradient(top, #b05045 0%, #8a4138 100%);
	background: linear-gradient(top, #b05045 0%, #8a4138 100%);
    margin: 0 auto 40px auto;
	width:400px;
	box-shadow: 0 0 0 6px #6f3f39,/*外側の濃い茶色の部分*/ 1px 1px 6px 5px rgba(10,10,0,.5);
}
/*borderでステッチ+box-shadowで外枠*/
p.s3 {
    font-size: 40px;
	padding:10px 0;
	color: #4b2520;
	text-shadow: #b96d64 1px 1px 1px;/*レタープレスのハイライト*/
	border: 1px dashed #ccc;/*縫い目*/
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #8a4138), color-stop(0.00, #b05045));
	background: -webkit-linear-gradient(top, #b05045 0%, #8a4138 100%);
	background: -moz-linear-gradient(top, #b05045 0%, #8a4138 100%);
	background: linear-gradient(top, #b05045 0%, #8a4138 100%);
    margin: 0 auto 40px auto;
	width:400px;
	box-shadow: 0 0 0 6px #6f3f39,/*外側の濃い茶色の部分*/ 1px 1px 6px 5px rgba(10,10,0,.5);
}
/*角丸*/
p.s4 {
    font-size: 40px;
	padding:10px 0;
	color: #0f3a49;
	text-shadow: #72b2ca 1px 1px 1px;
	outline: 1px dashed #ccc;
    outline-offset: -6px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #459aba), color-stop(0.00, #085774));
	background: -webkit-linear-gradient(top, #459aba 0%, #085774 100%);
	background: -moz-linear-gradient(top, #459aba 0%, #085774 100%);
	background: linear-gradient(top, #459aba 0%, #085774 100%);
    margin: 0 auto 40px auto;
	width:400px;
	/*角丸*/
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
/*変形*/
p.s5 {
    font-size: 40px;
	padding:10px 0;
	color: #0f3a49;
	text-shadow: #72b2ca 1px 1px 1px;
	outline: 1px dashed #ccc;
    outline-offset: -6px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #459aba), color-stop(0.00, #085774));
	background: -webkit-linear-gradient(top, #459aba 0%, #085774 100%);
	background: -moz-linear-gradient(top, #459aba 0%, #085774 100%);
	background: linear-gradient(top, #459aba 0%, #085774 100%);
    margin: 0 auto 40px auto;
	width:400px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	/*傾き*/
	-webkit-transform:rotate(4deg);
 	-moz-transform:rotate(4deg);
 	rotation:4deg;
}

outlineでステッチ

01

縫い目の部分にborderを使わずoutline要素を使う方法です。お手軽でいいのですが・・・最新Firefoxでうまく表示できていないかも;

outlineでステッチ+box-shadowで更に外枠

02

上記の指定の外側にbox-shadowで枠を入れたもの。これまた肝心の点線部分がFirefoxだと表示されていないかも・・・

borderでステッチ+box-shadowで外枠

03

boader:dashedで縫い目を表現してbox-shadowで枠を縁取る方法。これだとFirefoxもOKです。現状一番ベストな方法かも。

角丸

04

角丸をつけるとよりそれっぽくなりますね!

変形

05

ちょっとギザギザが汚くなっちゃうな~。ホバーでちょっとカクッと動くとかに使うといいかも。

ブラウザごとの差異がもっとなくなれば、じゃんじゃんつかっていきたい技術ですね~。

2012/07/05追記:
twitter等でご指摘いただいた通り、すごい勢いでtext-shadowとbox-shadowを間違えて表記していた部分を修正いたしました。
ツッコミありがとうございました!