I'm trying to acheive the following background in html/css:
I searched for ways to make gradients already but i only found smooth gradients, couldn't find tiles-based gradients. I decided to try making this gradient with flexboxes (see the following snippet:
div.s-t-numbers-background {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
div.s-t-numbers-background-column {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
div.s-t-numbers-background-tile {
background-color: #FFFAAA;
width: 100%;
height: 100%;
}<div class="s-t-numbers-background">
<div class='s-t-numbers-background-column'>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
</div>
<div class='s-t-numbers-background-column'>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
</div>
<div class='s-t-numbers-background-column'>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
</div>
<div class='s-t-numbers-background-column'>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
</div>
<div class='s-t-numbers-background-column'>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
</div>
<div class='s-t-numbers-background-column'>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
<div class='s-t-numbers-background-tile'>tile</div>
</div>
</div>The upper-left color is: #8e003f and the lower-right color is: #f02435
Iwould be happy to avoid doing this with divs and use CSS if anyone has a trick to do this.
3 Answers
You can use gradients to do your design in a row (or a column). Then, just repeat the gradient in the other rows, offsetting it a step:
.test {
width: 400px;
height: 300px;
background-image:
linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%), linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%), linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%), linear-gradient(to right,yellow 25%, green 25%, green 50%, blue 50%, blue 75%, red 75%);
background-size: 200% 25%;
background-position: 0% 0%, 25% 25%, 50% 50%, 75% 75%;
background-repeat: no-repeat;
}<div class="test"></div>customize your colors and positions on your own. Im afraid that this dont have large support acros browsers. Mentioned background image would be much better (you can have 6x4px png, size of such file is not big)
div{
width:160px;
height: 240px;
border:1px solid;
background: url("data:image/svg+xml;utf8,<svg xmlns=' width='4' height='6'><rect fill='#8e003f' x='0' y='0' width='1' height='1'/><rect fill='#8e003e' x='0' y='1' width='1' height='1'/><rect fill='#8e003d' x='0' y='2' width='1' height='1'/><rect fill='#8e003c' x='0' y='3' width='1' height='1'/><rect fill='#8e003b' x='0' y='4' width='1' height='1'/><rect fill='#8e003a' x='0' y='5' width='1' height='1'/><rect fill='#8e003f' x='1' y='0' width='1' height='1'/><rect fill='#9e003d' x='1' y='1' width='1' height='1'/><rect fill='#Ae003b' x='1' y='2' width='1' height='1'/><rect fill='#Ce0038' x='1' y='3' width='1' height='1'/><rect fill='#f02437' x='1' y='4' width='1' height='1'/><rect fill='#f02435' x='1' y='5' width='1' height='1'/><rect fill='#8e003f' x='2' y='0' width='1' height='1'/><rect fill='#Ae003d' x='2' y='1' width='1' height='1'/><rect fill='#C0243b' x='2' y='2' width='1' height='1'/><rect fill='#D02439' x='2' y='3' width='1' height='1'/><rect fill='#E02437' x='2' y='4' width='1' height='1'/><rect fill='#f02435' x='2' y='5' width='1' height='1'/><rect fill='#a0243a' x='3' y='0' width='1' height='1'/><rect fill='#b02439' x='3' y='1' width='1' height='1'/><rect fill='#c02438' x='3' y='2' width='1' height='1'/><rect fill='#d02437' x='3' y='3' width='1' height='1'/><rect fill='#e02436' x='3' y='4' width='1' height='1'/><rect fill='#f02435' x='3' y='5' width='1' height='1'/></svg>");
background-size: 100%;
}<div></div>ok thinking about it, looks like a table would do the trick, much less html and css code for that. Then style the background colour per table cell
<table id="red">
<tbody>
<tr>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
</tr>
<tr>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
</tr>
<tr>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
</tr>
<tr>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
<td>number</td>
</tr>
</tbody>
</table>
.red { border-collapse:collapse; }
.red tr:nth-child(1) td:nth-child(1) { background:dark red; }
.red tr:nth-child(1) td:nth-child(2) { background:less dark red; }
and so on
If you're using sass you can predefine you colours as constants which would be great.
