ボーダーと背景透過でマスキングテープ風！
線形グラデーションを用いたストライプとギンガムチェックの作り方をご紹介します
【表示サンプル】たて
【表示サンプル】よこ
【表示サンプル】ななめ
【css】たて
div[align="center"]{
width:80%;
margin:0 auto; padding:2px 1em;
bacground-color:rgba(100,149,237,0.3);
background:-webkit-linear-gradient(left,
rgba(100,149,237,0.3) 50%,
rgba(255,250,250,0.5) 50%);
background:linear-gradient(left,
rgba(100,149,237,0.3) 50%,
rgba(255,250,250,0.5) 50%);
background-size:9px 9px;
transform:rotate(-3deg);
text-align:center;
}ストライプを描くには線形グラデーションを利用します
最初のbackground-color:はグラデーション非対応の環境での背景色を指定しています
特に対応する必要がなければ省略してください
background:の (-webkit-)linear-gradient( の値に
縦ストライプはtop
横ストライプはleft を指定します
上記サンプルコードのtopをleftに書き換えるだけで、ストライプの向きは簡単に変更できます
線の幅はbackground-sizeで変更します
次は４５℃傾いたチェックです
【css】ななめ
div[align="center"]{
width:80%;
margin:0 auto; padding:2px 1em;
background:-webkit-linear-gradient(left top,
rgba(100,149,237,0.3) 25%,
rgba(255,250,250,0.5) 25%,
rgba(255,250,250,0.5) 50%,
rgba(100,149,237,0.3) 50%,
rgba(100,149,237,0.3) 75%,
rgba(255,250,250,0.5) 75%);
background:linear-gradient(left top,
rgba(100,149,237,0.3),
rgba(100,149,237,0.3) 25%,
rgba(255,250,250,0.5) 25%,
rgba(255,250,250,0.5) 50%,
rgba(100,149,237,0.3) 50%,
rgba(100,149,237,0.3) 75%,
rgba(255,250,250,0.5) 75%);
background-size:8px 8px;
transform:rotate(-3deg);
text-align:center;
}
斜めストライプはグラデーションを3回切り替えています
切り替えが一度では鱗紋のようになってしまうからです
左下から右上へのストライプならleft topを、右下から左上へのストライプならright topを指定することで描画できます
【表示サンプル１】まっすぐチェック
【css】
div[align="center"]{
width:80%;
margin:0 auto; padding:2px 1em;
background-size:8px 8px;
background-image:
-webkit-linear-gradient(left,
rgba(95,158,160,0.3),
rgba(95,158,160,0.3) 50%,
rgba(255,250,250,0.3) 50%,
rgba(255,250,250,0.3)),
-webkit-linear-gradient(top,
rgba(95,158,160,0.3),
rgba(95,158,160,0.3) 50%,
rgba(255,250,250,0.3) 50%,
rgba(255,250,250,0.3));
transform:rotate(-3deg);
text-align:center;
}縦ストライプと横ストライプの組み合わせでできています
次のななめチェックも同じく二つのななめストライプの組み合わせで作られています
【表示サンプル２】ななめチェック
【css】
div[align="center"]{
width:80%;
margin:0 auto; padding:2px 1em;
background-size:10px 10px;
background-image:
-webkit-linear-gradient(left top,
rgba(95,158,160,0.3),
rgba(95,158,160,0.3) 25%,
rgba(255,250,250,0.5) 25%,
rgba(255,250,250,0.5) 50%,
rgba(95,158,160,0.3) 50%,
rgba(95,158,160,0.3) 75%,
rgba(255,250,250,0.5) 75%,
rgba(255,250,250,0.5)),
-webkit-linear-gradient(right top,
rgba(95,158,160,0.3),
rgba(95,158,160,0.3) 25%,
rgba(255,250,250,0.5) 25%,
rgba(255,250,250,0.5) 50%,
rgba(95,158,160,0.3) 50%,
rgba(95,158,160,0.3) 75%,
rgba(255,250,250,0.5) 75%,
rgba(255,250,250,0.5));
border-left:1px dotted rgba(0,0,0,0.1);
border-right:1px dotted rgba(0,0,0,0.1);
box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.2),
0 12px 0 -5px transparent;
transform:rotate(-3deg);
text-align:center;
}
ストライプの本数を増やしたり、太さを変えたりすればタータンチェックやガンクラブチェック、アーガイルチェックも作れます
必要なのは根気のみ！
でも、そうした毛織物やニットで描かれるチェックは半透明であるよりも背景画像を設定するほうがずっとそれっぽいですし簡単です
サンプル一覧
マスキングテープ（プレーン）
マスキングテープ（ドット）
Topへ戻る
