When you accidentally make something awesome

[@yourDecisi0n]

He discovered gamma rays in CSS

[@dinoscheidt]

💀 looks great

[@ilikegeorgiabutiveonlybeen6705]

demon core when

[@MozzyFX]

I really like this "unplanned" content. It's useful to see your live thoughts and ideas

[@pokefreak2112]

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

[@jfftck]

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.

[@Micsc]

"when it works, don't touch it"

[@NickCombs]

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.

[@LorenzoDeNato]

Seems a lot something that hyperplexed would use well

[@RayAndrewsDev]

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

[@carson7146]

New title: " How to teach yourself to code by trial and error" 💯💖 Awesome effects though! Thanks for sharing!! ❤🎉

[@LePhenixGD]

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!

[@kimberlyjacobsen4148]

No mistakes . Just happy little accidents ☺️ Gotta love that Bob Ross

[@b3rgundy]

The blending modes are also in nearly every Adobe product: I recommend searching for their documentation to get some details on how they work.

[@tannercottle]

accidentally creates a controlled Siri animation

[@officialbfi01]

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!

[@NOALNOM]

Thanks for your curiosity, love your videos Kev 💪🤓

[@Varieties_1]

Man that's a lot of beautiful craziness LOL

[@samirmulla8176]

Thanks for creating this amazing videos🎉🎉🎉🎉

[@erikfries]

Love your enthusiasm!

[@leechurchill1965]

What CAN'T you do with CSS?

[@efari]

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

[@Someone-comment]

@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

[@RagHelen]

Like Max Planck inventing quantum mechanics by accident.

[@RobertMcGovernTarasis]

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.

[@farhanmemon1283]

Looks fascinating 😍

[@SamInNZ]

It reminds me of the HomePod Siri animation. Particularly if you change background to white and change back to color-dodge?

[@darrencaai2225]

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?

[@dylaninthemovies]

When you get an ad for wix studio at the beginning of one of Kevin's videos...

[@QwDragon]

Maybe I can solve (i.e. hack) problem with position stycky. At least, I'll try.

[@MrQuickLine]

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

[@ep4r4]

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.

[@virtual5754]

It is beach ball. Very fuzzy, but still visible. It rolls and shows different colors from each side

[@wizzbitgxs]

Most great inventions are accedentally ;)

[@vaughanprint]

XFiles Kevin, admit it. You were a fan back in the day.

[@ralphstube]

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.

[@EdwinMartin]

Nobody will notice it’s 1ms faster 😉

[@amirhasanitachi5521]

It was really nice thanks🤗🤗

[@igordasunddas3377]

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?

[@minhdung3532]

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

[@Benprod56]

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.

[@diwanshuji947]

We can put opacity to cursor and it makes nebulla like structure

[@sharkinahat]

The Slow Mo Guys just put up a video of a CD in a microwave... looks exactly the same as what Kevin did.

[@gevor3338]

Hey Kevin, is there any way I can get the code for the card? I really liked it

[@scuderia6272]

This channel makes me feel I never learned CSS😅

[@geHuC]

Side note, Just realized it is 'Hi there, my frontend friends' and not 'Hi there, my friend and friends' 😮

[@nateonmission]

WAIT! Is that what he's really saying?! I heard 'Hi there, my friend and friends' too! 🤦‍♂

[@ArtyomStouch]

Thanks Keviv, it`s good tricks.

[@methic-w1l]

The Newton of CSS.

[@domsau2]

Hello. Nice UFO image! ;-) Thanks.

[@TheMightyAtomNL]

What's this editor called? It's not Visual Studio Code is it?

[@JosephCodette]

It’s codepen , online editor

[@RobertMcGovernTarasis]

@@JosephCodette indeed, discovered today there is an alternative to it called Web Maker App (I wanted an offline codepen)

[@denizorsel1029]

It is beautiful.

[@SwayamBrahmbhatt]

help me I'm being held hostage

[@wolfphantom]

"Color Burn" and "Color Dodge" are things you used in other applications like Photoshop. This is a pretty technical explanation of how it works. kzbin.info/www/bejne/jZWllmt7p6etj9U

[@Android480]

You could solve the first problem with JS, though it wouldn’t be fun

[@anubislockward3750]

It's not a bug...it's a feature

[@sercan272727]

This looks like siri icon

[@frosty8104]

Colour changing sphere :)

[@andreroodt4647]

Yeah right, you "accidentally" made this. Did anyone else notice the chemtrails in the background? 😉😜

[@henolivares]

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

[@ThomasMYoutube]

This is awesome! I'm an aspiring junior developer from the UK: what technologies would you reccomend learning for front end development in 2024?

[@lasarkolja9692]

HTML, CSS & JavaScript 😃

[@natescode]

HTML, CSS and JS obviously. But look at your local market! People Always ask this and ignore what companies are hiring for

[@KevinPowell]

@natescode nailed it, look at local job postings and see what's in demand, it can be drastically different from one place to another :)

[@rayyanabdulwajid7681]

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

[@eugenenepomnyaschy]

It’s Siri effect

[@lowEndAppsAndGames]

you to g man

[@RodrigoNishino]

Neat

[@shanappy7041]

Second