0

I am trying to create a CSS color grid inside 1 HTML element only (something like this https://www.shutterstock.com/image-vector/seamless-pattern-geometries-pastel-colors-518111110). I want to have 1 HTML element like a div of 300px * 300px, and then I want to create this color grid using CSS only. I don't want to create multiple elements using js or any other CSS framework or library.

Currently, I am thinking of using box-shadow (only able to create 1 axis grid) or background-image, but any other suggestions are welcome.

with box-shadow (1 axis grid)

#test {
    width: 100px;
    height: 100px;
    border: 1px solid;
    box-shadow: 10px 0px 0 0 red, 20px 0px 0 0 blue;
    clip-path: inset(0px -15px 0px 0px);
}

------- edit --------

A lot of people are saying why I want to do it, so here it is. https://youtu.be/-7k3H2GxE5E look at this video of Jake and Surma. Here they talk about the progressive loading of images. I was thinking maybe we can generate a rough sketch grid colors of big images in a webpage, that will give users some insight about the image on slow networks. There are 3 ways to do that, with low res images, creating multiple div in HTML with image data using js, or as the image will be just colored, I was thinking maybe I can try with CSS only. I have already done the first 2, but I want to compare their performance.

"I don't want to create multiple elements using js" because for big images, there will be a lot of HTML nodes and this will have a negative performance impact.

It will be only a visual grid with no interaction.

https://codepen.io/jaysalvat/pen/HaqBf look at this codepen for reference. This guy also created the script for doing this but it's in PHP and we need to install this. I was thinking to create this in browser only with some more useful tools.

lovekesh
  • 35
  • 4
  • 2
    *"I don't want to create multiple elements using js"* - why? That is probably is the easiest way to do this. – Spectric Jul 27 '21 at 16:32
  • tbh using js to dynamically create this would probably be the easiest way to go about doing this. It gives you the option to resize to any dimension, change colors, and a whole lot more, but most importantly you get the result you want with little effort. –  Jul 27 '21 at 16:36
  • 2
    With [JavaScript](https://dev.mozilla.org/Learn/JavaScript "MDN Web Docs") you would create only **one** element and let it **automatically** repeat itself. Doesn't it sound great? – František Vojáček Jul 27 '21 at 16:39
  • What was the purpose of drawing a grid ? Was it only for a visual or was it to have content or possible interaction with(in) each of these squares ? For a visual, background on html or body could be plenty enough , a pseudo and multiple box-shadow is also a possibility. IF content or interaction needed, then an element will be needed for each square, either from HTML structure (and each with a different background-color) or generated via js (as already said) with also a specific background for each. Update and clarify your question to see it reopen and answered ;) – G-Cyrillus Jul 27 '21 at 19:08
  • @G-Cyrillus thank you for all the suggestions. I have updated the question description. – lovekesh Jul 28 '21 at 05:44

1 Answers1

1

The color selection is limited by the technique, but you can do something like this:

<style>
  div#grid {
    height: 100vh;
    width: 100vh;
    background: rgb(167,34,171);
    background: linear-gradient(90deg, rgba(167,34,171,0.5) 26%, rgba(34,171,98,0.5) 26%, rgba(34,171,98,0.5) 50%, rgba(28,195,188,0.5) 50%, rgba(28,195,188,0.5) 75%, rgba(218,84,84,0.5) 75%, rgba(210,44,44,0.5) 100%), linear-gradient(0deg, rgba(167,34,171,0.5) 26%, rgba(34,171,98,0.5) 26%, rgba(34,171,98,0.5) 50%, rgba(28,195,188,0.5) 50%, rgba(28,195,188,0.5) 75%, rgba(218,84,84,0.5) 75%, rgba(210,44,44,0.5) 100%);
  }
</style>
<div id="grid"></div>

How this works? The 'background' property accepts more than one value, in this case it has two line-gradients separated by a comma: linear-gradient(...), linear-gradient(...). These are layered atop one another with the first background you provide on top and the last background listed in the back.

Those two gradient backgrounds are using semi-transparent colors, and one is oriented at 90° and the other is oriented at 0°. Also, the gradients are not smooth, there is a hard cut between colors. This is achieved by arranging the color markings in such a way that when one ends the next begins. This line generates a black & white gradient without grays:

linear-gradient(90deg, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%)

First (black) color goes from 0% (implicit) to 50%, and second (white) color goes from 50% to 100% (implicit).

As the grid is created using semi transparent gradients, the final colors are determined by the interaction between the colors of those gradients.

Reference on multiple backgrounds: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

Online gradient generator: https://cssgradient.io/

Conrado Lopez
  • 131
  • 1
  • 6
  • Thank you for the answere. This is extremely helpful. Can you please tell me why you said color selections are limited ? and how did you create this code? – lovekesh Jul 28 '21 at 05:47
  • The 'background' property accepts more than one value, in this case it has two line-gradients separated by a comma: linear-gradient(...), linear-gradient(...). – Conrado Lopez Jul 28 '21 at 06:46
  • I just added the "theory" in the answer. I don't know why you don't want to use javascript but as an exercise I found it very interesting. I am happy that is was useful for you. – Conrado Lopez Jul 28 '21 at 07:14
  • Can you see if you are able to provide a better answer for this. Is there a better way? Removing the middle of the background, keeping only the border. I want to make the middle of the image see-through. https://stackoverflow.com/questions/68628974/removing-the-middle-of-the-background-keeping-only-the-border –  Aug 04 '21 at 12:17
  • This is the code: background: linear-gradient(to bottom right, gray, black), url("https://i.imgur.com/pwdit9N.png"), linear-gradient(to bottom right, #eee, #ccc); /// I'm trying to remove the middle part of it. https://i.imgur.com/WkAXJ3a.png –  Aug 04 '21 at 12:29
  • @csshtmljavascript14578 that is another question. This question is answered yet. – Conrado Lopez Aug 04 '21 at 13:59
  • Would you be able to provide a different answer than what has been provided? https://stackoverflow.com/questions/68628974/removing-the-middle-of-the-background-keeping-only-the-border –  Aug 04 '21 at 14:57