CSSでステッチ風タグの描き方

ちょっとしたタグや記事タイトルなどの背景を装飾するとき、女性らしく可愛い雰囲気にしたい場合など「ステッチ風タグ」を使ってデザインしてみるのもいいかもしれません。また、その場合に背景画像を配置するのではなくCSSによる表現で実現してみましょう。

DEMO

HTMLを記述

サンプルのHTMLは以下のようになっています。

<p class="stitch-sample1">Sample1</p>
<p class="stitch-sample2">Sample2</p>
<p class="stitch-sample3">Sample3</p>
<p class="stitch-sample4">Sample4</p>
<p class="stitch-sample5">Sample5</p>
<p class="stitch-sample6">Sample6</p>

Sample1

Sample2

Sample3

Sample4

Sample5

Sample6

Sample1

CSS

.stitch-sample1 {
   padding: 20px;
   margin: 10px;
   background: #F27398;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
}

.stitch-sample1 {

padding: 20px;

margin: 10px;

background: #F27398;

color: #fff;

font-size: 21px;

font-weight: bold;

line-height: 1.3em;

border: 2px dashed #fff;

border-radius: 10px;

box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

text-shadow: -1px -1px #aa3030;

font-weight: normal;

}

Sample2

CSS

.stitch-sample2 {
   padding: 16px 10px;
   margin-bottom: 1.0em;
   background: #FBA848;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #FBA848, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #d48020;
   font-weight: normal;
}

.stitch-sample2 {

padding: 16px 10px;

margin-bottom: 1.0em;

background: #FBA848;

color: #fff;

font-size: 21px;

font-weight: bold;

line-height: 1.3em;

border: 2px dashed #fff;

border-radius: 10px;

box-shadow: 0 0 0 4px #FBA848, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

text-shadow: -1px -1px #d48020;

font-weight: normal;

}

Sample3

CSS

.stitch-sample3 {
   padding: 12px 10px;
   margin-bottom: 1.0em;
   background: #58BE89;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #58BE89, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #238452;
   font-weight: normal;
}

.stitch-sample3 {

padding: 12px 10px;

margin-bottom: 1.0em;

background: #58BE89;

color: #fff;

font-size: 21px;

font-weight: bold;

line-height: 1.3em;

border: 2px dashed #fff;

border-radius: 10px;

box-shadow: 0 0 0 4px #58BE89, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

text-shadow: -1px -1px #238452;

font-weight: normal;

}

Sample4

CSS

.stitch-sample4 {
   padding: 8px 10px;
   margin-bottom: 1.0em;
   background: #40AAEF;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #40AAEF, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #1577b7;
   font-weight: normal;
}

.stitch-sample4 {

padding: 8px 10px;

margin-bottom: 1.0em;

background: #40AAEF;

color: #fff;

font-size: 21px;

font-weight: bold;

line-height: 1.3em;

border: 2px dashed #fff;

border-radius: 10px;

box-shadow: 0 0 0 4px #40AAEF, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

text-shadow: -1px -1px #1577b7;

font-weight: normal;

}

Sample5

CSS

.stitch-sample6 {
   padding: 4px 10px;
   margin-bottom: 1.0em;
   background: #CCCCCC;
   color: #333;
   font-size: 14px;
   font-weight: bold;
   line-height: 1.3em;
   border: 1px dashed #fff;
   border-radius: 2px;
   box-shadow: 0 0 0 2px #CCCCCC, 2px 1px 6px 2px rgba(10, 10, 0, 0.5);
   text-shadow: 1px 1px #FFF;
   font-weight: normal;
}

.stitch-sample6 {

padding: 4px 10px;

margin-bottom: 1.0em;

background: #CCCCCC;

color: #333;

font-size: 14px;

font-weight: bold;

line-height: 1.3em;

border: 1px dashed #fff;

border-radius: 2px;

box-shadow: 0 0 0 2px #CCCCCC, 2px 1px 6px 2px rgba(10, 10, 0, 0.5);

text-shadow: 1px 1px #FFF;

font-weight: normal;

}

Sample6

CSS

.stitch-sample6 {
   padding: 4px 10px;
   margin-bottom: 1.0em;
   background: #CCCCCC;
   color: #333;
   font-size: 14px;
   font-weight: bold;
   line-height: 1.3em;
   border: 1px dashed #fff;
   border-radius: 2px;
   box-shadow: 0 0 0 2px #CCCCCC, 2px 1px 6px 2px rgba(10, 10, 0, 0.5);
   text-shadow: 1px 1px #FFF;
   font-weight: normal;
}

.stitch-sample6 {

padding: 4px 10px;

margin-bottom: 1.0em;

background: #CCCCCC;

color: #333;

font-size: 14px;

font-weight: bold;

line-height: 1.3em;

border: 1px dashed #fff;

border-radius: 2px;

box-shadow: 0 0 0 2px #CCCCCC, 2px 1px 6px 2px rgba(10, 10, 0, 0.5);

text-shadow: 1px 1px #FFF;

font-weight: normal;

}

ステッチ風のタグということで基本的な装飾のみになりますが、好きな色やサイズにカスタマイズして使ってみてください。

以上になります。

CSSでステッチ風タグの描き方

HTMLを記述

Sample1

CSS

Sample2

CSS

Sample3

CSS

Sample4

CSS

Sample5

CSS

Sample6

CSS

関連する記事

コメントを残すコメントをキャンセル

HTMLを記述

Sample1

CSS

Sample2

CSS

Sample3

CSS

Sample4

CSS

Sample5

CSS

Sample6

CSS

関連する記事

関連する記事はこちらです。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル