Just for fun…
Create a background-color that paints every third pixel.
Like this:
My solution:
let body = document.getElementById('theBody');
for (let i = 0; i < window.innerHeight; i += 3) {
for (let j = 0; j < window.innerWidth; j += 3) {
pix = document.createElement('div');
pix.style.cssText = `
display: block;
width: 1px;
height: 1px;
background-color: red;
position: absolute;
top: ${i}px;
left: ${j}px;
`;
body.appendChild(pix);
}
}
Share your solution
One questions:
Is there a way of doing it with pure css (without javascript) or at least a way that doesn’t affect the performance/loading time of the page?
Have a nice day campers