Create an animated, glowing, gradient border with CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 พ.ย. 2024

ความคิดเห็น • 133

  • @okosmik
    @okosmik ปีที่แล้ว +12

    You have made CSS truly fun and understandable, thanks.

    • @SCHTRAM
      @SCHTRAM ปีที่แล้ว +1

      Also made me want to get back into working as a programmer, but only in UI/Css stuff =D

    • @okosmik
      @okosmik ปีที่แล้ว

      @@SCHTRAM To dare is to do 😄, just do it, fr.

  • @RaymondHulha
    @RaymondHulha ปีที่แล้ว +4

    This might just be my favorite CSS Video of all time

  • @markovujanic
    @markovujanic ปีที่แล้ว +4

    Kevin,
    This is such a nice format for tutorial. You clearly explained step by step how this works. Thank you

  • @NeoMatrix1990
    @NeoMatrix1990 ปีที่แล้ว +8

    I just went down the rotating gradient rabbit hole like a month ago. When I saw your title and thumbnail, I was scared you were going to show something I missed 😅. But I got to the angle property point and decided to go in a different direction because of browser support.
    Keep up the good work! Watching your videos has reignited my interest in front-end developement.

  • @neonart_
    @neonart_ ปีที่แล้ว +14

    I am learning a lot through your video thankuu

  • @k16e
    @k16e ปีที่แล้ว +3

    Mind-blown! Thanks, Kelv!

  • @questionmark9683
    @questionmark9683 ปีที่แล้ว

    Whenever i watch your video i literally think that why are your videos soo much related to the my problem you are video are very good and the knowledge you provide is literally the nest level thankyou you for providing the knowledge by the way i am from Indian and know ..

  • @Ali.AlMamory
    @Ali.AlMamory ปีที่แล้ว +1

    I barely know your channel and already benefiting from your videos...
    I copied your Cool 3d card that follows the mouse movement using JavaScript as part of my training abd learned so much advanced css coding and tricks
    Just want to say thank you for your enormous efforts and knowledge that ur sharing with us (beginners&students)
    May allah bless you 😘

  • @ThomasGodart
    @ThomasGodart ปีที่แล้ว +1

    Ok, I'm baffled. That's really good work!

  • @troubleshot_
    @troubleshot_ ปีที่แล้ว +3

    I like these shorter style video's where you don't type, but paste! Good job 👍

  • @blueprint7000
    @blueprint7000 ปีที่แล้ว +3

    Trully Amazing . I love you !

  • @GayaneGasparyan
    @GayaneGasparyan ปีที่แล้ว

    I just discovered this! Thank you Kevin for making this tutorial!
    A lot of people were asking for a tutorial, so I would like to put your video inside the pen, if you don't mind

  • @kylevandeusen
    @kylevandeusen ปีที่แล้ว +1

    Totally gonna use this idea!

  • @NerdyDumbProductions
    @NerdyDumbProductions 8 หลายเดือนก่อน

    This is so freaking COOL!

  • @Sammysapphira
    @Sammysapphira 7 หลายเดือนก่อน

    What a gorgeous effect

  • @codershoh
    @codershoh ปีที่แล้ว +1

    You are the best. Good luck ❤

  • @iamgld
    @iamgld 7 หลายเดือนก่อน

    Kevinn, I loved this video friend! 🤩

  • @Jay-qu7rf
    @Jay-qu7rf ปีที่แล้ว +1

    Wow! Super Awesome!

  • @mebamme
    @mebamme ปีที่แล้ว +4

    I think even in a square box the gradient rotation would have looked slightly off - to have a constant apparent speed along the outline, you'd probably need a circle.

  • @howdyhowdyhowdyhowdyhowdy
    @howdyhowdyhowdyhowdyhowdy ปีที่แล้ว +1

    thanks Kevin, always great

  • @sealuke2724
    @sealuke2724 ปีที่แล้ว

    you are always awesome for CSS!!!!!!

  • @cristianferreira3350
    @cristianferreira3350 ปีที่แล้ว +1

    Súper !! More videos like this please!! Thankyou!

  • @Ramnathk
    @Ramnathk ปีที่แล้ว +17

    Thanks Kevin for these fun tutorials. One question I have however is that with majority of traffic coming from mobile devices how can we translate some of these effects to touch based (micro)interactions?

  • @PicSta
    @PicSta ปีที่แล้ว +3

    Hey Kevin, great video. Why aren't you going with the unit dvh instead of vh. Just to keep it right and think at the mobiles devices out there. Apart from that, all good as usual.

  • @coreygriffin
    @coreygriffin 2 หลายเดือนก่อน

    Great video, learned a ton - thank you!

  • @akukral
    @akukral ปีที่แล้ว +1

    Great video! Would love to see more tutorials and/or examples of practical, forward progressive applications of @property.

  • @angryjellyfish5347
    @angryjellyfish5347 ปีที่แล้ว +1

    Thank you!!! saw something like this a couple of days ago and was going message you to see if you could do a video on it :)

  • @vladropotica5687
    @vladropotica5687 ปีที่แล้ว +2

    Thank you for your videos, i started learning code half a year ago and many of your videos taught me alot

  • @bedtimehorrorstoryyoutube
    @bedtimehorrorstoryyoutube ปีที่แล้ว

    As always really helpfull :) I will use it in my projects thanks to you!

  • @EdwinArias-m2t
    @EdwinArias-m2t ปีที่แล้ว

    Beautiful!

  • @monikafiori
    @monikafiori ปีที่แล้ว +7

    the gradient doesn't work in firefox at all - seems like you should first put the gradient value in root as fallback and put houdini property after root

  • @mellowmarvin
    @mellowmarvin ปีที่แล้ว

    I love your videos in which you sometimes mistype and ponder. I would like to see more of them again. But maybe that's because I don't belong to the TikTok generation and like to watch you make mistakes. In any case, keep going somehow! Your videos are perfect! A big thank you to you!

  • @junsu-ho
    @junsu-ho ปีที่แล้ว +1

    more effects and cool animations, please

  • @danlazer741
    @danlazer741 ปีที่แล้ว

    Because of you I dont hate front end as much.

  • @Tom-og3fr
    @Tom-og3fr ปีที่แล้ว +3

    Good job Kevin. But could you do it with transparent (card) background? 🤔I bet it would look awesome in glassmorphism, but I was not able to figure it out. EDIT: Never mind, YT just redirected me to your other vieo, where you made glowing border with SVG, so it can be done that way. Its funny, you answered my question, even before I managed to ask it :D

    • @Jakiita1
      @Jakiita1 ปีที่แล้ว

      Which video is this if you dont mind me asking? Im looking for the exact same thing :O

    • @Tom-og3fr
      @Tom-og3fr ปีที่แล้ว

      @@Jakiita1 its this one th-cam.com/video/fcnDBP3k3BE/w-d-xo.html

  • @rubelhossain8517
    @rubelhossain8517 ปีที่แล้ว +1

    amazing content

  • @ericdimarzio5756
    @ericdimarzio5756 ปีที่แล้ว

    Thank you! Great video!

  • @padeiroPorAmor
    @padeiroPorAmor ปีที่แล้ว +1

    once i resolved this making exact the same, but without that property. instead a got 2 div one smaller than the other and the bigger rotating, filled with the colors

  • @sandalivimansa8758
    @sandalivimansa8758 ปีที่แล้ว

    thank you sooo much kevin

  • @geforcesong
    @geforcesong ปีที่แล้ว +3

    That's smart solution! however, However, is there a solution that works across all modern browsers? Tried the link, doesn't work on safari, the border doesn't show at all, let alone the animation

  • @Double_Double111
    @Double_Double111 2 หลายเดือนก่อน

    ❤ I love this

  • @borstenpinsel
    @borstenpinsel ปีที่แล้ว +2

    Thanks, maybe this helps. I've seen a codepen of this but it didn't work in my html file for some reason. Didn't even move

  • @FdWebdesign
    @FdWebdesign ปีที่แล้ว +1

    You're doing great!

  • @amircahyadi9219
    @amircahyadi9219 ปีที่แล้ว +1

    Thanx you sir 👍

  • @TCLKanxi
    @TCLKanxi 3 หลายเดือนก่อน

    Hi, great video, is it possible to have a solid border, only animate on hover? Thank you

  • @twoplustwoequals5733
    @twoplustwoequals5733 ปีที่แล้ว +3

    does "place-items" not have suggestion "center" for you guys too in VS Code?

  • @grapy83
    @grapy83 ปีที่แล้ว

    That was so fun.

  • @Pak6tani
    @Pak6tani หลายเดือนก่อน

    Sir you are the best powerful teacher but I know only Urdu Hindi

  • @penguinxed
    @penguinxed ปีที่แล้ว +1

    very cool! Hi sir Kevin, I wonder if you are planning to release another chatgpt content especially after the gpt4 announcement? cheers! 😊

  • @CMB696
    @CMB696 ปีที่แล้ว +1

    I did something similar this a weak ago but it is a big headache 'cause .outer-card > . gradient-border > .main-card and for .outer-card:before for blur aah . And I saw that post few days ago and i thought that i can't , and u did it just with a .card 🤯 it's big brain time;

  • @samarthm4582
    @samarthm4582 7 หลายเดือนก่อน

    Amazinggggg

  • @TheTrentmoller
    @TheTrentmoller ปีที่แล้ว

    So great ! How to make it animated only when appear in the screen.

  • @fabian3411
    @fabian3411 3 หลายเดือนก่อน

    Great Video! I tried in my project and I find this solution works really well for me, there’s one weird thing though: whenever I use any kind of transform: translate property on the div that has the pseudo elements, the inset one them breaks and the pseudo elements appear in front of the div again, though strangely any text stays visible.
    The fix I came up with is wrapping the div inside another wrapper, so I don’t have to use any translate properties (I have to use them) on the element itself but only on its wrapper.
    Is there an explanation to this seemingly strange behavior?

  • @SvenThielen
    @SvenThielen ปีที่แล้ว +4

    I found a neat trick to get another type of animation to work in firefox by pasting the code below just after the one described in the video:
    @-moz-document url-prefix() {
    .card::before,
    .card::after {
    background: linear-gradient(
    45deg,
    var(--clr-5), var(--clr-4),
    var(--clr-6), var(--clr-7),
    var(--clr-5), var(--clr-4),
    var(--clr-6), var(--clr-7));
    background-size: 450% 100%;
    animation: ffspin 3s linear infinite;
    }
    }
    @keyframes ffspin {
    0% { background-position:0%; }
    100% { background-position:96%; }
    }
    Colors I used:
    --clr-4: #2d8f85;
    --clr-5: #38CFD9;
    --clr-6: #637c54;
    --clr-7: #4e00c2;

    • @luischiesa4568
      @luischiesa4568 ปีที่แล้ว

      Hey man! I’m new coding and I’m not the best English speaker/reader could you help me to fix this problem with the Firefox I put that and still not working

    • @NiltonOliv
      @NiltonOliv 11 หลายเดือนก่อน +1

      Thanks friend, you are a genius, before it didn't work on Chrome and also on Firefox. You saved me, very beautiful effect.

  • @Iamhappy-v9b
    @Iamhappy-v9b ปีที่แล้ว +1

    In mob&desk app development, of course we need to design the content (background-colors, colors, positions, etc.), So will I need css

  • @wavyboyjodii
    @wavyboyjodii ปีที่แล้ว

    Thank You🔥🔥🔥

  • @moosegoose1282
    @moosegoose1282 ปีที่แล้ว

    great vid, but do you think Lottie animation would have done better here ? if we had 100 of these, i think it'd be better to switch to lottie rather than rendering css

  • @VasilyPavlik
    @VasilyPavlik ปีที่แล้ว +1

    Brilliant!!!
    But Hoodiny is "under construction" for the last 5 years as I remember, or even more. But anyway, it will work without animation. Very good example of graceful degradation.
    Thank you!

  • @NamanGoel34
    @NamanGoel34 ปีที่แล้ว

    I think masking might create a more performant version of this. I’ll post a link if I figure it out.

  • @jamesmcgee1912
    @jamesmcgee1912 ปีที่แล้ว +1

    Do all major evergreen browsers support this houdini feature?

  • @mangelozzi
    @mangelozzi ปีที่แล้ว

    Since when did the body start to stretch to the full height of the viewport? It used to be that the html was the full height, and the body was only only as tall as required

  • @ernststa
    @ernststa ปีที่แล้ว +5

    Does not work with Firefox unfortunately, unless you remove the property from the gradient

    • @khaledsalah9248
      @khaledsalah9248 ปีที่แล้ว

      that's exactly the problem I ran into, it's so sad.

    • @issy63ls
      @issy63ls ปีที่แล้ว

      Same here, i'm stuck on same problem.. how did you fix it?

    • @khaledsalah9248
      @khaledsalah9248 ปีที่แล้ว

      @@issy63ls
      I think there are 2 fixes,
      first is to write browser specific code
      second is to use javascript for the rotating effect of the gradient.

  • @naczelnypsycholog6296
    @naczelnypsycholog6296 ปีที่แล้ว

    nice I just think that colors pick is not optimal for that kind of effect

  • @nomadshiba
    @nomadshiba ปีที่แล้ว +2

    wonder if we can use border: solid .5rem transparent
    didnt try tho, so the space there is actually be a "border"
    tho there is probably background behind the border so wouldnt work
    wonder if we can make the background start after the border-box

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +3

      Oh, that's a good suggestion! Sadly, what happens is the background of the element actually gets drawn under the border. There are ways around that with `background-clip`, but then you lose the border-radius. I think the best solution is probably a --padding custom property on the parent, and use that for the inset value.

    • @nomadshiba
      @nomadshiba ปีที่แล้ว

      @@KevinPowell padding with background-clip works great

  • @mayurapathak1654
    @mayurapathak1654 ปีที่แล้ว

    Thankyou

  • @shayanzamani9907
    @shayanzamani9907 ปีที่แล้ว

    Thanks for your content.
    BTW, is there any way to have a box with animated, gradient border color when the box itself is half-transparent or maybe a glassmorphism effect ?

  • @mykalimba
    @mykalimba ปีที่แล้ว +1

    It would be nice to speak to how much CPU (GPU?) it takes for modern browsers to manage some of these more advanced rendering features (blur filter, gradients). The last thing we need are uninformed web developers overusing techniques like these without awareness of how it can impact UX for those viewing websites overloaded with "features" like this. I've visited websites where a simple full screen background blur filter causes my laptop fan to spin up like crazy.

  • @alice-smith
    @alice-smith ปีที่แล้ว +2

    It is possible to fallback to animate the gradient with javascript when @property is not supported?

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว

      There might even be a polyfill, I haven't looked into it though

  • @Alexandra-Rex
    @Alexandra-Rex ปีที่แล้ว

    I've had something like this, trying to make the center transparent, or to actually have a semi transparent background. Like an RGB animation around a somewhat transparent "screen" where text can be. I've been trying to use it as an alert overlay for streams. Is it ok to play around with your way of doing it to see how it turns out for what I want?

  • @8koi245
    @8koi245 ปีที่แล้ว +1

    I was working with some after & before but the inset wasn't working and had to do width 100% & top 0 bottom 0, any idea? using beta chrome on Linux

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว

      was it position relative, and not absolute? Only thing I can think of.

    • @io1921
      @io1921 ปีที่แล้ว

      any solution to this ?

  • @kuhsea
    @kuhsea 11 หลายเดือนก่อน

    Is there anyway of making the border longer just soley verticly as it doesnt span all my text ;-;

  • @tzisorey
    @tzisorey ปีที่แล้ว

    Now you just need a script to make the gradient follow the direction that the mouse pointer is, and adjust the brightness based on the distance...

  • @lillenk125
    @lillenk125 ปีที่แล้ว

    Noice

  • @amirrezazada7491
    @amirrezazada7491 ปีที่แล้ว +1

    Sir, I have learnt javascript but the problem is, I don't know where to add javascript on my projects.
    Please help

  • @mikemaccana
    @mikemaccana ปีที่แล้ว +1

    You don’t tell us but is the gradient angle not normally animatable?

  • @SvenThielen
    @SvenThielen ปีที่แล้ว

    Why is Firefox so far behind on support of these cool features? Can only get it to work with a fallback color. The property does not work and animation neither.

  • @Human_Evolution-
    @Human_Evolution- ปีที่แล้ว +1

    I used Bing AI to summarize Houdini CSS. Soon you will be summarized too. I should have pasted your transcript. There will likely be an app to turn any video into a AI TH-cam Short.

  • @ember2081
    @ember2081 ปีที่แล้ว +1

    Is it necessary to use both ::before and ::after?

    • @naczelnypsycholog6296
      @naczelnypsycholog6296 ปีที่แล้ว +1

      one is blur that give effect of light/shadow and the other is moving solid colors

  • @Disorrder
    @Disorrder ปีที่แล้ว +1

    But you still can animate your css var with js

  • @josephnwachukwu5775
    @josephnwachukwu5775 3 หลายเดือนก่อน

    do you think its possible to do this on an input element

  • @Mattylarochelle
    @Mattylarochelle ปีที่แล้ว

    Hey Kevin, I really appreciate your videos. I'm having a problem at 2:57 the blur function does not create a shadow around the card but instead it stays contained within the card... Any ideas why that might be happening?

    • @appsenence9244
      @appsenence9244 ปีที่แล้ว

      Make sure you plar around with the numbers of the size of your container and the blur effect. It doesn't quite work as you would expect it to.

  • @wentallout
    @wentallout ปีที่แล้ว +1

    this is one of those "you like it, but it's bad UX so nevermind"

  • @AmauryleCour-w5t
    @AmauryleCour-w5t หลายเดือนก่อน

    Hello,
    It seems not working with bootstrap 5.

  • @a_basic_sheep_1993
    @a_basic_sheep_1993 10 หลายเดือนก่อน

    whos the best ha, whos the best - ps. stewie

  • @Lucas-li2zc
    @Lucas-li2zc ปีที่แล้ว

    Hi, very cool video ! I don't know why when I put a hover transform on the card by following your steps, the pseudoelements go over my card an hide it... I've tried to play with the z-index of the parent but it don't seems to work neither. If someone has any solutions 👌

    • @0xdeadbabe240
      @0xdeadbabe240 11 หลายเดือนก่อน

      what i found as a solution is that the background-color of the container of .card should have an alpha component closer to zero. this solved it for me.

  • @vojtechkochta6436
    @vojtechkochta6436 ปีที่แล้ว

    Hi, im using Styled components and i cant find solution for this part
    @property --rotate {
    syntax: "";
    initial-value: 132deg;
    inherits: false;
    }
    @keyframes spin {
    0% {
    --rotate: 0deg;
    }
    100% {
    --rotate: 360deg;
    }
    }
    I also asked chatGPT V4 without positive result :/ Does any1 knows please?

  • @colbycrawford7586
    @colbycrawford7586 ปีที่แล้ว

    Having trouble getting the gradient to render after swapping out the discrete degree value with the @property value. Anyone know why this may be?

  • @sazer2411
    @sazer2411 8 หลายเดือนก่อน

    can we make this only while hovering if yes can any one tell me how

  • @sohaumghosh9283
    @sohaumghosh9283 ปีที่แล้ว

    When I'm adding inset: -.5rem and z-index: -1, im loosing the glow effect and an opaque box is coming, can anyone help me out with that?

    • @io1921
      @io1921 ปีที่แล้ว

      any solution?

    • @0xdeadbabe240
      @0xdeadbabe240 11 หลายเดือนก่อน

      what i found as a solution is that the background-color of the container of .card should have an alpha component closer to zero. this solved it for me.

  • @alexpanteli3651
    @alexpanteli3651 ปีที่แล้ว +1

    Pretty sure this was inspired by new starter template of Next.js

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว

      Never even looked at it yet!

  • @neonart_
    @neonart_ ปีที่แล้ว +1

    Present sir

  • @nivlekio
    @nivlekio ปีที่แล้ว

    How many 3's do you know?
    1) 0, 1, 2
    2) 1, 2, 3
    3) X, Y, Z
    4) Red, Green, Blue
    5) Red, Yellow, Blue
    6) Left, Center, Right
    7) Forward, Center, Back
    8) Up, Center, Down
    9) Dot, Line, Dot = Line
    10) Dot, Dot, Dot = Polygon
    11) Sun, Earth, Moon
    12) Air(Gas/Vapour), Earth(Rock/Soil), Water(Liquid/Solid) = Planet Earth
    13) Animals/People of the Air, Animals/People of the Ground, Animals/People of the Water
    14) Chariots of the Air/Space, Chariots of the Ground, Chariots of the Water
    15) Alpha, Beta, Gamma
    16) A, plus, B
    17) A, divide, B
    18) A, multiple, B
    19) A, subtract, B
    20) Speed, Distance, Time
    21) E, M, C2
    22) Force, Mass, Acceleration
    23) H, 2, O
    24) Light Source, Close Distance, Your Eyes
    25) Object1, Object2, Close Distance = Collision/Reflection/Sound/Touch
    26) Open Door, Go though the Door, Close the Door
    27) Open Car Door, Get In Car, Close Car Door
    28) Seconds, Minutes, Hours
    29) Days, Months, Years
    30) 1st, 2nd, 3rd
    31) Gold, Silver, Bronze
    32) Grandmother, Mother, Daughter
    33) Grandfather, Father, Son
    34) Woman, Man, Child
    35) In the womb/egg, out of the womb/egg, dead
    36) Gay/Lesbian, Straight, Bisexual
    37) Nursery School, Primary School, Secondary School
    38) The Object is Empty, Fill the Object, Stop Filling the Object(Glass,Tank,Stomach,Bottle etc)
    39) Accelerating, Decelerating, Constant
    40) Open Lipstick, Put it on, Close Lipstick
    41) Lying down, Standing, Moving
    42) Left Wing Mirror, Rear View Mirror, Right Wing Mirror
    43) God, Angles, Heaven
    44) Satan, Demons, Hell
    45) God, Adam, Ribcage
    46) Adam, Eve, Eden
    47) Adam, Eve, Tree of Knowledge
    48) Satan, Eve, Tree of Knowledge
    49) Judaism, Christianity, Islam
    50) Breathe in, Hold breath, Breathe out
    51) Close eyes, Stare, Blink
    52) Bite, Chew, Swallow
    53) Bladder is Empty, Bladder is Full, Start Peeing
    54) Intestines are Empty, Intestines are Full, Start Pooping
    55) Shoes Off, Shoes On, Shoes Off
    56) Sexuality is Empty, Sexuality is Full, Start Sexual Relif
    57) Feeling Cold, Okay, Feeling Hot
    58) Start, Middle, End
    59) Open Schoolbag, Take something out, Close Schoolbag
    60) Creation, Infinity, Destruction
    61) Minus, Zero, Plus
    62) Home, Event(Bowling, Cinema, Park, Party), Home
    63) Clear Sky, Partially Cloudy, 100% Cloudy
    64) 0%, 50%, 100%
    65) Plane On Ground, Plane In Air, Plane on Ground
    66) Socks Off, Socks On, Socks Off
    67) Heart is beating, Heart has stopped but has been revived, Heart has stopped but cannot be revived
    68) Xbox, Playstation, Nintendo
    69) Windows, Linux, Mac
    70) One Film, Two Films, Three Films
    71) One Goal, Two Goals, Three Goals
    72) Green Light, Amber Light, Red Light
    73) Open Purse, Put something In, Close Purse
    74) Touch Key, Press Key, Release Key
    75) Home, School, Home
    76) Ready, Set, Go
    77) 3, 2, 1 = Lift off/New Year/Count down
    78) Pick up object, Move object, Put object down
    79) Pick up object, Throw object, Object hit ground
    80) Hands in water, Hands above water, Hands in water = Front-crawl
    81) Head above water, Head in water, Header in water = Breaststroke
    82) Hit/Pass/Throw ball, close distance, Hit/Pass/Throw ball = Baseball/Cricket/Hockey/Ice Hockey/Tennis/Rugby
    83) Home, Work, Home
    84) Bible, Torah, Quran
    85) c, c++, c#
    86) AMD, .COM, CPU, DVD, GFX, HDD, RAM, ROM, SSD, PSU, WWW.
    87) Back-End Developer, Front-End Developer, Full Stack Developer
    88) Continents, Islands, Water Bodies
    89) Car in Garage, Car out of Garage, Car in Garage
    90) Open laptop and turn it on, use laptop, Shutdown laptop and close it
    91) Pick up (Crayon, Marker, Paintbrush, Pen, Pencil), move it, Put it down = writing
    92) Bad Dream, No Dreams, Good Dream
    93) Engaged, Married, Divorced
    94) No/short hair, average hair, long hair
    95) Jacket on hanger, Jacket on you, Jacket on hanger
    96) Hat on surface, Hat on head, Hat on surface
    97) Glasses on surface, Glasses on you, Glasses on surface
    98) Raw, Cooking, Cooked
    99) Out of the Cave, In the Cave, Out of the Cave
    100) SSJ1, SSJ2, SSJ3 = DBZ
    101) Open drawer, take out/put in, Close drawer
    102) It's on, it's off, it's not working = (Car, Mobile Phone, Laptop, TV)
    103) It's Awake, it's sleeping/unconscious, it's dead (Animals/People)
    104) BMX, Racing Bike, Mountain Bike
    105) Allah, God, Yahweh
    106) Uranus, Cronus, Zeus
    107) Gaia, Rhea, Hera
    108) Crassus, Julius Caesar, Pompey
    109) Africa, Europe, Asia
    110) HTML, CSS, Javascript

  • @luischiesa4568
    @luischiesa4568 ปีที่แล้ว

    Could someone help me? I want to put this code at Firefox

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      For now, no way, it's not supported as I did it here.

  • @pdxpro7409
    @pdxpro7409 3 หลายเดือนก่อน

    its good but its so complex

  • @palantonio8764
    @palantonio8764 ปีที่แล้ว

    for rotating, why did you use houdini instead of just plain ol' rotate: ;

    • @palantonio8764
      @palantonio8764 ปีที่แล้ว

      nevermind, i might have misunerstood the assignment

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      I looked at what happened at around 3:10 if you tried a rotate, the entire element is rotating around. We need to animate either the angle itself inside the gradient (or you could animate the colors), and to do that we need to use houdini... unless I missed something obvious :D

    • @palantonio8764
      @palantonio8764 ปีที่แล้ว

      @@KevinPowell yeah, i misunerstood what you wanted to rotate. Love your videos!

  • @paulm.7967
    @paulm.7967 ปีที่แล้ว +1

    Kevin, STOPPP.. I was literally looking at Codepens of this! Go to the restroom and see the notification for this video.. SMH spy on cooler people man 😂

  • @scottmccauley7555
    @scottmccauley7555 8 หลายเดือนก่อน

    OK, now here's the question: add any `animation` to the .card and explain why it breaks...

    • @KevinPowell
      @KevinPowell  8 หลายเดือนก่อน

      If you're animating, I'm guessing it's a transform? In that case, it's making a new stacking context, so the z-index: -1; on the pseudo-elements no longer goes behind the element.

  • @prathamesh9990
    @prathamesh9990 ปีที่แล้ว +2

    Hi sir i have a request for you. There are many people like me who are not native english speakers. It is difficult to understand when you speak fast. If you could speak slower then we can have better understanding

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      This is me talking slower 😂. I really do try. You could show the video down a bit in the video settings

    • @naczelnypsycholog6296
      @naczelnypsycholog6296 ปีที่แล้ว

      @@KevinPowell don't do it Kevin, you don't speak fast at all.

    • @prathamesh9990
      @prathamesh9990 ปีที่แล้ว

      @@naczelnypsycholog6296 not everyone understand same accent

    • @naczelnypsycholog6296
      @naczelnypsycholog6296 ปีที่แล้ว +1

      @@prathamesh9990 level up bro, instead of bringing down others ;)

  • @bradenborman4396
    @bradenborman4396 ปีที่แล้ว

    We need a collab with you and @hyperplexed

  • @JNET_Reloaded
    @JNET_Reloaded ปีที่แล้ว +1

    it dont look anything like what u demoed to start with i got a codepen about cards!

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว

      What doesn't look the same? My Codepen goes to my finished code, and I think it's closer to the initial one, just with different colors and a slower animation 🤔