Optimizing HeroSection for Mobile and Desktop
Hey, how does the Herro section look, especially on mobile? Is it good or are there any improvements that can be made?
2 Replies
you have white text on a light background
on mobile, it's really hard to read, specially outside (since you need to increase brightness and that reduces contrast)
and that arrow at the bottom is so tiny tiny tiny tiny tiny
also, not everybody deals well with transparent buttons
The most important thing is making sure that content is readable. You need some kind of overlay in between the image and the text.
https://youtu.be/NwnZU6mWJkk?si=059koQHujYoRHKXY
https://youtu.be/lRPguPbovro?si=jQg_tyN_Xl6DeMgw
https://youtu.be/TAA89nkEuhw?si=-6aGXkuHkOVqL11r
Kevin Powell
YouTube
Add an overlay to a background-image with one line of CSS
Looking to take control of your CSS? Check out my course CSS Demystified 👉 https://cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=border-image
🔗 Links
✅ Temani’s article on border-image: https://www.smashingmagazine.com/2024/01/css-border-image-property
✅ CSS Demystified: https://cssdemystified.com/?utm_campaign=general&...
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...
Kevin Powell
YouTube
How to use mix-blend-mode, and how to avoid problems with it
You don't hear a lot about mix-blend-mode, but after mentioning it in a previous video, a lot of people asked for something more in-depth, so here we are!
🔗 Links
✅ First codepen: https://codepen.io/kevinpowell/pen/dyvEBpj
✅ Second codpen: https://codepen.io/kevinpowell/pen/3cf5d075a29e2d702c02ee7387d516c2
✅ MDN information on it: https://deve...