Temani Afif (of CSS Challenges) mentioned to me that instead of magic numbering the underline for the gradient, one approach is to do this: background-position: 0 calc(100% - .2rem); Then you know it's offset directly from the bottom.
Thank you Kevin for this amazing video. I have never tried one of these except the *fancy link 2* whichi actually good from one of your shorts. You're one of the reasons why I started to fall in love with CSS 💞
The following seems to happen quite often: 1) I start working on a new project 2) I start thinking… maybe I can do X on this project 3) Open RU-vid, first video I see is Kevin Powell. “How to do X” Honestly, this has happened quite a few times now I’m starting to think that you are tapping into my brain, Kevin 😅
On Gradients inside text, maybe you can use percentage as well to make sure that even if create new lines it will still reach your desired color, although you'll need to note that it will be a magic number as well. Thanks for these contents Kevin! 💯
These are a bit over the top, but if toned down I think some of them would be really cool, especially on a dark background as shown in the example. I am currently redesigning my website and I'm definitely going to play around with the layered titles and image cutout titles to see if I can make them work. Thanks for making these. 🙏
Really fun video Kevin. The effects that I think I could get away with in my projects would be using multiple box shadows and surprisingly the fancy link 1.
Text shadow can be used to create 3d effect. One shadow is red with positive x, one shadow is cyan with negative x, both with 0 y. This can be viewed in 3d glasses. Might need to change which color goes in which direction
Right off the bat, I'm getting Vietnam war flashbacks to LaTeX's tcolorbox package. That package can probably do everything you can imagine but it looks intimidating as hell.
Unsupported features like lh units can be worked around by using @supports() directive. Put inside parts of solution that depends on it, put fallback into @supports(not()). Better to use it with simple and small pieces of code, or it will be too hard to work with.
wasn't there some css proposal for having the bounding box for text be at the actual characters' boundaries instead of including line-height and everything? or maybe i just misremembered this or mixed it up with some vector graphics software,,
08:50 Sometimes I do an effect like this on links too, but I prefer to use background-position: left bottom; or background-position: right bottom; This is much easier to handle and also well supported in all browsers, also with transitions. And then I can simply add padding-bottom to bring the line further down. As noticed, the link has to be display: inline; to work. I think I got the idea from another of your videos, Kevin. Thanks again for your work in general, much appreciated. 😊 Edit: Ah yeah, fancy-link-2 is exactly what I've meant what I'm using from time to time. So good. ^^
18:40 Hey Kevin! I wanted to know if it was possible to do the opposite of this effect, where we have a background image but the text seems "cut-out" in the background
Depends a little on what's behind the text 😅. There are a few different ways depending on the effect you want, or potentially no real way to do it, though I think worst case would be some sort of clip-path or mask using an SVG in some way.
pls make an indepth video about images. i hate working with images so much they never behave the way i expect or want them to and it's just such a pain in the ass for me ahh
For the outline? afaik, there's nothing we can do. For whatever reason, chrome (at least on windows) doesn't do subpixel rendering for outlines. When its moving fast enough, you don't notice, but when you have an ease, and it's moving slow at the end, the pixel by pixel jumps aren't clean.
Ahhh yes, all the things you should never do with css but cant resist. I'm surprised you've managed to contain yourself and didn't use many gradient backgrounds. Perhaps you didn't know and now you have to play and make things even worse :)
After 7 years of making videos, this is what you get with me 😅. I tend to be a bit on the longer side, and go into the "how and why" everything works, and it makes them a bit longer. I do have certain times when I'll focus on keeping things shorter, and it is something I keep front of mind, (because if I didn't this one would have been 40 minutes 😆), but at the same time, it's sort of how I approach things. I do make a big effort to keep intros under 1 minute though.