ページのイメージ
WEB開発デザイン 2019/03/13

CSSだけで作る!ドットやストライプのパターン

  •  
  • このエントリーをはてなブックマークに追加

CSSのみを使い、ドットやストライプの背景パターンを作成する方法です。
基本のスタイルを調整するだけで複数のパターンを生成できます。

今回はグラデーション(gradient)を活用してパターンを作成していきます。

Safariへの実装時の注意!

透過のCSSグラデーションでSafari、iphoneだけ透明の箇所が黒くなる現象があります。
こちらの解決法としてはtransparentで指定している部分をrgbaの記述に変更することで回避可能です。
例) transparent → rgba(255,255,255,0)


 

ボーダーパターン

  .bg_border {
	background-color: #8be4f0;
	background-image:
	 linear-gradient(-90deg, #fff 50%, transparent 50%);
	background-size: 14px 14px;
}

「background-color」で背景色を指定し、「background-image」で縞の色を指定。
「background-size」を変えることで幅の変更もできます。
linear-gradientの角度をなくすと横縞になります。
(linear-gradient...線形グラデーションを指定する関数)

斜めのボーダーパターン

  .bg_skew_border{
    background-color: #fc693b;
    background-image:
	 repeating-linear-gradient(-45deg,#fff, #fff 7px,transparent 0, transparent 14px);
}

「background-image」で縞の色と幅を指定しています。
角度を変えることでボーダーの角度も変えられます。
(repeating-linear-gradient...繰り返しの線形グラデーションを指定する関数)

チェックパターン

ボーダーパターンを2つ重ねることでチェック模様も作成できます。
ラインを半透明にしたり、縞の色を変えるのも可愛いと思います。

ドットパータン

  .bg_dot{
  background-color: #fff;
  background-image:
    radial-gradient(#7bded9 30%, transparent 30%);
  background-size: 20px 20px;
}

「background-color」で背景色を指定し、「background-image」で水玉模様の色を指定。

「background-size」は水玉の大きさで、
「background-position」は水玉の間隔になります。
(radial-gradient...円形グラデーションを指定する関数)

小さめのドットにすると印象が変わります。ドット方眼のような表現も可能です。
逆に大きいドットを作ると、ダイヤのようなパターンも作れますね。

斜めのドットパータン

ドットパータンを2つ重ねることで斜めのドットも作成できます。

  /* ドット斜め */
.bg_skew_dot{
  background-color: #fff;
  background-image:
    radial-gradient(#7bded9 20%, transparent 20%),
    radial-gradient(#7bded9 20%, transparent 20%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

「background-position」は、「background-size」の半分の値を指定します。
今回は20pxなので「background-position」では10pxずらします。
色やサイズをを変えることでも違ったパターンが作成できます。


 

工夫次第で画像を使わずCSSだけでも様々なパターンを作成可能です。
色を変えるだけでもかなり印象は変わりますので色々試して見てください!

 

 

 


しずおかオンライン中途採用社員も、積極募集中!
「womo」「イエタテ」のスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら!

Category

Ranking