Patterned background with a gradual increase

Question

Patterned background with a gradual increase

Having trouble with a CSS challenge. I'm trying to create a black bar that displays every X pixels, incrementing by 10px each time it appears.

For example, the first bar would appear at 100px, the second at 110px, and so on.

I've been experimenting with the background style below to achieve this in part:

background: repeating-linear-gradient(white, white 1405px, black 210px, black 37.4cm)

Is there a CSS expert out there who knows of a solution?

UPDATE

After some trial and error, I managed to position the line every 1405 pixels using the code below:

background: repeating-linear-gradient(white, white 1405px, black 1405px, black 1415px)

However, I still need the line to appear after every element by increasing by 10 pixels each time.

Check out how it looks now: . Sometimes there may be multiple elements like this:

The challenge remains to place the line behind the elements at intervals of 1405 pixels while increasing by 10 pixels with each appearance (1405px, then 1415px, then 1425px, and so on).

css sass background linear-gradients

Answer 1

Answer №1

It's evident that a simple linear-gradient alone cannot create an irregular pattern. To achieve this, we can utilize transformations and perspective to simulate the desired effect where the spacing between black lines gradually increases:

  body {
  margin: 0;
  perspective: 30px;
  perspective-origin: top;
  overflow: hidden;
}

.grad {
  height: 100vh;
  transform: rotateX(10deg);
  transform-origin: bottom;
}

.grad:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1000%;
  right: -1000%;
  background: repeating-linear-gradient(to bottom, #000 0, #000 10px, #fff 10px, #fff 50px);
  ]

<div class="grad">

</div>

Alternatively, you can use multiple gradients and adjust the background-position for each line. This can be easily achieved with SASS if you need multiple lines:

body {
  margin: 0;
  perspective: 30px;
  perspective-origin: top;
  overflow: hidden;
}

.grad {
  height: 100vh;
  background-image: 
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  background-size:100% 10px ;
  background-repeat:no-repeat;
  background-position:
    0 0,
    0 50px,
    0 150px,
    0 300px;
}

<div class="grad">

</div>

Below is a script shared by @Krypt1 that generates the above effect using SASS:

Answer 2

It's evident that a simple linear-gradient alone cannot create an irregular pattern. To achieve this, we can utilize transformations and perspective to simulate the desired effect where the spacing between black lines gradually increases:

  body {
  margin: 0;
  perspective: 30px;
  perspective-origin: top;
  overflow: hidden;
}

.grad {
  height: 100vh;
  transform: rotateX(10deg);
  transform-origin: bottom;
}

.grad:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1000%;
  right: -1000%;
  background: repeating-linear-gradient(to bottom, #000 0, #000 10px, #fff 10px, #fff 50px);
  ]

<div class="grad">

</div>

Alternatively, you can use multiple gradients and adjust the background-position for each line. This can be easily achieved with SASS if you need multiple lines:

body {
  margin: 0;
  perspective: 30px;
  perspective-origin: top;
  overflow: hidden;
}

.grad {
  height: 100vh;
  background-image: 
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  background-size:100% 10px ;
  background-repeat:no-repeat;
  background-position:
    0 0,
    0 50px,
    0 150px,
    0 300px;
}

<div class="grad">

</div>

Below is a script shared by @Krypt1 that generates the above effect using SASS:

Answer 3

Answer №2

To achieve stripes that are exactly 10px each, you can modify the repeating-linear-gradient to create them every 10px from start to end. Additionally, you can use a separate gradient to cover the first 100px with white color and then transition to transparent to reveal the stripes. Here's the code snippet:

div {
  width: 100%;
  height: 200px;
  background: linear-gradient(white, white 100px, transparent 100px, transparent),
              repeating-linear-gradient(white, white 10px, black 10px, black 20px)
}

<div></div>

Answer 4

To achieve stripes that are exactly 10px each, you can modify the repeating-linear-gradient to create them every 10px from start to end. Additionally, you can use a separate gradient to cover the first 100px with white color and then transition to transparent to reveal the stripes. Here's the code snippet:

div {
  width: 100%;
  height: 200px;
  background: linear-gradient(white, white 100px, transparent 100px, transparent),
              repeating-linear-gradient(white, white 10px, black 10px, black 20px)
}

<div></div>

Answer 5

Answer №3

To achieve a design that displays background elements from behind, consider using a pseudo-element positioned at the back of your container and utilizing the rgba function within a repeating-linear-gradient to create transparent colors.

body {
  background-color: #f2f2f2;
}

div {
  position: relative;
  height: 600px;
}

div::after {
  content: '';
  display: block;
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 30px);
  z-index: -1;
  pointer-events: none;
}

<div></div>

Answer 6

To achieve a design that displays background elements from behind, consider using a pseudo-element positioned at the back of your container and utilizing the rgba function within a repeating-linear-gradient to create transparent colors.

body {
  background-color: #f2f2f2;
}

div {
  position: relative;
  height: 600px;
}

div::after {
  content: '';
  display: block;
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 30px);
  z-index: -1;
  pointer-events: none;
}

<div></div>

Patterned background with a gradual increase

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

Personalizing/Concealing Navigation Controls

The Vuetify rating system seems to be having trouble displaying

What steps can I take to make sure a jQuery Mobile table does not become responsive?

Tips for configuring the default appearance of a MaterialUI TextField to mimic the appearance when it is in focus

Personalize Drop-Down Selection

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Tips for customizing Material-UI Switch button appearance

I am encountering unexpected issues with the functionality of img srcset and sizes

Limiting overflow:visible to input and select fields only

Astro Project experiencing issues with loading SRC folder and style tags

Storing input field values in JavaScript using the onchange event handler.Would you like a different revision

Is there a way to enable Fancybox to change to the adjacent gallery by simply using the 'up' or 'down' arrow keys?

Can you please elaborate on how the CSS properties: -webkit-border-radius and border-radius are utilized?

arrange a div inside another div

Halt spread: descend in a bubble?

The Bootstrap row snag causing text display issues

The issue with the $(window).width() property not functioning correctly in Internet Explorer

Separating content beautifully with a vertical divider in Material UI's Appbar

The vertical tabs in JQueryUI lost their functionality when a few seemingly unrelated CSS styles were added