Create interesting blob shapes with CSS

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

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

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

    If the video is in Spanish for you, and you'd rather it in English, you can go to the settings cog and then from there change the audio track. Also, if you'd like to watch in Spanish, but it's in English, you can also switch it to Spanish in the same way :).

    • @fave1201
      @fave1201 2 ปีที่แล้ว

      No hablas ingles 😂

    • @fave1201
      @fave1201 2 ปีที่แล้ว

      Thanks for this though, I was checking out an avatar design where it was blobs rather than a circle and I could not implement it but now I'm pushing a PR as we speak.

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

      This is amazing!!!! thanks for the Spanish version!!!!!

    • @laick
      @laick 2 ปีที่แล้ว

      Thanks for sharing this and in Spanish!
      Greetings from Colombia 🥇

    • @dmoralesz
      @dmoralesz 2 ปีที่แล้ว

      Thank you for the Spanish version!

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

    Some of Kevin Powell videos are simply mind-boggling. Not because the showcase item is "too cool", but because of how easy it is to make these "too cool" items when you think the right way.
    And over time, I have learnt to think in the cool ways, at least more than I used to.

  • @jaspreetsingh-hi1kx
    @jaspreetsingh-hi1kx 2 ปีที่แล้ว +4

    Wow that’s really cool and the way you have explained. I am so grateful for your effort, please make more similar videos with short time frame.

  • @davindersingh-dx8nb
    @davindersingh-dx8nb 2 ปีที่แล้ว +1

    I just once got stuck in this kind of shapes-making process, but after reading about border-radius, I nailed it

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

    Loving these short and sweet videos

  • @lopi-xz5jx
    @lopi-xz5jx ปีที่แล้ว

    I have been searching for this simple animation for hours, and this is GOLD!

  • @rezarahman1782
    @rezarahman1782 2 ปีที่แล้ว

    Didn’t know such things about border radius. Blob is the most difficult thing I have ever faced in CSS. Tried different tools for blob. But this tool seems to be easy. Thanks for the tut.

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

    Muchas gracias Kevin por tu increíble contenido y volver a incorporar la pista de audio en español.

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

    It's always an adventure to explore something new with you..Kevin Sir
    Thank you so much for such amazing tips and tricks

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

    I love the Idea of spanish videos, The robot voice is a little akward when we are used to your voice, but is something pretty awsome to see in an english youtuber.

  • @DaveCollison
    @DaveCollison 2 ปีที่แล้ว

    For ages I thought you were saying "Hi there, my friend and friends." Made no sense. Now I know what you're actually saying. What are 'Supporters of Awesome'? Great video, again.

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

      Supporters of Awesome is the top tier on my Patreon, for people supporting my channel :)
      You also weren't the only one who heard that, lol.

  • @felixc.programs8209
    @felixc.programs8209 2 ปีที่แล้ว

    Great content as always! Your content is one of the main reasons I started my (still small) Tech TH-cam channel myself. Keep up the good work!

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

      Congrats on starting your own channel! It can take a long time for new channels to gain traction, but keep it up!

  • @KyleJMitchell
    @KyleJMitchell 2 ปีที่แล้ว

    I stumbled across this idea after following a link from this channel to the Open Props website! The section labeled "This site is built with Open Props" has a green blob for a background which was one of the things I looked at when I inspected the page (I figured there would be a lot of wizardry to find when looking in the dev tools for a page like that).

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

    Always have wondered how to do this! This is awesome that its so easy. also the plural of radius is radii :)

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

    This is amazing! No need for complicated js libraries!

  • @swerve1001
    @swerve1001 2 ปีที่แล้ว

    Its like you were following me on Scrimba. I was thinking of how to do this today and boom it pops up here. Good man

  • @skygrace4300
    @skygrace4300 2 ปีที่แล้ว

    Magnifique ! Merci beaucoup Kevin.
    You make me fall in love with css

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

    haven't seen easier tutorial for blob creation thx

  • @dnm1143
    @dnm1143 2 ปีที่แล้ว

    AWESOME! Thank you a lot for this knoledge!

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

    Hey Kevin. Do you have a video on how to make background shapes in general? I sometimes want to spice the interface with some colored shapes, but have really been struggling finding a good and maintainable way

  • @David-xl8jt
    @David-xl8jt 2 ปีที่แล้ว

    Always Learning!
    Love this video. Thanks KP

  • @coinpumpinfo
    @coinpumpinfo 2 ปีที่แล้ว

    Cool. I always learn something new on this channel. Thanks Kevin!

  • @CastleShield
    @CastleShield 2 ปีที่แล้ว

    I think it actually is the nicest animation in the world!

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

    Much needed!

  • @GarethField
    @GarethField 2 ปีที่แล้ว

    You seem so happy in this one

  • @SangareaGaming
    @SangareaGaming 2 ปีที่แล้ว

    For a moment or, tbh i think that i still not understanding if the audio was added by Alou or what. Anyways, awesome content Kevin, your videos just become better everytime that you upload.

  • @kylebelle246
    @kylebelle246 2 ปีที่แล้ว

    Why is it that these things are never thought? This would've made life so much easier

  • @davidch6746
    @davidch6746 2 ปีที่แล้ว

    Wow that new feature that reads in Spanish is awesome, for sure is strange but yeah, you will help a lot more around here. Grettings from Colombia

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

    This is good stuff, thank you🖤

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

    Blob curve faces up towards the right at an 10 11 12 o'clock position it covers all that area

  • @Lipiec-hi2fd
    @Lipiec-hi2fd 2 ปีที่แล้ว

    It is so cool I didn't know about you thank you very much!

  • @sylviaeguzoro7978
    @sylviaeguzoro7978 2 ปีที่แล้ว

    So cool. Thank you for sharing!

  • @mentor_prince
    @mentor_prince 2 ปีที่แล้ว

    Loving this... More of it boss🙏

  • @1909jaya
    @1909jaya 2 ปีที่แล้ว

    Love your work!
    Thank you!

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

    Gracias por subirlo con pista en español, no conocia esa pagina.

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

    *Great Video !*

  • @GoBlueGreg
    @GoBlueGreg 2 ปีที่แล้ว

    Very cool! Thanks for sharing!

  • @inklingboi8431
    @inklingboi8431 2 ปีที่แล้ว

    Wow i remember using that website because i found it in the resources and tips channel of your discord server :D

  • @frittex
    @frittex 2 ปีที่แล้ว

    It looks so good

  • @Jornes83
    @Jornes83 2 ปีที่แล้ว

    Interesting. Thank you for sharing this! :)

  • @KelseyThornton
    @KelseyThornton 2 ปีที่แล้ว

    That's really quite cool.
    The scientist in me wonders what will happen if you use (some) negative numbers there? Or maybe values which resultin overlapping points e.g. on an image that's 100px square using a value of >50px on opposing corners?

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

      If the number is larger than the size, it's like saying 50%, and if it's negative, nothing happens :\ - be fun if we could do stuff with that though!

  • @stefanpfadt4353
    @stefanpfadt4353 2 ปีที่แล้ว

    @Kevin Powell is it possible to get in touch with you for a smaller html css js project?

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

    Awesome!!! Thank you

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

    Hi Kevin, I am looking for some practical examples of using blob: for videos rather than URL links. Have you done any videos, could you point me to some practical examples as this is something I am struggling to understand as there are some limitations using this, cheers

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

    I work with css for 1 year and i think is the most esay part because is language who i learned more faster before that i had some years on python but Css is esay and beauty i challange my self with doing characters from cartoons is the best way to flex you skills ant to grow it more in every porotofilo i like to use characters made with css try it guys.

  • @thedacian123
    @thedacian123 2 ปีที่แล้ว

    I do have a question,How border radius is drown base on Radix,which is the maths behaind it?.Thnks

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

      It basically moves a point down on each axis, then makes a simple Bezier curve between those two points.

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

    Awesome tip!

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

    How would you make a squircle?

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

    Thank you very much!

  • @ayushman_sinhaa
    @ayushman_sinhaa 2 ปีที่แล้ว

    Can you please make a video on a move on hover blob like when you move your mouse over the blob it's gonna move towards the mouse, kinnda like a fluid movement

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

    thank u so much

  • @Rocadamis
    @Rocadamis 2 ปีที่แล้ว

    Does the box-shadow work with that and keep the shape?

  • @rahu1gg
    @rahu1gg 2 ปีที่แล้ว

    Finally svg animations made easy

  • @AdalbertoHernandezVega
    @AdalbertoHernandezVega 2 ปีที่แล้ว

    This question is unrelated, but I need to ask:
    What are these strange CSS things thatr appear in Firefox:
    [d__], [d__][style] {
    color: rgba(0, 0, 0, 1) !important;
    }
    I'm lost and don't know how to eliminate them, because are causing problems on links over dark background.
    Thanks

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

    The video started playing with a Spanish audio track and I was like 🤯

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

      Would love to know how good the translation is!

    • @terkacodes9028
      @terkacodes9028 2 ปีที่แล้ว

      What? How? Mine started only with spanish subs instead of the English cc I usually use 😁

    • @garumon7907
      @garumon7907 2 ปีที่แล้ว

      @@KevinPowell Aunque la voz se sintió muy neutral, me encanto! Ahora se me hizo más fácil seguir tu voz con el vídeo jajaja 🙌
      Gracias por ese trabajo extra para los hispanos 💖

    • @ezeeok
      @ezeeok 2 ปีที่แล้ว

      @@KevinPowell It's actually pretty good! Definitely understandable (I'd rather watch it in English though, but great option if you don't know the language well)

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

    oooohhhh pero que maravilloso que esté en español, muchas gracias

  • @eankrenzin4371
    @eankrenzin4371 2 ปีที่แล้ว

    Nice video 👍

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

    The #challenge for you is to create an image slideshow with delays between images using pure CSS. It's very easy 🤭

  • @greatdata6047
    @greatdata6047 2 ปีที่แล้ว

    what happened to beyond the CSS course?

  • @BigBadTubaDudeCRA
    @BigBadTubaDudeCRA 2 ปีที่แล้ว

    Sometimes I curse when watching your stuff because it blows my mind. I'm learning JS and I want to use this with it

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

    Making easter eggs with border-radius!
    BTW, I never get the syntax for this one right from the start and used it quite a few times. I always write each pair separated by its own slash getting four slashes instead of one.

  • @kalahari8295
    @kalahari8295 2 ปีที่แล้ว

    Mr. Kevin!!! 😀❤️🔥

  • @honestinvestorgs
    @honestinvestorgs 2 ปีที่แล้ว

    Love it❤

  • @utkumattaktas7994
    @utkumattaktas7994 2 ปีที่แล้ว

    Hi Kevin I learn a lot from your css videos . can you please do responsive web page projects that would be more efficient learning from building the web page from scratch to end .

  • @titusayyasamy3035
    @titusayyasamy3035 2 ปีที่แล้ว

    cool tip 👌👍

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

    Just searched how actually blop border raduis is work because I am keep recreating designs and I am facing really annoying blop so I need to really understand it & how it works 😢

  • @bibhuprasad6962
    @bibhuprasad6962 2 ปีที่แล้ว

    awesome !!

  • @alvaroprietovideos
    @alvaroprietovideos 2 ปีที่แล้ว

    All of a sudden, now all your videos are in Spanish!! how could it be? hahaha, it is very funny, Spanish is my mother tongue but Im used to listen your real voice. I guess it is a TH-cam setting or something? cool!

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

      You can go to the settings cog on the video and switch the audio track back to English. I have early access on a few thing YT is testing out, and if the browser language is Spanish, it will automatically switch it .

  • @luismanuelnoguerol8247
    @luismanuelnoguerol8247 2 ปีที่แล้ว

    Gracias!!!

  • @necronomicon-xmortis9362
    @necronomicon-xmortis9362 9 หลายเดือนก่อน

    win 7 dont agree with border radius...what am i missing it works on my other pcs just not win7

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

    jaja no mames acaso esto es en español wow no me lo esperaba !! por fin voy a entender

  • @JohnDoe-rk7ex
    @JohnDoe-rk7ex 2 ปีที่แล้ว

    Did TH-cam implement the auto translation into Spanish??? The audio is in Spanish 😶

  • @asyncFlex
    @asyncFlex 2 ปีที่แล้ว

    gracias pelado

  • @kelvindecosta5350
    @kelvindecosta5350 2 ปีที่แล้ว

    Make the effect on your T-shirt with css

  • @nmstoker
    @nmstoker 2 ปีที่แล้ว

    Awesome, even though you said "radiuses" 😉

  • @heshankumarasinghe4211
    @heshankumarasinghe4211 2 ปีที่แล้ว

    Thank u sir.....

  • @lefaxeureng9627
    @lefaxeureng9627 2 ปีที่แล้ว

    i wish i could give like 10 thumbs up at once

  • @mdnahidahmed4845
    @mdnahidahmed4845 2 ปีที่แล้ว

    ❤️❤️

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

    *Spanish !*

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

    2

  • @geforcesong
    @geforcesong 2 ปีที่แล้ว

    funny

  • @anasameen6104
    @anasameen6104 2 ปีที่แล้ว

    waaoooooo

  • @emudojo
    @emudojo 2 ปีที่แล้ว

    Dubbed to Spanish, that's new

    • @emudojo
      @emudojo 2 ปีที่แล้ว

      Although it's missing the magic you have in English

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

      I got early access to something YT is testing out. You can switch it back to English if you go to the settings cog, and change the audio track.

  • @caw5v
    @caw5v 2 ปีที่แล้ว

    or..... use an image lol

  • @fernan007do
    @fernan007do 2 ปีที่แล้ว

    es mejor en inglés JAJAJ

  • @chlorine8477
    @chlorine8477 2 ปีที่แล้ว

    Stop doing interesting stuff, you're polluting my "Liked Videos" list! 😤

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

    good work