html - Generating grid lines with CSS gradients -
i'm trying generate grid alternating solid , dotted lines on tall column. catch solid lines need programmatically farther apart, , in doing so, should reveal more dotted lines. here code have far:
jsfiddle: http://jsfiddle.net/etzvj/
css:
.test { width: 100%; height: 2000px; background: linear-gradient(white 24px, transparent 24px) 0px -24px, linear-gradient(black 24px, transparent 24px), linear-gradient(90deg, white 1px, red 1px, red 2px, white 2px); background-size: 1px 25px, 1px 50px, 3px 1px; }
html:
<div class="test"> </div>
i think i'm pretty close. can adjust second background-size(1px 50px) 1px 75px push black lines apart , show 2 dotted lines. there 2 things code aren't quite right, though. first, line height 31px, surprising because think specified 25px tall gradients. i'm sure make these numbers smaller lines 25px apart, i'd know why it's taller expected. second, increments of 25px seem work until scroll far down, , breaks. here heights required achieve desired effect:
number of dotted lines between solid lines -> corresponding background size
0 -> 1px 25px
1 -> 1px 50px
2 -> 1px 75px
3 -> 1px 99px
4 -> 1px 124px
5 -> 1px 149px
6 -> 1px 174px
7 -> 1px 199px
why code break @ 100px, , have drop 99px? code in, again, i'd know what's going on. thanks!
doh!! sorry guys!! code works intended. zoom level inadvertently set 110% on tab , tab only, didn't notice. (>.<) making taller 25px , not work @ 100px. i'm embarrassed that's was, , apologize wasting time. learned stacking linear gradients. again responses.
Comments
Post a Comment