Five easy and fun CSS effects

Looking to up your CSS game? I have a range of free and premium coureses 👉 kevinpowell.co/courses?...
🔗 Links
✅ The finished code: codepen.io/kevinpowell/pen/Ex...
⌚ Timestamps
00:00 - Introduction
00:39 - fun text effect
03:10 - more interesting hr
06:08 - Bonus effect: easy pill shapes
06:55 - Fancy link 1
13:08 - Over the top button effect
18:40 - Gradients and Images “inside” text
23:10 - Fancy link 2
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@KevinPowell]

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.

[@justsample9185]

what about just background-position: left bottom?

[@T-W-S]

and you can adjust bg position further like this: `background-position: left bottom 2px` (which means 2px from the bottom, same as calc(100% - 2px))

[@tatof2]

@@T-W-S exactly! more stable and easier. no magic

[@molamola5260]

This man really loves css.

[@iamtharunraj]

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 💞

[@eksperiment6269]

It's always great when you're introduced to new things in CSS you didn't know was possible, thanks Kevin 😊👍

[@TrostCodes]

Really fun effects, Kevin! Love these kinds of videos.

[@andrewrea2799]

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.

[@zn3rgy1000]

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! 💯

[@AleksPopovic]

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. 🙏

[@Jumanji_Dev]

Our Master 👑 , Lovely to know new effects using CSS only 👌💯 + 1

[@re.liable]

Transition is realllyyyy nice.

[@widespectrumcreators4691]

kevin powel rockssss !!!

[@KOBE42__]

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 KZbin, 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 😅

[@mrahmedmosaad5744]

Really awesome like ever

[@acubley]

"go over the top" Someone's gonna reinvent the blinking text thanks to you, Kevin. 👀

[@user-ik7rp8qz5g]

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

[@swaruputube]

Thanks

[@KevinPowell]

Thanks so much!

[@mistersimeeec]

Would be interested to see some similar text effects making use of "box-decoration-break" to clone / wrap effects between linebreaks.

[@bharathkesari7350]

the lh unit and anchor is really a game changer lol

[@ChrisIsOutside]

if you set the h2 to display inline-block would it make the gradient work when it wraps?

[@user-ik7rp8qz5g]

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.

[@ricseeds4835]

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.

[@LePhenixGD]

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

[@KevinPowell]

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.

[@bopuc]

wooooow

[@prajapati_dp]

❤

[@backup_hdd]

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,,

[@TurpoChargedGaming]

Any advice on avoiding choppy ends of animations?

[@KevinPowell]

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.

[@PascalHorn]

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. ^^

[@anuvette]

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

[@KevinPowell]

I have a playlist on them, which might help :) - kzbin.info/aero/PL4-IK0AVhVjPKGIBWg7YYmlBkFIiy_9r1

[@anuvette]

@@KevinPowell thank you ♥️

[@gabydewilde]

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 :)

[@dietrichlee518]

Not first

[@AndreSantos-yk9pr]

Firstttt

[@ayushraj5672]

*{ First; } 😅 (me the first)

[@KevinPowell]

almost :D

[@balanagusiddhartha8626]

I wish ur videos were brief cause it's too long to start

[@KevinPowell]

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.