An insight into how you might handle a mouse click event in pure CSS. Imagine a hidden checkbox that has a ':checked' pseudo selector. You can trigger animations and show/hide other elements based on whether it's clicked. So it's very hacky but also very clever. Taking something like this to the extent of complexity seen here is insanely impressive.

Next step: hack NASA with CSS only. :D

7:35 The "body { background: black; } is probably the only line of CSS I understand

You know I LOVE this kind of stuff. I love the wild stuff people can do with checkboxes. Jamie Coulter makes my favorite in this genre!

The Duck and the Dog are possibly simply in the same div. And that is moved to the left and right with the duck's movement. That way the dog can't be anywhere but right where the duck was. ^^ (my guess.)

Well, great. I feel incredibly inept now. Great stuff as always! Was great getting to know you a bit at THAT Conference! Keep up the good work as always!

The trick with rock paper scissors with CSS only is that actually YOU decide what the opponent chooses. The labels for the corresponding states are exactly where you click for your choice and are animating their z-indices but look exactly the same, which is why you don't see the animation. I made a video on my channel explaining this in detail (in German).

Yo this is crazy, making this in css is true art...

the maze is the only one that I know precisely how to make, just 6 layers from z index 0 to 5: 0: background with no interaction bound to it 1: walls that onhover causes to remove display none from layer 4 2: win box with onhover to remove onhover on layer 3 3: win layer with onhover to keep layer 3 shown 4: lose layer with onhover to keep layer 4 shown 5: start box for removing onhover for layers 1234

Those who say it's not a programming language don't understand it. People say HTML isn't a programming language, so why can HTML + CSS, two non programming languages, write websites that are interactive? Great content as usual.

Sass is a stylesheet language that's compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

and I thought my tic-tac-toe in pure css was amazing

And then there is me, who can't center text in the middle of a div.

never gone this far into css, but im guessing that they are using number input for counting? idk i might be wrong. they might just calculate the count based on some how "counting" the checked checkboxes. maybe they use the css counter? like numbers? but based on checked checkboxes.

Of course, we love the CSS, one of the C family programming languages: C, C++, C#, CSS (C Sharp Sharp).

The dog knows where the duck is because it knows where it's not.

I remember how some frameworks like React or Vue (even better example, imo) were a shift from "imperative" to "declarative" paradigm. CSS is full-on declarative thing, if to think about it, so why not 😅

This reminds me of when people leveled characters in WOW without using armor. Just doing it the hard way to see if it could be done.

What an awesome video! I might have to leave my current computer science teacher's class and join Kevin's instead!! 😜😁

I’m such a css nerd but have no clue how some of these are made. Or when people draw with like one div? Love css and love this channel bc KPow loves css like I do. I nerd out

I still remember when people started making games in browsers using JavaScript. Now people are starting to make games in browsers without JavaScript :)

CSS depends on the browser and is not well documented. No, it isn't a programming language. How will as programer know know when to use style or container query on page elements that are part on DOM HTML structure? You teached us about this too.

These css games are mind blowing 😯😯

This is mind-blowing. I did not think any of these things was possible!

This is crazy. Must have taken ages for some of them.

The maze one I'm 100% sure is just :hover if you hover over pink elements the lose animation triggers and if you hover over the green box the win animation

Actually there is html pre-processes like .pug support inbuilt javascript so you need to check html.pug file which you clearly see javascript used in .pug file. There is some event can not build with javascript.😂

The duck game had JavaScript embedded in the html, you can see the const sprites statement in the video

amazing projects

Is CSS Turing complete? Can it run doom?

"A pure CSS horror" Yeah

Cascading Server Sheet!

Man, I made a Connect Four project a few years back and it took me forever to even get the method that checked for a win to work correctly. Then someone does it with just CSS and it looks and plays better than mine lol There's always someone better out there.

6:26 js in HTML?

for "the caretaker" you said you are interested in knowing how it works, but don't go to the inspect elements :D

I'm convinced that you can make anything in any language if you know it inside and out and are willing to spend countless hours on it.

I don't know if I'm the only guy notice that, how is it possible to handle collision detection for the space invader and which css property that can check if two stuffs matched like in the puzzle game. I don't know anything about codepen, but i still believe the javascript is inside the html, maybe I'm wrong.

I saw recently where someone created a Single Page Application (SPA) using only css for routing. What are your thoughts or how might you implement this? 🤔

I think it’d be nice to see your deep exploration of The Caretaker as a seed for explaining advanced css concepts

Hey Kevin. I’ve checked out your content from time to time, I didn’t realize you were in NS. I’m in Moncton. I frequent NS often. I’ll have to buy you a pint for some tips I’ve learned from you.

This is either a tough problem to solve or an exercise in mental health. Or both. Either way, impressive as heck.

12:20 maybe they use animation to "randomize" ? like animation is keep cycling thorough the checkboxes or radio buttons and you click on the current one, so its kinda random 13:11 i wanna try making this. tbh i just realized that i can make most of these, not even need that much css or html

I mean- you can code entire movie in assembly- but its not the right choice :D kudos to these guys and gals that made this interesting games tho :)

But can it run doom?

No-no. I don't play no maze game in the browser. Learned my lesson 15 years ago 😅

I'm guessing it knows if its in the right spot because it has the entire image from the URL

They are using frameworks to inject JS in HTML bro

Kevin can you create a playlist about Website features with CSS only which are usually controlled by JavaScript.

Invader Game! I remember my childhood :D

temani afif is a css wizard

CSS supply chain management is just the best

Are you saying duck hunt was just CSS??

Next should be centering a div

I feel like this is along the same lines as people who make games in Excel.

Really Amazing 🤩

Lighthouse 1 is using wave collapsing formula

Now we need DOOM in CSS only!

How to know if the object/shape is in the right square, might be easy, each tile or image essentially has the necessary info for position where it should end up. I'm thinking a 25 element array, the grid is then displayed as row column grid 5x5. That is the easy part, but after that i would be completely lost if this is CSS only as what i'm thinking would need would require updating the element, while i might be able to see and think how some of this stuff works works, honestly amazed as what people are able to pull off, might be proof there are aliens with super human brains far past a moron like me :) Best i can think of might be a css pattern that check the expected array slot and the given slot info on the element. I'd be curious for any tile is it in either the right slot or the same position on the screen, if one could drag the tile and place it anywhere on the screen before it is placed in the correct slot then i'm really at a loss, but then again i'm only a mere mortal 😊 Truly is amazing what some people create...

CSS is a programming language as much as a car is a kitchen appliance. You can sometimes cook eggs on the engine cover, but is not what was designed for.

Is it CSS-only or html + css. Can I do it with body tag only or use any random collection of html as base?

How it's done is the most interesting thing! Come on!

Is that SASS is powered by JavaScript?

Can these games have been generated with other programming languages and outputted in CSS?

i do not understand, if it has html is not css only, am i wrong?

Only CSS... and HTML. Clever stuff :D

You should create something super simple and make a tutorial so maybe we can start understanding a little bit about how these are made cause I don't have a clue.

For people who thinks this is 100% HTML and CSS. Actually some of the games have utilized JS which are hidden under script tag. So yeah this is not 100% no JS games

It is very intresting, but some of them are using const from JS. Now it could just be setting up 100's to 1000's of divs. Also to be fair most might not use any CSS at all. If HTMX was normal HTML, then these would be a heck of a lot easier and would need almost no CSS.

I guess that is the fun challenge.. to make the game with no JS. Cool

kevin gaming be like

Now I want to make a css game engine

6:55 what's that I see in the HTML? looks like JavaScript... not dismissing all of these, but I wouldn't say the Duck Hunt one is CSS-only

I invoke the GUY to do DOOM on css only

Is it Turing complete or not? You've got your answer there. End of story.

01:48 how to follow mouse in css?

It is impressive but "CSS-only"? I don't think that is 100% true...

Impressive! Try to format a plain numeric cell value with a thousand separator in css! Not possible!

But.. it's not lure css, is it?

Cool games, but some of them seem to be simple to make: Duck - animate two divs in two directions and it's done. Carnival - very simple. The last maze can be done with a single clip-path.

Those are … 😮🤯 absolutely and definitely a programming language

This man is slowly turning css into a programming language 😂

I've seen people making games with Excel why would CSS not be able to make games?

Wow. Just wow.

I’ll be impressed when someone makes doom with CSS.

Here we go again!!

I wonder what does on inside the brain of a backend developer when they watch such video

CSS is really amazing

This tells you how insane people could be 🙂

My brain would melt when trying to attempt any of these lol

next step: remake Minecraft 1:1 with CSS

Next video: They said HTML is not a programming language

Meanwhile, I'm trying to center a div.

What the hell ain't no way 😮

Next up: Make your own chat gpt with html and bootstrap 😂

6:15 "How do you do that?" then immediately minimizes the code panel. We're a source viewing people, sir.

كأنك تحفر خندقا بملعقة قهوة!

Damn you frontend devs

i guess to them people numbers has nothing to do with math and a sphere is flat

Declarative programming

Inspirational, epic, and mind blowing. I'm going outside to play with rocks now.