CSSのグラデーションでストライプをつくる

CSSのrepeat-gradientを使って、画像を使わずストライプをつくります。

See the Pen Stripe Background by webdev (@webdev-jp-net) on CodePen.0

Safari対策にbackgroun-sizeも指定

2018年3月現在、Safari 11.0.2ではrepeat-gradientを設定したとき
併せてbackgroun-sizeも指定していないと、表示が崩れます

書き方も、background-size: 4px;という省略記法では効きませんでした。
このように幅と高さを個別に記述します。

background-size: 4px 4px;

45度の斜めストライプ

斜めストライプを作るポイントはこの4つ

  1. repeating-linear-gradientは%でサイズ指定
  2. repeating-linear-gradientでは2回リピート
  3. background-sizeの幅と高さをどちらも同じ値にし正方形に指定
  4. background-sizeのサイズ指定はpx指定

background-sizeの値をemなどの相対値で設定した場合。
パソコンのブラウザで、サイズによってはマスの継ぎ目が見えてしまい挙動が安定しません。

.stripe-45deg {
    background: repeating-linear-gradient(45deg, transparent, transparent 25%, #fff 25%, #fff 50%, transparent 50%, transparent 75%, #fff 75%, #fff 100%);
    background-size: 4px 4px;
    background-color: rgba(#000, .5);
}

transitionとの組み合わせ

-webkit-background-clip: text;を使うとテキストの背景としてストライプを設定できます。

この文字をhoverでストライプと塗りつぶしで切り替える場合
hover前と後の設定、両方に-webkit-background-clip: text;を指定しないと、
transitionでアニメーションさせたら
ストライプから塗りつぶしへ戻るタイミングで背景の塗りつぶしが見えてしまいます。

.text-mask-hover {
	margin: 1rem 0 0;
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: uppercase;
	
	-webkit-background-clip: text;

	transition: 200ms;
	transition-property: background, color;

	&:hover {
		background: repeating-linear-gradient(45deg, transparent, transparent 25%, #fff 25%, #fff 50%, transparent 50%, transparent 75%, #fff 75%, #fff 100%);
		background-size: 4px 4px;
		background-color: rgba(#000, .5);

		-webkit-background-clip: text;
		color: transparent;
	}
}

また、repeating-linear-gradientで指定した背景のbackground-size
transitionで拡大縮小させた場合、アニメーションすること自体は可能ですが
レンダリングの負担が大きいのか、現時点では動きはまだ不安定です。

関連記事