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.
@EvilTim19116 ай бұрын
Yeah and also focus and focus-within are a way to have a sort of "state" using only CSS
@c-eagle7 ай бұрын
Next step: hack NASA with CSS only. :D
@dand44857 ай бұрын
Is that so you can get on the rocket going around the moon...? Then again if you can hack it... Would you feel save you won't be going up in a large Roman Candle only to go POOF!
@c-eagle7 ай бұрын
@@dand4485 On the bright side: you could style the moon any way you want! background-color: pink!
@dand44857 ай бұрын
@@c-eagle Why pink? Why not do a gradient rainbow? That way we can remember God's promise not not flood the earth with water... Scary thing though, He mentions next time will be with fire...
@PickleNugget-tk6bw6 ай бұрын
Do you know what code is?
@dand44856 ай бұрын
@@PickleNugget-tk6bw sorry i don't know what code is, i know asm, C, C++, C#, VB, Cobol (love them 77 and 88 level variables), java/typeshit, and a few more some i've written, but i don't know what code is.
@carstenaltena6 ай бұрын
7:35 The "body { background: black; } is probably the only line of CSS I understand
@ScrollingWithUs6 ай бұрын
What does it do even ?
@mythicvibesmusic6 ай бұрын
@@ScrollingWithUs lol
@TrostCodes7 ай бұрын
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!
@commanderkruge7 ай бұрын
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.)
@QwDragon7 ай бұрын
Same thoughts.
@Jesus01906 ай бұрын
It seems the JavaScript is just in the HTML part...
@ssava_ema6 ай бұрын
it is not anywhere go visit the code pens for the different games @@Jesus0190
@jlmx7 ай бұрын
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!
@ScriptRaccoon7 ай бұрын
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).
@millos01167 ай бұрын
Yo this is crazy, making this in css is true art...
@deathmarti7 ай бұрын
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
@chrisakaschulbus49036 ай бұрын
But that does not explain how he is kept from consuming the child.
@gregmurdoch32646 ай бұрын
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.
@kantottero38316 ай бұрын
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.
@youtube-user734246 ай бұрын
So it's created in SASS , which is easier to do, amd the output is CSS? Could that also be done with other languages like python or whatever?
@raggebatman6 ай бұрын
@@youtube-user73424 You could create a Python module to interface with a CSS stylesheet I guess; that's possible using most programming languages, although it's a little silly
@westbrook08536 ай бұрын
Chat GPT 🤣
@youtube-user734246 ай бұрын
@@westbrook0853 good idea! 😀
@youtube-user734246 ай бұрын
@@westbrook0853 or Bard might be better
@majkipl96847 ай бұрын
and I thought my tic-tac-toe in pure css was amazing
@melonenlord27236 ай бұрын
And then there is me, who can't center text in the middle of a div.
@nomadshiba6 ай бұрын
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.
@martink.74976 ай бұрын
Of course, we love the CSS, one of the C family programming languages: C, C++, C#, CSS (C Sharp Sharp).
@alexjones4207 ай бұрын
The dog knows where the duck is because it knows where it's not.
@mityukov7 ай бұрын
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 😅
@PeterSedesse6 ай бұрын
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.
@Coding4Success6 ай бұрын
What an awesome video! I might have to leave my current computer science teacher's class and join Kevin's instead!! 😜😁
@clevermissfox7 ай бұрын
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
@tomaskot92786 ай бұрын
I still remember when people started making games in browsers using JavaScript. Now people are starting to make games in browsers without JavaScript :)
@vilijanac7 ай бұрын
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.
@ScriptRaccoon6 ай бұрын
"is not well documented" is not true. You can read the CSS spec which is very detailed.
@uzuigwedanielugochukwu68446 ай бұрын
These css games are mind blowing 😯😯
@jhasani797 ай бұрын
This is mind-blowing. I did not think any of these things was possible!
@SquareballoonCoUk6 ай бұрын
This is crazy. Must have taken ages for some of them.
@Default64Bit6 ай бұрын
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
@creativeprogrammer28486 ай бұрын
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.😂
@yyydollars84564 ай бұрын
The duck game had JavaScript embedded in the html, you can see the const sprites statement in the video
@Electroboy3006 ай бұрын
amazing projects
@DiamondWolfX6 ай бұрын
Is CSS Turing complete? Can it run doom?
@bdnugget6 ай бұрын
"A pure CSS horror" Yeah
@mintx17206 ай бұрын
Cascading Server Sheet!
@elimcfly3506 ай бұрын
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.
@aladdinalmasabli43826 ай бұрын
6:26 js in HTML?
@danielzaiser6 ай бұрын
for "the caretaker" you said you are interested in knowing how it works, but don't go to the inspect elements :D
@wolandsmachine6 ай бұрын
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.
@watchmytvjctechnology84486 ай бұрын
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.
@jlambert120135 ай бұрын
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? 🤔
@toddcamnitz61646 ай бұрын
I think it’d be nice to see your deep exploration of The Caretaker as a seed for explaining advanced css concepts
@scottfrost3176 ай бұрын
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.
@rafalpotasz6 ай бұрын
This is either a tough problem to solve or an exercise in mental health. Or both. Either way, impressive as heck.
@nomadshiba6 ай бұрын
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
@inkco4206 ай бұрын
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 :)
@hothgangster56 ай бұрын
But can it run doom?
@dvorszkydavid91406 ай бұрын
No-no. I don't play no maze game in the browser. Learned my lesson 15 years ago 😅
@freewheelburning88346 ай бұрын
I'm guessing it knows if its in the right spot because it has the entire image from the URL
@studdiougrym56336 ай бұрын
They are using frameworks to inject JS in HTML bro
@hamza_hasnat_hbk6 ай бұрын
Kevin can you create a playlist about Website features with CSS only which are usually controlled by JavaScript.
@ZeldaScott256 ай бұрын
Invader Game! I remember my childhood :D
@joebazooks7 ай бұрын
temani afif is a css wizard
@supercompooper6 ай бұрын
CSS supply chain management is just the best
@euphoniumist6 ай бұрын
Are you saying duck hunt was just CSS??
@kaponyamartin5726 ай бұрын
Next should be centering a div
@silentshadow8676 ай бұрын
I feel like this is along the same lines as people who make games in Excel.
@UweMadej7 ай бұрын
Really Amazing 🤩
@England916 ай бұрын
Lighthouse 1 is using wave collapsing formula
@thebizounator5 ай бұрын
Now we need DOOM in CSS only!
@dand44857 ай бұрын
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...
@robertlisaru6 ай бұрын
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.
@lilbahr6 ай бұрын
Is it CSS-only or html + css. Can I do it with body tag only or use any random collection of html as base?
@noel.friedrich6 ай бұрын
No its specific html
@janoschii6 ай бұрын
How it's done is the most interesting thing! Come on!
@HikaruAkitsuki6 ай бұрын
Is that SASS is powered by JavaScript?
@youtube-user734246 ай бұрын
Can these games have been generated with other programming languages and outputted in CSS?
@rodrigovianna4706 ай бұрын
i do not understand, if it has html is not css only, am i wrong?
@awekeningbro12076 ай бұрын
Yes you are. By CSS only, they mean without js, because usually it's JavaScript that's responsible for all sorts of interactivity on a web page, not CSS. Html is just the bare metal.
@andynn66916 ай бұрын
Only CSS... and HTML. Clever stuff :D
@CristianKirk6 ай бұрын
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.
@RaghavanRave-eq2lu6 ай бұрын
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
@deatho0ne5877 ай бұрын
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.
@ScriptRaccoon6 ай бұрын
Nope. What you saw is Pug syntax. It compiles down to HTML. Pug extends HTML by some nice features. Writing it directly with HTML is possible but more cumbersome. It's analogous to Sass. Compiles down to CSS which is harder to write directly (in these examples).
@deatho0ne5876 ай бұрын
Looked at it seems sort of like PHP or Smarty, since you can code it up. As I said though, it was mostly for not having to write 100s of div's by hand which I 100% understand.
@kpm256 ай бұрын
I guess that is the fun challenge.. to make the game with no JS. Cool
@ninjacodertech6 ай бұрын
kevin gaming be like
@stio_studio6 ай бұрын
Now I want to make a css game engine
@raphaelmorgan23076 ай бұрын
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
@ScriptRaccoon6 ай бұрын
It's Pug syntax. It compiles down to HTML. Pug extends HTML by some nice features. Writing it directly with HTML is possible but more cumbersome. It's analogous to Sass.
@EmanuelLopesS26 ай бұрын
I invoke the GUY to do DOOM on css only
@HoSza16 ай бұрын
Is it Turing complete or not? You've got your answer there. End of story.
@RandomGeometryDashStuff6 ай бұрын
01:48 how to follow mouse in css?
@stupid4President6 ай бұрын
It is impressive but "CSS-only"? I don't think that is 100% true...
@vladyslavstadnyk27626 ай бұрын
I believe it's not even close
@peterhorvath68596 ай бұрын
Impressive! Try to format a plain numeric cell value with a thousand separator in css! Not possible!
@vladyslavstadnyk27626 ай бұрын
But.. it's not lure css, is it?
@QwDragon7 ай бұрын
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.
@RobertMcGovernTarasis7 ай бұрын
Those are … 😮🤯 absolutely and definitely a programming language
@Defini36 ай бұрын
This man is slowly turning css into a programming language 😂
@InnerEagle6 ай бұрын
I've seen people making games with Excel why would CSS not be able to make games?
@molotovtiel6 ай бұрын
Wow. Just wow.
@s3rverlord6 ай бұрын
I’ll be impressed when someone makes doom with CSS.
@niraj.chaurasiya7 ай бұрын
Here we go again!!
@awekeningbro12076 ай бұрын
I wonder what does on inside the brain of a backend developer when they watch such video
@hamza_hasnat_hbk6 ай бұрын
CSS is really amazing
@mohammadyahyaq6 ай бұрын
This tells you how insane people could be 🙂
@mannixmd7 ай бұрын
My brain would melt when trying to attempt any of these lol
@pje_6 ай бұрын
next step: remake Minecraft 1:1 with CSS
@_GhostMiner5 ай бұрын
Next video: They said HTML is not a programming language
@juliohintze5957 ай бұрын
Meanwhile, I'm trying to center a div.
@UmidBek0056 ай бұрын
What the hell ain't no way 😮
@rayyanabdulwajid76817 ай бұрын
Next up: Make your own chat gpt with html and bootstrap 😂
@MattSeremet6 ай бұрын
6:15 "How do you do that?" then immediately minimizes the code panel. We're a source viewing people, sir.
@ilyriadjaajdairyli63526 ай бұрын
كأنك تحفر خندقا بملعقة قهوة!
@zachariusd64736 ай бұрын
Damn you frontend devs
@Only_Some6 ай бұрын
i guess to them people numbers has nothing to do with math and a sphere is flat
@chrisray96536 ай бұрын
Declarative programming
@lewisone7 ай бұрын
Inspirational, epic, and mind blowing. I'm going outside to play with rocks now.