The `scale:` property worked for me because I had the Experimental Web Platform features flag turned on in Chrome. It is supported in Firefox and Safari, but still behind a flag in Chrome as they work out performance issues from the bug reports I looked at. If you'd like to enable it, you can find the flag by going to chrome://flags and searching for it in the search that shows up.
@michaeleggert4401
2 жыл бұрын
Did. D him lol
@gaetanvitrac4179
2 жыл бұрын
Hey ! if you work with degrees a circle is 360°, you have 8 circle then each circle must be at 45° from each other (8 * 45° = 360). Then u can use sin() and cos(), basically sin() gives u the distance on the Y axes and cos() on the X axes, your translate will be : translate( (15 * cos(45 * i)) rem , (15 * sin(45* i) rem) where i is the number of the circle you are curently looping on !
@fenandamilanda2032
2 жыл бұрын
@@gaetanvitrac4179 yeah and maybe you could just use sin and cos to change their position changing their angle bit by bit based on the speed you want to rotate it at
@MsAnnieHuang
2 жыл бұрын
The 'rotate' as well in 45:29 as well. It required the Experimental Web Platform flag to turn on
@AirforcLuckyThirteen
2 жыл бұрын
Hey Kevin, your videos actually helped me go from "I wish I was writing JS" to "This is not so bad" when talking about CSS, thanks again for making them!
@KevinPowell
2 жыл бұрын
So happy to hear that!
@kenbee85
2 жыл бұрын
Man, you really inspire me as a frontend dev. Anything that I don't know or forgot I would always go to your channel. Thank you so much Kevin
@JuanMoisesTorrijos
2 жыл бұрын
After googling: how to find the coordinates of a point on a circle, I noticed that to get the position of the translate property for the even lis, you need to multiply the radius by 0.707 (which is the sin of 45º). So, it would be 15rem * 0.707 = 10.605rem. 🤓
@manneg
2 жыл бұрын
you can get the same answer through the pythagorean theorem. x^2 + x^2 = 15^2 x^2 = (15^2)/2 x = ((15^2)/2)^0.5 = 10.61
@amandinelevecq6664
2 жыл бұрын
@@manneg Pythagorean is working only because there are 8. The general way is to use trigonometry. 12rem*cos(360/8*n) for the X, where 8 is the nomber of circles you want to place. For Y, it is the same formula but with sin instead of cos.
@manneg
2 жыл бұрын
@@amandinelevecq6664 well, yes. In this case i was just showing that you don't need trigonometry to figure out the right answer. This was the solution that immediately came to mind so I thought I'd share.
@julianvarga
2 жыл бұрын
15/sqrt(2)
@davelordy
2 жыл бұрын
_"how to find the coordinates of a point on a circle"_ x = (cos(angle) * some multiplier depending on how big you want the circle to be) + origin x. y = (cos(angle) * some multiplier depending on how big you want the circle to be) + origin y.
@HamzaChelbat
2 ай бұрын
Great video Kevin! To position the circles around the image, I came with this solution: CSS: .container { --outline-radius: 400px; width: calc(var(--outline-radius) * 2); aspect-ratio: 1; border-radius: 50%; background: lightcoral; position: relative; .item { --item-radius: 100px; width: calc(var(--item-radius) * 2); aspect-ratio: 1; border-radius: 50%; background: lightblue; position: absolute; display: grid; place-content: center; left: calc((var(--outline-radius) - var(--item-radius)) + ((var(--outline-radius) - var(--item-radius)) * sin((var(--position) - 1) * (360deg / var(--quantity))))); bottom: calc((var(--outline-radius) - var(--item-radius)) + ((var(--outline-radius) - var(--item-radius)) * cos((var(--position) - 1) * (360deg / var(--quantity))))); } } HTML: 1 2 3 4 5 6 7 8 With this solution, no need to had-coding and the items are positioned in a perfect circle. I enjoyed the challenge very much. Thanks for your great job.
@seeds.ffmpeg
2 жыл бұрын
I've watched so many of your videos so far, I'm the frontend developer I am today because of your channel, thank you so much. I finally enjoy and love coding CSS.
@KevinPowell
2 жыл бұрын
Great to hear!
@siddharthshekhar6786
2 жыл бұрын
To arrange the items in a perfect circle, instead of hardcoding magic numbers in translate(), we could use rotations, which allows us to even have an arbitrary number of items! $item-count: 8; @for $i from 1 through $item-count { $angle: (360deg / $item-count) * $i; .item:nth-child(#{$i}) { transform: translate(-50%, -50%) rotate(calc(-1 * #{$angle})) translate(15rem) rotate(#{$angle}); } } The first "translate" is just for centering. The magic happens in the remaining 3 transforms: The first "rotate" causes the X axis itself to be rotated. So, the subsequent "translate" now moves the element not horizontally, but along the angle by which we rotated! With this, the element is now at the right location, but it still looks rotated. So the last "rotate" is opposite to the first one - now the element visually has no overall rotation! Sandwiching the "translate" between two opposite rotations this way allows us to translate along any direction with a fixed distance. Using "translate" without the two "rotate"s would require us to know the exact X and Y distances to translate with, which can only be calculated using cos() and sin().
@KevinPowell
2 жыл бұрын
cos() and sin() are on their way to CSS, and I could have done this with Sass, if I'd had any idea about how to actually do it, lol.
@azzen_v
2 жыл бұрын
you can do several translates on one transform? I didnt know that, that is awesome!
@LadyLexyStarwatcher
2 жыл бұрын
For those wondering, ~10.61 is the value you want to rotate on the 45 degree items. Though my self I would love to see this in a loop like like shown here. I have a strong tenancy to want to generalize and hardcore nothing.
@yordanpopov7080
2 жыл бұрын
How would animating the counter rotation work if we code this example. Should the animation include everything from you transform and then on top of that out rotate() that will be changing value?
@siddharthshekhar6786
2 жыл бұрын
@@yordanpopov7080 Yes, all the transforms would have to be repeated for each keyframe within an animation.
@Victor_Marius
2 жыл бұрын
For positioning of all icons could set the li width and height to 36rem, then center to body below the woman/man images. The image icon and paragraph will need an extra wrapping [ul > li > div.icon-12rem > (img, p)] that will be 12rem diagonally circle translated to right (and its rightmost point aligned to the li rightmost side). Then to place the other list items you rotate them (if they are only 8, by 360/8 * [0....7] = 0, 45, 90, 135, 180, 225, 270, 315) and counter rotate the li > div.icon-12rem wrappers (with 0, -45, -90....)
@JoshAntBrown
2 жыл бұрын
Great video! The math problem of getting the correct x and y was a fun challenge. Ended up coming up with this in sass as possible solve, could probably be tided up so it's a bit more re-usable the 45deg is 360 divided by number of list items. @for $counter from 0 through 7 { li:nth-child(#{$counter + 1}) { transform: translate( 15rem * math.cos(45deg * $counter), 15rem * math.sin(45deg * $counter) ); } }
@zachjensz
2 жыл бұрын
🎉 🥳 Congratulations on 500,000+ Subscribers Kevin! 🎊 🍻
@KevinPowell
2 жыл бұрын
🎉
@zmodem4619
2 жыл бұрын
@1:32:10 - At the bottom of the window, and above the "&:hover", there's "--thob-play-state: play;", which was supposed to be "--throb-play-state: play;" Missing the 'r' in the "--thob-..." --- No big deal! Kevin, I've learned so much from your videos, but the best thing I've learned is how to just tinker and forget about making mistakes; mistakes are important, and they help us gain wisdom alongside knowledge. Your approach is so calming that it makes me more excited to fidget around! I've been dev'ing since 1996, as a hobby, side projects, and as a freelancer. You inspire me to keep up with the newer updates to the design cores and adapt to not living in the past (no, I'm not still using for layouts, lol).
@esmeralddedushaj3598
2 жыл бұрын
I used a different approach, to build something similar: Inside each I used inline-style variables, which helped me to build a perfect circle using calc( ). .flex { position: relative; display: grid; place-content: center; width: 350px; height: 350px; } .flex span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(80deg * var(--i))); >>this formula lets build a perfect circle, without using transform: translate( ) in each tag. } My code: codepen.io/esmeralddedushaj/pen/KKZbPOE
@ChateeeeonTCG
2 жыл бұрын
really cool
@dansinn
2 жыл бұрын
cool
@abhisheksawant2376
2 жыл бұрын
Brother has 300IQ
@mehdisaffar
Жыл бұрын
maybe use attr() instead of style?
@denniscaylorboc2342
2 жыл бұрын
I'm a junior frontend dev and you inspires me a lot not to give up challenges using only css. keep on making more contents pls.
@rosendimov6650
Жыл бұрын
A lot of new stuff to learn from this video, thanks! Just one question - why the has to have both width and height. If I unset width - nothing changes, if I also unset height - the image moves a little bit down, but the animation continues working (all the items are at the same position)?
@rohitsanwariya7217
2 жыл бұрын
This is the most fun i ever had on any follow along tutorial.
@flashbond
2 жыл бұрын
For the exact radial placement, coordinate formula is: (x, y) = (radius*sin(radian(angle)), radius*cos(radian(angle))). I don't know if sass supports trigonametric functions but in your case, a for loop can be defined where the radius is 15rem with 45-degree angle incremenents.
@mrkhan7599
2 жыл бұрын
Hey Kevin, I really love your work. You did make me fall in love with CSS. I get to learn a lot from your work. Keep making such awesome videos.
@max06de
2 жыл бұрын
Awesome presentation! In the end it seemed to be "simple", but the moments in between when you went on like "why is this moving" reminded me again why I'm no frontend developer - I'm not gonna try it, I prefer to keep my sanity, or what's left of it.
@william1504
2 жыл бұрын
Great video! Btw, you can use a negative animation-delay on the itens, so that the animations will be offset from each other but will not have the start delay when the page refreshes.
@razorjhon2622
2 жыл бұрын
wanted to do something like this for 3 days straight and i gave up trying and you posted this video in the right time , thank you so much man i love you ♥
@FFAs
2 жыл бұрын
Very cool! I hope you do more videos like this one in the future. One thing that could be an interesting general video topic is a discussion of how to recreate things that are standard in javascript into CSS, and how to tell when you should and should NOT be using javascript instead of CSS.
@paleofemme
2 жыл бұрын
Just got an A in Web Dev 230 thanks in great part to your videos. Thank you! 🙏🏻
@никитатолочко-й6э
2 жыл бұрын
You inspired me to go through this challenge. Turns out, the most difficult part is math for list item coordinates, especially when you are trying to animate their moving and expanding at the same time.
@JamieMaguire_
2 жыл бұрын
By far the best CSS content on KZitem!
@mickeberg2123
2 жыл бұрын
Kevin your videos are amazing. I've learned so much from them. Also love this format, where we get to see the process and the mistakes along the way. It's very relatable! Keep up the good work!
@bedlam5657
2 жыл бұрын
What an epic adventure. Great work!
@DemanaJaire
2 жыл бұрын
You can use math.sin and math.cos to calculate exact placements of the circles. I did something like this: @use 'sass:math'; $number: 30; // number of circles $each: math.div(360deg, $number); $radius: 300px; $size: 20px; .parent { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); > li { position: absolute; height: $size; width: $size; background-color: red; display: block; border-radius: 50%; } @for $i from 1 through $number { li:nth-child(n + #{$i}) { transform: translate(math.sin($each * ($i - 1)) * $radius, math.cos($each * ($i - 1)) * $radius * -1); } } }
@KevinPowell
2 жыл бұрын
Very cool, thanks for sharing! sin() and cos() and maybe some others are even coming to CSS too, but it would have been nice to show them in this case, since I was using SCSS already.
@DemanaJaire
2 жыл бұрын
@@KevinPowell I hope so. I was looking for a CSS solution, so those coordinates could be calculated on the fly using CSS variables, but no luck.
@thatdude1623
2 жыл бұрын
I think i need to rethink my decision to code lmao
@DominikGuzowski
2 жыл бұрын
This channel literally made me turn from pulling my hair out working with CSS to having uncontrollable urges to style my friends projects because he doesn't care to make it look nice 😂. Thanks Kevin!
@naveenramkumar6123
2 жыл бұрын
Hey Kevin, these types of videos are the best...Please make some more of these types!
@simbaclaws_youtube
2 жыл бұрын
I remember doing this exact animation 4-5 years ago for a client in pure css. It was awesome....
@noelfrancisco5778
2 жыл бұрын
I think to determine the position of each options is to use pythagorean theorem, using the constant radius as your base and the angle as the space for each. :) Overall, great work. I learned a lot , thanks :)
@universecode1101
2 жыл бұрын
Very useful 😄Thanks Kevin ✌🏻
@johnpaulpineda2476
2 жыл бұрын
this is actually what im looking for. thanks kevin!
@RenatoCadecaro
Жыл бұрын
Thank you Kevin! Your work are really inspiring!
@sfsdfsdfsdfmjng4238
2 жыл бұрын
I honestly learned a lot here, I'll keep watching your channel!
@uridevmedia
2 жыл бұрын
Fantastic video, thanks kevin 👍 Congratulations on your 500k plus subscribers
@cacowen
2 жыл бұрын
To make the item appear in a circle could you have set the XY using (0,15), (0,-15), (15,0), (-15,0) and then "pre rotated" every other one 45 degrees. I am thinking this would work provided the rotation happened while the center was still the center of the content and not the center of the individual item. Much like what was happening around 53:10
@Xamimum
2 жыл бұрын
I was thinking about the positions of the items - after your struggle with transforms. This might have been an option: li { position: absolute; } li:nth-child(1) { top: 0; left: 0; } li:nth-child(2) { top: 0; margin-left: 50%; transform: translate(-50%); } li:nth-child(3) { top: 0; right: 0; } And continue doing this with all the other items. While typing this, this might not be a great idea due to the animation (that's probably why you used transform), but it could be possible.
@KevinPowell
2 жыл бұрын
I came very close to using top and left/right, but still using transforms to move them. I thought I'd have to at one point actually.
@crowebro9581
2 жыл бұрын
You amaze me Kevin. Your skills are inspiring.
@ericnescau
2 жыл бұрын
AMAZING JOB! It was enjoyable watching this like watching an action movie! Congratz!
@vladimirpetroski7089
2 жыл бұрын
Kevin...you're amazing and you deserve all the praise and followers! That laugh...at 17:14 ...I haven't laughed that hard this year!
@KevinPowell
2 жыл бұрын
🤣🤣 I didn't even really notice that when editing, lol
@AlThePal78
2 жыл бұрын
Greatest video ever I love to see mistakes makes me feel human
@BubblyBanjax
Жыл бұрын
If you want merch ideas you could do a "var(--thob-play-state)" t-shirt :P You were missing an r. Also, for the record, you continue to help fortify my newfound love CSS. I really hope to be as good as you someday but for now I am still only a few weeks into my journey.
@avneet12284
2 жыл бұрын
Excellent - took me 2 days to get this fully
@HolgerNestmann
2 жыл бұрын
I love this! no googling is an artform :D
@coleedward9642
2 ай бұрын
I know this is 2 years old. But the formula is x = cos(angle) * radius and y = sin(angle) * radius. So for example, since you have 8 circles, angle increases by 360deg / 8 for each. Radius is distance from center. Your case would be with a --radius of 10rem and a --count of 8: transform: translate( calc(var(--radius) * cos(var(--item-index) * 360deg / var(--count))), calc(var(--radius) * sin(var(--item-index) * 360deg / var(--count))) ); Set all the li's to that and you can just set the --item-index to the item index. for example, li{ transform } li:nth-child(1){--item-index:1}
@gykonik
2 жыл бұрын
At 1:12:45 you actually don't need the helper div that is surrounding the div around the img tag. You can just give the list item the corresponding background color (and adjust some minor other things). All in all, this works much better because you can avoid having multiple animations (with different transforms) on the same object (which leads to problems if the browser doesn't support scale: X and rotate: X but only transform: scale(X), ...). With this solution, you can simply "rotate" the ul, img and p (the latter 2 in reverse mode) and "throb" the li-item and get the same result but much cleaner without having to deal with multiple transform/rotates :) (And also as some other's also pointed out, you can compute the exact positions using sin and cos)
@KevinPowell
2 жыл бұрын
I'd have to dive back in and play with it... I thought I had to have that extra one, because the transform-origin on them, I can't reverse-spin them in place properly, but I could easily have mucked it up as I went and overthought it. I'll take another look at it :)
@RichardTran
2 жыл бұрын
It's fun to see the unedited process but I'm glad this isn't live, I'm still screaming "translate-origin" at my monitor.
@atkimusic
2 жыл бұрын
Hey Kevin, just wanted to let you know if you don't already, KZitem's auto CC is still capturing "Friend and Friends" in all your videos. I think that's hilarious. Amazing content as usual! 😄
@Stoney_Eagle
2 жыл бұрын
I bet you that the original creator took more than 2 days to make this, you are the king 😊
@jonmayer
2 жыл бұрын
a²+b²=c² is your friend for this simple circle. The 45s should be at 10.6rem 10.6rem. Proof: a² + b² = 15rem² a² + b² = 225rem (a = b for 45°) 2a² = 225rem (divide both sides by 2) a² = 112.5rem a = sqrt(112.5)rem a ~ 10.6rem
@MusicBox.Melodies
2 жыл бұрын
This was the first thing I though of!
@Hacker-at-Large
2 жыл бұрын
As a programmer, watching an obviously talented UI designer struggle with basic concepts in trigonometry was instructive.
@mimoduocss
2 жыл бұрын
Shucks I knew custom properties were the way to go, didn't know about rotate: 1turn either, good idea. As always I love your presentation and speaking style! I posted my solution to my youtube channel and codepen :3 It's amazing how wildly different our solutions are. Thank you for the challenge!
@KevinPowell
2 жыл бұрын
Always fun when there are more than one way to approach things like this :D
@UBERDHOKER
2 жыл бұрын
You could also just have them all have the same translation from the center and let them start part way through the orbit animation. Using a negative animation delay starts the animation right away but still advances it to specified point in the animation. You can also use custom properties to avoid using the rotate and scale properties. Untested example: transform: translateX(15rem) rotate(--ball-rotation) scale(--ball-scale); transform-origin: -15rem; animation: orbit var(--speed) var(--orbit-delay) linear reverse infinite, throb 1s var(--throb-delay) ease-in-out infinite alternate; --orbit-delay: calc(-1 * (var(--speed) / var(--numberOfBalls)) * var(--ballIndex))
@KevinPowell
2 жыл бұрын
oh, never thought about a negative delay. I like the idea :D
@StevenDavisPhoto
11 ай бұрын
make a big circle that all the little circles are attached to. spin the big circle. rotate the icons in the opposite direction at the same pace, and add a scale pulse animation to the little circles. easy peasy :)
@frankroos1167
2 жыл бұрын
In cases like this, my first reaction is to open the developer tools and see how they did it. For practice doing without that is better. But afterwards, I would still do it to compare. Would be nice to see that comparison for this case. Either way, I learn. So it's all good. Thank you master Kevin.
@alialavizadeh2775
2 жыл бұрын
love this type of videos, make more of like these one
@jorgesaxon3781
Жыл бұрын
This is why trigonometry is useful folks, the translates should be r cos((360/n)*c) , r sin((360/n)*c) where n is the number of evenly spaced points c is the specific point you are translating and r is the length between the center!
@jemrl
2 жыл бұрын
Great video, followed along coding my own project using straight CSS as I am not familiar with SASS. Something I will look at doing through udemy when I get a chance
@jemrl
2 жыл бұрын
Question - How do you fix the issue of adjusting the CSS when the page goes full screen without having to manually refresh the page to fix it? Do you have to use JS to solve this issue?
@developerpranav
2 жыл бұрын
Phenomenal work Kevin!
@vinsmokesanji7629
7 ай бұрын
1:04:03 u didnt do anything wrong Kevin. Just the other circles needed to be translated to 10.6rem, 10.6rem. Pythagoras theorem, Euclidean distance. great video🎉
@SohaibHasan
Жыл бұрын
You are the CSS guru
@liquidmasl
Жыл бұрын
cant you put transforms together like in computer graphics? when doing this (lil circle position) with transformation matrices i would rotate 45 degrees and then move outward, then 90 degrees and out, and so on. To unturn the icons i would just transform back. but i dont know if thats a thing in css. it seams VERY burdensome to do it like you did. What if you want to add an icon, or rotate all of them, or something, seams like a hassle. Also, can you acess the "n" in nth child? so you can do stull like that programmatically? it makes me shiver seeing all the hardcode haha
@agustinmassa4341
2 жыл бұрын
Thanks Kevin! also improve my english listen to you! Great video, and success copy design jeje
@dimitrijep7872
2 жыл бұрын
that was super cool, good problem solving skills, thank you!
@Feralferrets
Жыл бұрын
I think I would each circle as a watch hand, origining from the center of the image (with the actual hand/line invisible) and the circle absolute positioned at the end of each hand. Then divide 360 / number of circles, and rotate each watch hand by the corresponding value. Something like that should work in theory.
@erhahonimafidon9306
2 жыл бұрын
Thank u Mr. Powell
@viniciusscarra
2 жыл бұрын
Loved this video! Just as an idea, wouldn't it be also possible to create both the circle and animation using sin & cos functions? I think that'd be easier to maintain and manipulate.
@KevinPowell
2 жыл бұрын
A few people have said that would be the better way to do it, yes :D
@johmbon
5 ай бұрын
Do you have a video or somewhere I can find answers for my problem please? What I'm trying to do is to save space because I have multiple html labels (5 at most) and I'm trying to stack them in one like "Label1 +4" and when I hover on is I want to show the other labels around it, like in the video, I don't need all the animation but just the transition to make them appear with transition (explosion?). While I'm writing this, I think that I might find what I need somewhere in this particular video (?)
@johnscafide275
2 жыл бұрын
Call PBS. A modern-day Bob Ross. Well done!
@v2ike6udik
Жыл бұрын
25:25 this is what happiness and winning looks like. Ouou! Also - business idea! You should do extra hard challanges and let sadists fund it. :) "Come on, dude, watch me pain!"
@Alex-cd2xq
2 жыл бұрын
@kevin 1:27:22 - you have got a variable typo "--thob-play-state"
@kazeshinu
2 жыл бұрын
Was thinking. If you make the ul 1 pixel the rotating corner would just be rotating at the same point?
@grahambo-42
Жыл бұрын
1:03:00 If I remember my webGL and other comp sci stuff for graphics wouldn't you want to apply a rotation for each with incrementing values of angles around the circle, then apply the same translate to move them away from the center?
@guinetik
2 жыл бұрын
I was watching this on TV when the KZitem apocalypse happened. Now I'm too invested and want to know how to do this so hey from my mobile
@ankitkumarsingh9815
2 жыл бұрын
You are an inspiration!
@scottlefoll2672
2 жыл бұрын
Hey, I'm trying to study this code. It loads fine in different browsers, but there is no orbiting or any other movement. It that because the SASS requires some kind of compile?
@bobbyboxer2664
2 жыл бұрын
Damn this is insane! 🙌🏼🙌🏼
@GauravKumar-ue7nz
2 жыл бұрын
Thank you Kevin
@Budzique
Жыл бұрын
So each is 45 degrees off so if your radius is 15 (15,15) 0 degrees then 45 degrees is ~10.6 (15 * cos(π * 2 * 45 / 360), 15 * sin(π * 2 * 45 / 360))
@olumorsotnas
11 ай бұрын
Awsome job!
@dajacob9066
2 жыл бұрын
I have a question for you. You are using SCSS, why are you making custom css properties for colors instead of using scss variables? It will be compiled anyway so everything will have color that it supposed to have. You can change it in one place and it will reflect everywhere where the variable is used, so I don't see a point in making custom css props. Does it have any advantages? And another question: Why to use &:not(:first-child):hover instead of just &:last-child:hover when you have only two elements?
@daspisch
2 жыл бұрын
First thought was: cmon, there’s nothing difficulties at all. But then I’m noticed css) I could easily do this with swift on ios, but css.. I have no idea how could I do that) Nicely done!
@n_mckean
2 жыл бұрын
When you were toying with whether to do the central image(s) as a background or not, considering they are purely decorative (as you defined them) would background image not be the better choice as it would remove them from the HTML? (Yes, I understand that very few if any people look at HTML without CSS/JS - but still).
@KevinPowell
2 жыл бұрын
In this case, I think either one would be fine.
@christianferrario
2 жыл бұрын
I have a question, as I see a lot of video like this one, where people try to make complex designs with css only. Is there a reason why you (and others) try to avoid using JavaScript or is it just a personal challenge? Thanks in advance. I love your videos btw, I learnt a lot from you.
@KevinPowell
2 жыл бұрын
It's fun to see what we can do with only CSS, even if it's not always the most practical. Let's you push your skills and come up with useful tricks you can use in future projects, plus in this case, I think it actually makes more sense to be CSS only.
@UrbanJackJr
2 жыл бұрын
@@KevinPowell Plus it often is more performant than js, because there is no additional computations performed on top of css.
@modernkennnern
2 жыл бұрын
I generally think CSS should do as much as possible related to the look of the page. HTML should do all the functionality of the page. If all else fails, use JavaScript as a backup. Of course, that backup comes up quite often, but that's my mindset
@lenn15
2 жыл бұрын
Really cool !
@jsart_pl
2 жыл бұрын
Weirdly in Chrome rotate() and scale() don't work for me as alone properties. They work only inside "transform" property but when I use transform, they're mixing up other existing things, for example translate(). Everything is fine in Mozilla tho :)
@gorkemeldeniz9579
2 жыл бұрын
Kevin maybe you can use the inheritance for the pause animation when its hover on for example : .parent{ &:hover{ animation-play-state: paused; .child{ animation-play-state: inherit; } }
@ouvie
2 жыл бұрын
you are amazing! great video as always
@andrew1550
2 жыл бұрын
I hate css, but that was pretty cool. Definitely good to know about managing state with custom properties, I will definitely use that in the future.
@mattsam1311
2 жыл бұрын
For the paragraph in the li is there a reason to use opacity:0 and instead of display:none
@alisharobinson9191
2 жыл бұрын
So the circle bit is basic trig. Use SOH-CAH-TOA pick your angle and plug in the radius. Then solve for the 2 points x and y.
@IceMetalPunk
2 жыл бұрын
Trigonometry, Kevin; you're looking for trigonometry 🙂 translate(distance * cos(angle), distance * sin(angle)) . sass:math lets you use trig functions, too
@RajShekhorcoder
2 жыл бұрын
Appreciate. Awesome thanks 👍
@boskoradivojevic180
2 жыл бұрын
Ohhh this theme is crazy! Can you tell me how can i find it?
@mrwhatever1970
2 жыл бұрын
Thanks for this long and very interesting video, I learned a lot again. Question: Why did you write the rule for the hover of the center image as &:not(:first-child):hover and not &:last-child:hover? I tried it, both work identical in this case. But you probably had a reason to use the more complicated way with :not, did you?
@oswhytecodes1
2 жыл бұрын
this is literally what I want to do for my app.
@fer.barrios
Жыл бұрын
Amazing video!!
@gbradley10021
2 жыл бұрын
Do you have a 3d printer running in the background?! Sure I can hear something :D
@avishekthapa6655
2 жыл бұрын
"THE" smile at 25:35 😁😁😁😁😁😁
@amandinelevecq6664
2 жыл бұрын
AI am at 32:30 of the video. Sin and Cos is the key! 15rem*cos(360/8*n) for the translateX! Same with sin for translateY 🙂
Пікірлер: 231