この記事でお伝えしたいこと
この記事は、cssで縞模様を作る方法についてです。
普段のコーディングにおいて縞模様は画像にしてしまうことが多いかと思いますが、それだとご承知の通り、色・幅変更などの修正が面倒です。
そのような問題を解決するためにcssでしま模様をつくる方法について記載したいと思います。
作り方
実際に出来上がったもの
作り方
linear-gradientというプロパティを利用します。
linear-gradientはグラデーションを作るためのプロパティです。1
background: linear-gradient(#c00 50%, #fff 50%);
background-size: 100% 50px;
カラーコードの後ろにある50%という部分が「どこからグラデーションをかけていくか？」という個所の設定する数値です。この値を50％に設定し一切グラデーションをかける余地がなくす設定をしたことで急に色が変更され、しま模様をつくることができます。
こちらの方法参考になりましたら幸いです。以上お読みいただきありがとうございました。
参考文献
CSSシークレット ―47のテクニックでCSSを自在に操る
http://ur0.biz/AG7B