How do I approach this kind of design or layout?
I used grid to achieve the background but, I couldn't get my text to be like that of the shot 😦
4 Replies
you can overlap elements using grid, if you simply explicitly place them in the same area. The easiest way is using
grid-area, but you can manually define the columns and rows with grid-template too:
https://css-tricks.com/positioning-overlay-content-with-css-grid/Ryan Mulligan
CSS-Tricks
Positioning Overlay Content with CSS Grid | CSS-Tricks
Not news to any web developer in 2021: CSS Grid is an incredibly powerful tool for creating complex, distinct two-dimensional modern web layouts.
Thanks a lot @jochemm this will go a long way 🙂
Is it okay if I import the image to the page already edited with the blur and radial gradient on it or should I get the original image and write a code for the radial gradient and the blur?
"ok" really depends on a lot of factors. If it's an image you have the right to use being the most important one 😄
As for the blur and gradient... It depends on how often the image is getting replaced, and who has to do the replacing
Haha, I will be the one to be changing it when the need arises. Thanks @jochemm ;D