CODEWITHSUNDEEP
csslinear-gradients
KillerDesigner
KillerDesigner

Reputation: 515

Create Responsive Repeating Various Height Vertical Line Pattern with CSS

Pretty sure this is possible with CSS3, but I can't figure out how. Given this design pattern

Repeating Vertical Hash Marks of Varying Heights

create the horizontal hash marks in CSS3 that expands or contracts to fill a responsive container (as background?).

Chris Coyier proffered this Vertical Stripe CodePen, but how can it be revised to re-create the pattern above?

HTML

<div class="module">
<h2 class="stripe-6">Vertical</h2>
<p>You could do some schenigans where you have a big rotated element within
this header area (with hidden overflow) that has these stripes. That way 
you could get away with not using repeating-linear-gradient.</p>
</div>

CSS

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
}

.stripe-6 {
  color: black;
  background: repeating-linear-gradient(
    to right,
    #f6ba52,
    #f6ba52 10px,
    #ffd180 10px,
    #ffd180 20px
  );
}

Here's a larger, higher-contrast image to see the pattern better (thanks @Martin!) larger, higher-contrast image

Upvotes: 2

Views: 1710

Answers (1)

Harry
Harry

Reputation: 89760

Yes, it is definitely possible to create this pattern using linear-gradient background images. Unlike the pattern generated by Chris Coyier, this would require two linear gradients as there are two stripes of different heights and gaps.

.bg-pattern{
  height: 50px;
  width: 100%;
  background-color: rgb(115,199,192);
  background-image: linear-gradient(to right, rgba(0,0,0,0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0,0,0,0.25) 12px, rgba(0,0,0,0.25) 14px, transparent 14px, transparent 20px, rgba(0,0,0,0.25) 20px, rgba(0,0,0,0.25) 22px, transparent 22px, transparent 28px, rgba(0,0,0,0.25) 28px, rgba(0,0,0,0.25) 30px, transparent 30px, transparent 36px, rgba(0,0,0,0.25) 36px, rgba(0,0,0,0.25) 38px, transparent 38px);
  background-repeat: repeat-x;
  background-size: 44px 30px, 44px 20px;
  background-position: 8px 0px;
  border-top: 2px solid rgba(0,0,0,0.25);
}
<div class='bg-pattern'></div>

Below snippet has the same pattern added into your code:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
}
.module > h2 {
  padding: 1rem;
  margin: 0 0 0.5rem 0;
}
}
.module > p {
  padding: 0 1rem;
}
.stripe-6 {
  color: black;
  height: 50px;
  background-color: rgb(115, 199, 192);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0, 0, 0, 0.25) 12px, rgba(0, 0, 0, 0.25) 14px, transparent 14px, transparent 20px, rgba(0, 0, 0, 0.25) 20px, rgba(0, 0, 0, 0.25) 22px, transparent 22px, transparent 28px, rgba(0, 0, 0, 0.25) 28px, rgba(0, 0, 0, 0.25) 30px, transparent 30px, transparent 36px, rgba(0, 0, 0, 0.25) 36px, rgba(0, 0, 0, 0.25) 38px, transparent 38px);
  background-repeat: repeat-x;
  background-size: 44px 30px, 44px 20px;
  background-position: 8px 0px;
  border-top: 2px solid rgba(0, 0, 0, 0.25);
}
<div class="module">
  <h2 class="stripe-6">Vertical</h2>
  <p>You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.</p>
</div>

Upvotes: 3

Related Questions