Checkered Shadow Effect in CSS
In this short article I will try to explain how this checkered shadow effect was achieved by using just CSS which was a challenge posted by React Day. More than just telling you the solution, I will try to explain my though process around achieving the effect in CSS.
Deconstruction
The key idea is that the text and shadow can be two different elements. One being the actual text and the other being a clip over the desired pattern placed below the first one to make it look like its shadow. (Pardon, its quite a mouthful sentence). So the problem is separated, the first one is fairly straightforward, it’s just text, now how do get the second one is the actual deal.
It’s quite straight forward, to reduce the HTML markup you can use before/after pseudo elements and set the content with the text you want to set. (I treat after/before like cheat-codes in css to get extra boxes!)
For the checkbox effect, you can use multiple linear-gradient for the background and let it repeat.
You can do a lot just using multiple gradients for background. Here is an interesting collection of CSS patterns https://leaverou.github.io/css3patterns/
Then you use `background-clip: text` which clips the background with the text. Now all you need to do is position it well at the back of the main element with some offset to give a 3d effect. (Again another nice demo for background clip with text — https://mgearon.com/css/css-background-clip-text/)
I have shared the CodePen link, where I have tried to prototype the effect.
If you are CSS curious, you should consider checking out BlrCSS
If you have any thoughts or ideas you can reach out to me on twitter handle @TheWizardJS
