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)
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 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!
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.
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.
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 :)
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.
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 ?!
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.
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.
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 🥰
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.
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, cheers from méxico. thank so much for your videos. can you explain if we can make a functional simple page to sell? maybe a static html site like an ecommerce page?
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!
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.
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?
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?
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; })
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
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?
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.
As Siddiq mentioned, JS is *far* from my strength, and on top of that, I wasn't really worrying about anything other than getting it working, so the two together resulted in that :D
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.
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
CSS never ceases to amaze me, the amount of things you can make with it, the only limitation is your curiosity
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.
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).
I love how u told us in the beginning for the flashing lights. I felt like being cared for ❤
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.
As a beginner this video blew my mind, thanks Kevin, please keep doing this kind of videos.
You're an absolute beast !
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!
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.
I always learn so much from these videos, Kevin is goated
Thank you for making CSS accessible for the younger generation of developers!
Very useful to see how you approach this, Kevin.
Nice last few month I am hooked to the animations
Great problem solving skills. Great way of testing your css knowledge by trying to apply real world effects like these
Beautiful! You're a true wizard Kevin. I will definately use this somewhere!
Wow, that was basically what I expected it to be.
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.
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 :)
Man, I really appreciate you making videos like this. Great work 👏
Really fun video Kevin! Hope to see more real world CSS reverse engineered!
Very clever solution!
I like the new layout. Also, thanks for the flash warning :)
Wow! Really like your content and how you presenting it. Thank you!
I would love to see such amazing contents....great stuff ❤️❤️
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.
Thank you for your video! Please keep making this sort of videos.
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 ?!
Loved the new setup 👍
Thank you Kevin, I found this impressive and inspiring.
Loved this type of video!
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.
Love it, please make more!
I would love a series on this where we look at cool effects of different websites and reverse engineer the,
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!! 😀
Cool thanks I don't know about the others but I really want this type of videos
Loved it! Need more like this🤤
Sooo cool. I love this... do more of these real page tries
Yes, more like this please.
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 🥰
Absolutely amazing
Entertaining episode. And, it looks so easy when you do it ;)
Brilliant! Thanks!
Amazing content as usual. Aweome work Kevin!
Wow, great video!
Loved this video, would love to see more like this!
Thank you Kevin
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?
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.
great video!
PLEASE DO THE STRIPE MOCKUP ANIMATION CSS !!!!
No one has ever even tried to explore that AREA in the STRIPE website
do you have a video on isolate? was the only bit I didn't understand 😕
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.
Thanks!
Love it❤
very cool! thanks a lot.
Fun fact: You can play with the gradient animation in detail if you do the Konami code on the stripe homepage.
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!
Amazing content!
This example is really cool can you make a video on css tricks home page there page grid layout is really awesome
Thanks a lot
Really cool! 'canvas' is new to me tho .. 🤔
wow hahah this is super cool
hi, cheers from méxico. thank so much for your videos. can you explain if we can make a functional simple page to sell? maybe a static html site like an ecommerce page?
AMAZING!, Really love this video. Pls Pinterest Home Page Effect 🥺❤️
What about the epay, can you do that as well I'm trying to practice the stripe's page for my project
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!
It is created by Benjamin De Cock he is world's best designer developer and W3C member, his works are so inspiring
Thanks ❤️
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.
Brilliant @
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?
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?
sir, one day i'm going to meet you. You are awesome as CSS
greattt!!!
Please show us how they did the navigation menu.
Dude that’s actually pretty sick. You got a discord channel ?
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;
})
Why do you but the * selector on the pseudo-elements.? I thought that the * selector works for all the elements, even the pseudo-elements.
can we get a tutorial for the wave effect of the stripe page
cool
I was just looking at the stripe website not to long ago wondering how this was done lol
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
Yeah, it's called "Inspect element"
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?
hi sir what application did you use to really automaticall rrload your design?like on your right side? im curious😶
cool !!!!!!!!!
13:29 Don't use innerText...
15:05 You can use rgba color?
Nice debunking of a Wow effect U.I. 😄
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 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.
for(var/let x=0;...) fix it too, and with better scope.
Agreed, I don't know why he went to declare them globally.
@@wlockuz4467 he is not good at js, he mentions it all the time
As Siddiq mentioned, JS is *far* from my strength, and on top of that, I wasn't really worrying about anything other than getting it working, so the two together resulted in that :D
@@KevinPowell Fair enough, appreciate the reply :)
Mix blend?
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.
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.
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
Using glsl for the linear color is better😂