Text in top right and bottom left of header
I have this prototype:
https://xan.likes.cash/frontend_ui_gradient.png
These are the things I want to know:
- How to put text in corners
- How to make this gradient (that sits atop a full-screen image, but I got that figured out - possibly using Bulma framework)
6 Replies
I'd use Grid to layer the children, then
place-self: start/end; for the text
gradient you can do a few ways, you can layer an overlay with the other children and put a linear-gradient on it. If your image is already part of a background in the div you can add right to it.
Swear Kevin just did a video on gradients over images but now I can't find itOh then I found it https://www.youtube.com/watch?v=lRPguPbovro
Kevin Powell
YouTube
Lower the opacity of a background-image with CSS
We can play with the opacity of colors by changing the alpha value of them very easily, but with background-images, we’re a little more stuck with what we have… or are we?
⌚ Timestamps
00:00 - Introduction
00:38 - the first thing people usually try
1:32 - creating the pseudo-element
4:38 - putting the background-image on the pseudo-element
5:0...
Thank you very much! 🚀
np if you run into trouble drop it in a codpen
https://youtu.be/8QSqwbSztnA just saving this here
Kevin Powell
YouTube
Get started with grid WITHOUT being overwhelmed
It can be easy to be overwhelmed by CSS grid, so in this video I look at the very basics to get you started without worrying about too much at once.
🔗 Links
✅ The next step with Grid: https://youtu.be/rg7Fvvl3taU
✅ Grid inspector: https://youtu.be/m04RkJwzFgE
⌚ Timestamps
00:00 - Introduction
01:02 - the relationship between the pare...
https://codepen.io/b1mind/pen/LYmqGBa?editors=0100
Bored and wanted to have this example hanging around. Might play with different ways but just quick example of what I was thinking.