Can I recreate Stripe’s text effect?
HTML-код
- Опубликовано: 2 июн 2024
- Stripe has a cool text effect, so let’s dive into how they created it, and see if we can’t try to copy it!
🔗 Links
✅ Stripe’s home page: stripe.com
✅The canvas gradient animation by Tiffany Rayside: codepen.io/tmrDevelops/pen/vO...
⌚ Timestamps
00:00 - Introduction
00:25 - Getting started
01:37 - The background gradient animation
01:41 - Fast motion starts
01:54 - Fast motion ends
03:15 - Fast motion starts
03:37 - Flashing starts
03:42 - Flashing ends
03:46 - Fast motion ends
03:47 - Positioning the background
06:53 - Trying a simple solution
08:06 - Seeing how Stripe did it
10:55 - Setting up the effect - first attempt
16:22 - Setting up the next - getting it right
24:36 - Improving readability with a custom property
26:20 - Do you like this style of video?
#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 RUclips 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!
Cool! I would love to see more ´real world´ examples. Sometimes I enter in these inspiration websites and I don´t even know the name of the effects some websites are using (it´s hard even to search for tutorials)
💯
Same here
My general rule is if it's a 3D effect, it's Three.js and if it's cool animations, it's GSAP. Most of the time it's right. 😅
@@justinjesalva8665 good tip. Never learned GSAP, but I see there are several videos about it.
CSS never ceases to amaze me, the amount of things you can make with it, the only limitation is your curiosity
The reason the codepen js worked is because the code wasn't in strict mode. You used vite and your js file was a module, and modules are strict by default.
ah, yeah that makes sense, thank you :)
Reverse engineering is always insightful. Thanks, Kevin, as always!
a mix-blend-mode of overlay is often a good starting point. It has an appreciably effect when the source layer is practically any color (except mid-tone grey).
Your ability to find mistakes in your approach before you even start writing code is super awesome!...it's like having a CSS compiler on your head. Great content as always ♥️
This channel popped up in my recommendations and I'm glad it did. I have limited CSS knowledge, but this video was surprisingly relatively easy to follow.
I'd be interested in seeing more videos where you reverse-engineer effects on other sites. CSS can be overwhelming, especially when viewing source code on professional sites, but this makes it easier to understand.
I love how u told us in the beginning for the flashing lights. I felt like being cared for ❤
Man, I really appreciate you making videos like this. Great work 👏
As a beginner this video blew my mind, thanks Kevin, please keep doing this kind of videos.
Loved it! Need more like this🤤
Amazing content as usual. Aweome work Kevin!
Loved this video, would love to see more like this!
I think the reason why console was showing x & y -> not defined is because you have to define (use let) inside the bracket syntax of the for loop instead of defining those variables in the global scope. Nice insightful video btw Kevin!
You're an absolute beast !
Really fun video Kevin! Hope to see more real world CSS reverse engineered!
Loved the new setup 👍
I would love to see such amazing contents....great stuff ❤️❤️
Absolutely amazing
Beautiful! You're a true wizard Kevin. I will definately use this somewhere!
Very clever solution!
Thank you for your video! Please keep making this sort of videos.
Love it, please make more!
Wow! Really like your content and how you presenting it. Thank you!
Nice last few month I am hooked to the animations
I always learn so much from these videos, Kevin is goated
I like the new layout. Also, thanks for the flash warning :)
This is so awesome!!!!! I built something very similar using this tutorial for my portfolio website. The result amazes everyone! Thank you so much for sharing.
Some great nuggets in this video, thanks for showing your process a bit, too. It's great to see experts struggle like the rest of us from time to time :)
Thank you Kevin, I found this impressive and inspiring.
Sooo cool. I love this... do more of these real page tries
Very useful to see how you approach this, Kevin.
Brilliant! Thanks!
Wow, great video!
Great problem solving skills. Great way of testing your css knowledge by trying to apply real world effects like these
Yes, more like this please.
Entertaining episode. And, it looks so easy when you do it ;)
very cool! thanks a lot.
Amazing content!
Love it❤
great video!
Thank you for making CSS accessible for the younger generation of developers!
neat. it's fun to go through this process. I imagine sandwiching the color wash between the texts might be more direct. top with the color burn and the bottom being 100%. will experiment when I get time.
I really love videos like this, and I wish I had more time to putz around try to replicate interesting designs I find on the 'net. I used to learn so much doing that.
Like it, I think this backward-enginnering if we could call it so is great way how to learn and practice new things that are nice at the end. please do more videos like this :D Do more interesting modern pages like this .... :D 🥰
greattt!!!
wow hahah this is super cool
That was fun to watch and would love a bit slower paced so that I could follow along and recreate. Either way, this has been saved into my education folder to go over again.
Thank you Kevin
If I like this type of video? No.... I LOVE IT! ❤
I tried this myself only a couple of months back, and came up what was close but no there.
Btw. For me, it's way easier to follow your code when it's not zoomed in that much.
Please make more of these real world examples!! 😀
Thanks!
Thanks ❤️
Hey Kevin, maybe you could delete some « headache » by using another blend mode, color burn is really aggressive imo.
Maybe the best way to achieve such an effect would be to open photoshop or another software do the effect and replicate from it on css ?!
Thanks a lot
Brilliant @
Wow, that was basically what I expected it to be.
Wow, stripe are amazing who the bananas wrote all that JS to get that great effect!
So cool. Got to know more CSS properties.
Can't we use overflow: hidden properties for the trick?
Really cool! 'canvas' is new to me tho .. 🤔
AMAZING!, Really love this video. Pls Pinterest Home Page Effect 🥺❤️
I would love a series on this where we look at cool effects of different websites and reverse engineer the,
Great video. Maybe make a video with an advanced slider (arrows, navigation dots, autoplay, some animations, transitions). I know it can last more than one hour or two because there is a lot of things to explain but I think it could be the best explanation on youtube.
Hey Kevin, Is there a codepen for your final code? All I see is the link to the animated gradient background you used. TIA! Love your videos!
cool !!!!!!!!!
cool
the reason that x variable didn't work at your js file is strict mode. all type="module" js files run on strict mode and you can't use an undeclared variable in strict mode. but in codepen it wasn't any strict mode.
hi sir what application did you use to really automaticall rrload your design?like on your right side? im curious😶
Did same for a project 👍
Hi kelvin...cool video for real...Can i ask you something....cool you make a video about complex html table and their responsive view?For example introducing nested table?
do you have a video on isolate? was the only bit I didn't understand 😕
This example is really cool can you make a video on css tricks home page there page grid layout is really awesome
0.5 took you to ludicrous speed 🤣 Amazing debugging skills though 🥰
Please try the stripe menu next!
sir, one day i'm going to meet you. You are awesome as CSS
Hi! I'm only starting on web dev, I've recreated this following the video and seeing it perfectly on the VSC preview, but for some reason, opening this locally with Chrome/Safari, etc. doesn't show the effect. Is this related to some JS browser permissions?
PLEASE DO THE STRIPE MOCKUP ANIMATION CSS !!!!
No one has ever even tried to explore that AREA in the STRIPE website
hey kevin i want to start JS so I have learned many things in html and css except cssgrid which I have not learned yet i don't know why but I have built many projects in flexbox and media query
So is it necessary or mandatory?
sory my englisg is not good
I'd say grid is pretty important these days, but that shouldn't stop you from getting into JS!
Cool thanks I don't know about the others but I really want this type of videos
Why do you but the * selector on the pseudo-elements.? I thought that the * selector works for all the elements, even the pseudo-elements.
Please show us how they did the navigation menu.
What plug-in do you use for writing divs with classes really fast?
It’s a Vsc extension
It's called Emmet, it's built into VS Code, and you can get an extension for other browsers.
I know you researched this before doing the video so would have taken longer, but still. I can spend a whole day building and tweaking a complex hero design 😂. It would be interesting if you mentioned how long the whole thing actually took you?
Dude that’s actually pretty sick. You got a discord channel ?
Fun fact: You can play with the gradient animation in detail if you do the Konami code on the stripe homepage.
Does anybody have any idea how to re-create stripe's "Modular Solutions" section? It's like connecting the icons, and when you hover over an icon, it shows its color.
can we get a tutorial for the wave effect of the stripe page
You do know an html elements can have multiple classes, right? You were using custom attributes when the semantic version of that appeared to be multi-classing to me.
(Code example:
A
B
.mainclass {
font-size: 5rem;
}
.mainclass.subclass {
color: red;
})
Cool effect! But for me the most amazing moment here was already 6:26. Kevin needs 2 seconds to realize that this weird offset is caused by collapsing margins. 2 seconds!
Hi, Kevin! Can you also take a look at the State of CSS 2022 survey? I found some many new properties and styling techniques I have never heard.
I already took some notes for future video ideas while going through it :D
💖
I was just looking at the stripe website not to long ago wondering how this was done lol
Ok i tried to implement this in a react app im working on but the canvas is super blocky and is literally 32x32 pixels. how do you get it to not do that? Neither the original codepen or this vid have it so blocky
if anyone runs into this, the solution was setting image-rendering: auto
I just checked the Stripe page, and apparently the images on the homescreen are made with HTML elements and aren't pictures
Is this easy to do? Maybe remaking this could be another video
I saw that too and was wondering why in the hell they'd bother with that, lol. An SVG and be done with it? Maybe someone was bored at work and had some time to kill, lol.
A audio warning when stuff like flashing images and so on appear would be nice i guess. Cuz I can imagine the people affected by it just looking away. And then they dont know when its over.
Mix blend?
13:29 Don't use innerText...
15:05 You can use rgba color?
you guess t is time? bro read the code you just pasted. R G B is red green blue, we animate every time recursively by asking it to run() everytime an animation frame is ready, t is affecting how much we change the colour between each frame. i cba to apply my brain more to figure out how this maths generates the colours and im bad at css3 gradiants and shit but u get the idea. for the typography and stripe code, 2 layers stacked to 0.3 is going to let some colour through, but colour + 2 stacked on grey will show less white bg through and look better. this all makes sense the moment i see it tbh
Nice debunking of a Wow effect U.I. 😄
It is created by Benjamin De Cock he is world's best designer developer and W3C member, his works are so inspiring