web関連

cssだけで方眼紙の様なマス目を作る方法

2018/04/25

プログラミング

css

リピート用方眼紙のマス目画像を作って繰り返し表示させてて、線の濃さを変えたいときに画像をいちいち編集しないといけなくてめんどくさかったので調べたらcssでできたので備忘録

cssに以下のコードを記述

.css{
background-color: #FFF;
background-image: linear-gradient( transparent 95%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .06)), linear-gradient( 90deg, transparent 95%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .06) );
background-size: 16px 16px;
background-repeat: repeat;
}

ベンダープレフィックスってもう必要ないんすね

参考

▼cssで方眼紙！！
http://jsdo.it/.minegishi/mZEX

css便利だなー