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: https://i.sstatic.net/AvEru.jpg. Sometimes there may be multiple elements like this: https://i.sstatic.net/npyo1.jpg

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

What is the most effective method to override parent styles while utilizing CSS Modules?

Position the responsive carousel in the center

Flashing on objects, Chrome-exclusive, utilizing background-blend-mode exclusively

Tips for keeping a link in place on an image

What steps can I take to modify the class of a button once it has been clicked using JQuery?

Having difficulty implementing Jquery UI effects within an HTML Dialog in Google Apps Script

Can the CSS be used to conceal the PNG image while still preserving the drop shadow effect?

`Jump-start Your Development with jQuery Lightbox Centering`

Arrange DIV elements sequentially with HTML, JQuery, and CSS

When using React, I noticed that adding a new product causes its attributes to change after adding another product with different attributes on the same page

Concealing subcategories within a responsive menu using jQuery

The loader image does not appear on mobile screens during an AJAX call, but it functions correctly on desktop screens

What is the best way to create a mirror effect on one div by clicking another div?

Using jQuery and AJAX to intermittently update the source of the background image

Specify the input type to occupy the full width and be contained within its parent div

Is it possible to generate an image from HTML using PHP?

The fit-content max-height property is not functioning properly in Firefox

What is the best way to align an avatar within a cardHeader component in the center?

Strategies for determining the direction of a slide event within a Bootstrap carousel

Disable a tab or menu item if the bean's boolean value is 'false'