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

姐さん

2012.07.03

Web制作

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

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

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;
}