Cool effect! One tip I can give regarding blend modes is that you can use gimp/photoshop etc. to quickly prototype the effect you're going for before jumping into CSS or shaders. Opacity is also very useful as it lets you tone down the intense blend modes like color dodge. If you wanna get technical Wikipedia also has an article on blend modes you can use to actually understand what's going on at the mathematical level :)
The jumping div was because you needed a pointer-events: none on the block. When the block is moved under the cursor, that changes the mouse position based on the blocks inner coordinates.
That would be very nice as a reposition-on-scroll animation, sort of like a firefly than moves to direct your attention to a call-to-action or headline on a new area of content
Amazing stuff as always ! Btw you remind me of back when I was creating a small paint webapp and I added blur + high contrast filters to the canvas itself and it gave a trippy and cool looking effect! Experimenting really make you grow as a dev!
@Kevin Powell I have a CSS question for a problem that I couldn't find a solution for. If you have a child div with position 'Fixed', its position will be relative to 'body' regardless of the position of the parent div. But when you apply transformation to the parent, for example "traslateX", the fixed position div will no longer have the position attached to the body, but will change to be relative to the parent (with transformation property). The reason, as you know, is that the context of the fixed layer is affected and belongs to the parent layer. Do you know a solution to keep the fixed layer position the same relative to the body, if that is even possible? I'm not looking for 'hack' solutions to simulate the reverse effect, such as if moving the transformed parent to the right and then moving the solid layer to the left, or moving the fixed child div outside the parent, or similar solutions. I need a solution, if it exists, to keep the dom unchanged and the fixed position behavior the same. Thank you
That is so very kewl. I'm playing with CSS but not sure where to go to have community feedback. When you create/develop a new CSS technique, where do you go to have others front end developers vet your experiments?
That was great, and a good reminder to experiement. Must do it more than just trying to build out Frontend Mentor challenges. Wondering about using a mix of what you done and an effect I saw for making merging "glob" circles to make a sort of Lava Lamp animation in CSS.
Estos son los experimento que valen la pena publicar, sigue asi! En mi caso algo parecido me sucedió donde se requería que un componente de React convivieran en una página de Wordpress con elementos de Elementor Pro y pues lo logré experimentando.
Something I've found playing around with this is that it overlays on top of other page elements, meaning stuff like buttons become unclickable. It seems to be related to ::before's aspect-ratio and ::after's inset, however sadly I am not sure how to fix this. z-index does not seem to work and most of the changes tried either has no effect or breaks the effect :P pointer-events set to none does allow for the user to click through the event, however the effect still overlays. A very cool effect standalone though!
Man, the cards in a proper application in a more subtitle way would look cool. Also the gradient is nice, too, though animation-timeline is from what I remember from one of your other videos only available in the very recent version of Chrome?
I bet if you used oklch you could set the l for all your gradient colors to the same and as long as the background color had a lower l value it would probably be fine
Hi ! I really like how you turn your tutorials like a story. I do have an issue as a frontend developer. Could you make a video about blurs animations and issue performance and how to solve this issue. I tried many solutions but not as expected at the end. Thanks a lot.
"Color Burn" and "Color Dodge" are things you used in other applications like Photoshop. This is a pretty technical explanation of how it works. ruclips.net/video/WdBe8ErBzYs/видео.html
Html, css, javascript are mandatory. Then , you have to go ahead with javascript framework (pick any one framework). I suggest you to go ahead with react js. But make sure to build a lot of small projects with html, css and javascript before you move on to a javascript framework like react js
![Gunna - HIM ALL ALONG [Official Visualizer]](http://i.ytimg.com/vi/HiCxoDeo0hc/mqdefault.jpg)
He discovered gamma rays in CSS
💀 looks great
demon core when
I really like this "unplanned" content. It's useful to see your live thoughts and ideas
Cool effect! One tip I can give regarding blend modes is that you can use gimp/photoshop etc. to quickly prototype the effect you're going for before jumping into CSS or shaders. Opacity is also very useful as it lets you tone down the intense blend modes like color dodge.
If you wanna get technical Wikipedia also has an article on blend modes you can use to actually understand what's going on at the mathematical level :)
The jumping div was because you needed a pointer-events: none on the block. When the block is moved under the cursor, that changes the mouse position based on the blocks inner coordinates.
Seems a lot something that hyperplexed would use well
"when it works,
don't touch it"
That would be very nice as a reposition-on-scroll animation, sort of like a firefly than moves to direct your attention to a call-to-action or headline on a new area of content
The way you can do this effect on white is by switching the burn to dodge and changing the cursor shape fill to 50% gray or darker.
New title: " How to teach yourself to code by trial and error" 💯💖
Awesome effects though! Thanks for sharing!! ❤🎉
Thanks for your curiosity, love your videos Kev 💪🤓
Amazing stuff as always !
Btw you remind me of back when I was creating a small paint webapp and I added blur + high contrast filters to the canvas itself and it gave a trippy and cool looking effect!
Experimenting really make you grow as a dev!
No mistakes . Just happy little accidents ☺️
Gotta love that Bob Ross
Love your enthusiasm!
Thanks for creating this amazing videos🎉🎉🎉🎉
Man that's a lot of beautiful craziness LOL
Looks fascinating 😍
The blending modes are also in nearly every Adobe product: I recommend searching for their documentation to get some details on how they work.
@Kevin Powell
I have a CSS question for a problem that I couldn't find a solution for.
If you have a child div with position 'Fixed', its position will be relative to 'body' regardless of the position of the parent div.
But when you apply transformation to the parent, for example "traslateX", the fixed position div will no longer have the position attached to the body, but will change to be relative to the parent (with transformation property).
The reason, as you know, is that the context of the fixed layer is affected and belongs to the parent layer.
Do you know a solution to keep the fixed layer position the same relative to the body, if that is even possible?
I'm not looking for 'hack' solutions to simulate the reverse effect, such as if moving the transformed parent to the right and then moving the solid layer to the left, or moving the fixed child div outside the parent, or similar solutions. I need a solution, if it exists, to keep the dom unchanged and the fixed position behavior the same.
Thank you
That is so very kewl. I'm playing with CSS but not sure where to go to have community feedback. When you create/develop a new CSS technique, where do you go to have others front end developers vet your experiments?
Like Max Planck inventing quantum mechanics by accident.
you can work with a white background, but for that you need your cursor's blob to be black, and then use color-dodge instead of color-burn
That was great, and a good reminder to experiement. Must do it more than just trying to build out Frontend Mentor challenges. Wondering about using a mix of what you done and an effect I saw for making merging "glob" circles to make a sort of Lava Lamp animation in CSS.
It is beach ball. Very fuzzy, but still visible. It rolls and shows different colors from each side
Most great inventions are accedentally ;)
Estos son los experimento que valen la pena publicar, sigue asi! En mi caso algo parecido me sucedió donde se requería que un componente de React convivieran en una página de Wordpress con elementos de Elementor Pro y pues lo logré experimentando.
It was really nice thanks🤗🤗
accidentally creates a controlled Siri animation
When you get an ad for wix studio at the beginning of one of Kevin's videos...
XFiles Kevin, admit it. You were a fan back in the day.
Something I've found playing around with this is that it overlays on top of other page elements, meaning stuff like buttons become unclickable. It seems to be related to ::before's aspect-ratio and ::after's inset, however sadly I am not sure how to fix this. z-index does not seem to work and most of the changes tried either has no effect or breaks the effect :P pointer-events set to none does allow for the user to click through the event, however the effect still overlays. A very cool effect standalone though!
Hello. Nice UFO image! ;-) Thanks.
Man, the cards in a proper application in a more subtitle way would look cool. Also the gradient is nice, too, though animation-timeline is from what I remember from one of your other videos only available in the very recent version of Chrome?
It is beautiful.
It reminds me of the HomePod Siri animation. Particularly if you change background to white and change back to color-dodge?
I bet if you used oklch you could set the l for all your gradient colors to the same and as long as the background color had a lower l value it would probably be fine
This channel makes me feel I never learned CSS😅
Thanks Keviv, it`s good tricks.
Hi ! I really like how you turn your tutorials like a story. I do have an issue as a frontend developer.
Could you make a video about blurs animations and issue performance and how to solve this issue.
I tried many solutions but not as expected at the end.
Thanks a lot.
The Slow Mo Guys just put up a video of a CD in a microwave... looks exactly the same as what Kevin did.
What CAN'T you do with CSS?
We can put opacity to cursor and it makes nebulla like structure
The Newton of CSS.
Maybe I can solve (i.e. hack) problem with position stycky. At least, I'll try.
You could solve the first problem with JS, though it wouldn’t be fun
Hey Kevin, is there any way I can get the code for the card? I really liked it
Colour changing sphere :)
Hi mr Kevin, your video very good. But Telegram latest update have special delete animation so smooth, can you made like that? Hope you reply
Side note, Just realized it is 'Hi there, my frontend friends' and not 'Hi there, my friend and friends' 😮
WAIT! Is that what he's really saying?! I heard 'Hi there, my friend and friends' too! 🤦♂
As far as I can see, getElementById is 3-5 times faster than querySelector - so I'm using IDs for JS and leaving classes and attributes for styling.
Nobody will notice it’s 1ms faster 😉
bro was justing testing! chill out 1ms
Yeah right, you "accidentally" made this. Did anyone else notice the chemtrails in the background? 😉😜
help me I'm being held hostage
What's this editor called? It's not Visual Studio Code is it?
It’s codepen , online editor
@@JosephCodette indeed, discovered today there is an alternative to it called Web Maker App (I wanted an offline codepen)
It's not a bug...it's a feature
"Color Burn" and "Color Dodge" are things you used in other applications like Photoshop. This is a pretty technical explanation of how it works.
ruclips.net/video/WdBe8ErBzYs/видео.html
This looks like siri icon
you to g man
It’s Siri effect
This is awesome! I'm an aspiring junior developer from the UK: what technologies would you reccomend learning for front end development in 2024?
HTML, CSS & JavaScript 😃
HTML, CSS and JS obviously. But look at your local market! People Always ask this and ignore what companies are hiring for
@natescode nailed it, look at local job postings and see what's in demand, it can be drastically different from one place to another :)
Html, css, javascript are mandatory. Then , you have to go ahead with javascript framework (pick any one framework). I suggest you to go ahead with react js. But make sure to build a lot of small projects with html, css and javascript before you move on to a javascript framework like react js
Hey i was checking out your courses and see CSS Demystified and beyond css so I'm not sure what would best or the difference between them
Neat
Second