While playing with some CSS, I wondered if it would be possible to build a simple grid pattern to apply to the page, which of course it was trivial to do with the linear-gradient function.
:root {
--grid-size: 10px;
}
body {
background-image:
linear-gradient(to left, transparent calc(var(--grid-size) - 1px), #45A7D255 var(--grid-size)),
linear-gradient(to bottom, transparent calc(var(--grid-size) - 1px), #45A7D255 var(--grid-size));
background-size: var(--grid-size) var(--grid-size);
}What does the above do? It's two linear gradients, one that goes from left to right creating a 10x10 pixel box. The first 9 pixels are transparent with the last pixel blue. This is repeated, but with the second gradient going from top to bottom creating the grid effect.
But what about taking it a bit further to create a grid paper type effect? Where every 10x10 box has its own boundary? Well we can introduce the same gradients, just bigger. I also removed any opacity so that the larger grid lines appear bolder.
:root {
--grid-size: 10px;
}
body {
background-image:
linear-gradient(to left, transparent calc(var(--grid-size) - 1px), #45A7D255 var(--grid-size)),
linear-gradient(to bottom, transparent calc(var(--grid-size) - 1px), #45A7D255 var(--grid-size)),
linear-gradient(to left, transparent calc(var(--grid-size)*10 - 1px), #45A7D2 calc(var(--grid-size)*10)),
linear-gradient(to bottom, transparent calc(var(--grid-size)*10 - 1px), #45A7D2 calc(var(--grid-size)*10));
background-size:
var(--grid-size) var(--grid-size),
var(--grid-size) var(--grid-size),
calc(var(--grid-size) * 10) calc(var(--grid-size) * 10),
calc(var(--grid-size) * 10) calc(var(--grid-size) * 10);
}As ever, its becoming more and more impressive all that we can achieve with just CSS!
| More from 1 Thing A Week | |||
|---|---|---|---|
| « Thoughts on the Apple iPhone 15 Pro lineup and Apple Watch Ultra 2 | Can you change the animation-duration property in CSS smoothly? | My iPhone photography break down » | |
You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit