2

i want to recreate a line pattern similar to uber's brand website: https://brand.uber.com/ - in particular the repeating lines you can see in the background: http://prntscr.com/etius6

to do so, i thought of using a repeating-linear-gradient with css. 

.container {
  background-image: repeating-linear-gradient(90deg,  #d8d8d8, #d8d8d8 1px,  white 0, white 16.666666667%);
    min-height: 5000px;
     max-width:904px;
  margin:0 auto;
}
<div class="container">
  
</div>
and here's a fiddle: https://jsfiddle.net/jz7ag7L1/

it works but i want to tweak it a bit. basically i want to eliminate the first bar, but anything i try just makes the gradient disappear or it weirdly becomes thinner, always leaving the bars where they are now.. background-position has no effects as well.

any help would be great, thanks

valerio0999
  • 11,458
  • 7
  • 28
  • 56
  • 1
    This is a _repeating_ gradient - the gradient itself is just the thin line and then the white space next to it, and the next line is the first repetition of that. So you can not just “remove the _first_ line”, because there _is only one_ line. But perhaps just moving the position slightly would achieve what you want already? `background-position: -1px 0;` - that would move the left-most line outside of the element. – CBroe Apr 07 '17 at 10:57
  • this actually works, but at this point and i have a last line on the other side appearing :) – valerio0999 Apr 07 '17 at 11:00
  • change 16.6667% to 16.7% or 16.8% and @CBroe solution will work – vals Apr 07 '17 at 12:19
  • @vals it doesn't – valerio0999 Apr 07 '17 at 12:41

2 Answers2

1

i solved using a double gradient background image, hiding the first line with the first of the two gradients

background-image: linear-gradient(to right, white, white 1px, transparent 0, transparent 100%),repeating-linear-gradient(90deg, #d8d8d8, #d8d8d8 1px, white 0, white 16.66667%);
valerio0999
  • 11,458
  • 7
  • 28
  • 56
0

If an inner div is not a problem, hiding the left grey line behind and outer div with overflow:hidden works:

.container .inner {
  background-image: repeating-linear-gradient(90deg,  #d8d8d8, #d8d8d8 1px,  white 0, white 20%);
  min-height: 5000px;
  margin-left: -1px;
}
.container {
  max-width: 904px;
  margin:0 auto;
  overflow: hidden;
}

<div class="container"><div class="inner"></div></div>

https://jsfiddle.net/jz7ag7L1/1/

amik
  • 5,613
  • 3
  • 37
  • 62
  • that's something i thought of, but i would prefer something less hacky. thanks anyway :) – valerio0999 Apr 07 '17 at 10:51
  • 1
    I'm afraid any solution will need to be kindof hacky, because the width of one gradient column should be 16.66%+0.1666px - it is always a problem when you need to combine % and px in CSS measurements. But maybe there is some trick to this. – amik Apr 07 '17 at 11:20