CODEWITHSUNDEEP
csslinear-gradientscss-gradientsrepeating-linear-gradient
valerio0999
valerio0999

Reputation: 12136

manipulating repeat linear gradient

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

Upvotes: 2

Views: 927

Answers (2)

valerio0999
valerio0999

Reputation: 12136

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%);

Upvotes: 1

amik
amik

Reputation: 5909

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/

Upvotes: 0

Related Questions