CSS Art Crash Course - By Example!

Поделиться
HTML-код
  • Опубликовано: 2 окт 2024
  • ХоббиХобби

Комментарии • 79

  • @tonypatino1765
    @tonypatino1765 4 года назад +91

    A floating head gives us a tutorial

  • @amongdoomers9464
    @amongdoomers9464 4 года назад +41

    the best art I see is the man who is floating and teaching ...

  • @snigdhatiwari1992
    @snigdhatiwari1992 4 года назад +59

    his t shirt is acting like a green scree, its so weird.

  • @AceofInfo
    @AceofInfo 4 года назад +5

    Thanks man .. Caught up a lot.. I'm also looking forward to do complete CSS course :D

  • @supremeboy18
    @supremeboy18 4 года назад

    A real floating head creating a CSS art floating head... well played Sir Gary... it's like a headception... as always love all of your videos.

  • @abraiyan7984
    @abraiyan7984 3 года назад

    Reminds me of Harry Potter 1. The Invisibility Cloak!

  • @kiylo
    @kiylo 4 года назад +21

    When you use SASS but still write vanilla CSS

    • @amongdoomers9464
      @amongdoomers9464 4 года назад

      🤣🤣

    • @DITPen
      @DITPen 4 года назад +3

      @@amongdoomers9464 Wait what, you can do nesting on css? lmao

    • @amongdoomers9464
      @amongdoomers9464 4 года назад

      @@DITPen That was a joke, kid.

    • @AlJey007
      @AlJey007 4 года назад +2

      @@DITPen no, but that is the only thing he did. And also in some places, but then not the others

  • @mudrank4184
    @mudrank4184 4 года назад +8

    CSS art is topic that I want to learn since a lot of time from you.Thank Garry sir🤗

  • @964tractorboy
    @964tractorboy 4 года назад

    A great intro, thanks. You can go a long way just extending these ideas.

  •  4 года назад +2

    Floating head video 🤣. Very weird but it is somehow satisfying.

  • @nurudeenqoyyumtimilehin5475
    @nurudeenqoyyumtimilehin5475 4 года назад +3

    This is the reason I don't want to miss out on this channel, I don't even know that CSS art exist.

  • @inuke4fun832
    @inuke4fun832 4 года назад

    the floating head is soo good haha

  • @eishaenan2618
    @eishaenan2618 3 года назад

    .mouth {
    width: 180px;
    height: 180px;
    position: absolute;
    border: 10px solid rgb(0, 0, 0);
    border-radius: 50%;
    align-self: center;
    clip-path: circle(60% at 49% 100%);
    &::before, &::after {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 10px solid black;
    top: 102px;
    left: -9px;
    clip-path: circle(50% at 0 0);
    }
    &::after {
    left: 140px;
    top: 107px;
    clip-path: circle(50% at 100% 0);
    }
    From &::before.... my code shows error, IDK why, I have followed everything you've done

  • @parasmadan431
    @parasmadan431 4 года назад

    First Comment Please Like. Love from INDIA , design course

  • @CodeandDream
    @CodeandDream 3 года назад

    LOL the floating head reminded me of Harry Potter for some reason... XD

  • @blueink8356
    @blueink8356 3 года назад

    At 7.16 you repeat some code in the head::before {}
    why would it not automatically inherit those styles?

  • @AneesKhan-uz4mz
    @AneesKhan-uz4mz 4 года назад

    .gary-head {
    position: absolute;
    top: 80%;
    left: 5%;
    }

  • @alexanderschirmer4593
    @alexanderschirmer4593 4 года назад +3

    The floating head is a bit creepy lol

  • @kimahry10
    @kimahry10 4 года назад +1

    Hey DesignCourse, i saw you doing these portfolio reviews the other day and i noticed that almost no one gets a 9 or 10 / 10. is it posible that you could maybe make a template and ofc vid on where you would rate yourself a 9 or 10?

  • @anantsapkota394
    @anantsapkota394 4 года назад +1

    the use of the real head as such which speaks for real would be interesting and terrifying to use as a chatbot icon at the bottom right corner. How about making a tutorial on a chatbot that speaks to your questions with the help of AI.

  • @teflonrozay1074
    @teflonrozay1074 2 года назад

    Do I need to know all the CSS properties or attributes to be able do CSS art?

  • @blackwolf542
    @blackwolf542 4 года назад +1

    Thank You for the tutorial. This was very helpful as a crash course to give an idea of how to get going. I look forward to an indepth intermediate course.

  • @afrosoul4eva
    @afrosoul4eva 11 месяцев назад

    the floating head was amazing

  • @YosipmikeColin
    @YosipmikeColin 4 года назад +1

    Que software utilizas para grabar la pantalla amigo???

  • @franciscocamara6326
    @franciscocamara6326 3 года назад

    I need a floating head crash course

  • @RiccardoGavotti
    @RiccardoGavotti Год назад

    What Is the best way to fix the head shadow?

  • @GriffinAndThings
    @GriffinAndThings 4 года назад

    Hope you don't test positive for covid-19! Fingers crossed. Stay safe and healthy. Thanks for the content.

  • @twmcmahan
    @twmcmahan 4 года назад +1

    I'll stick with SVG's :D

  • @arcanosam
    @arcanosam Год назад

    Awesome video of yours. Thanks for sharing. Is it too much to ask the source code?

  • @vsevenexclusiv
    @vsevenexclusiv 2 года назад

    Thank for this!

  • @longnguyenthanh6876
    @longnguyenthanh6876 3 года назад

    thanks so much

  • @sdvloger621
    @sdvloger621 4 года назад

    Yeah it's acctuly cool ... Thanks busy for let us know about new css design 🥰

  • @fabiobaziota5919
    @fabiobaziota5919 3 года назад

    Amazing...🚀

  • @groovebird812
    @groovebird812 4 года назад

    Hey Gary, like this video. Thank you and stay healthy. wish you all the best.

  • @symonxd
    @symonxd 4 года назад

    @garry Is there a reason why you don't use auto-save in vscode? I use it and it's amazing, and I was wondering...
    Also, I think that opening up Inkscape or Adobe XD would be a million times quicker and easier than playing with all those CSS properties to create a graphic am I right xdd

  • @Osama_Ali_elngoly
    @Osama_Ali_elngoly 2 года назад

    Completed

  • @aspieangel1988
    @aspieangel1988 4 года назад

    I actually have an issue with my own website. It’s really screwed up and I cannot get certain elements to move. I have tried everything. It’s set up in bootstrap and dream weaver and all the code is right yet the text won’t move and if I remove certain elements it messes the entire thing up. Can you make a video with alternative ways to move stubborn elements?

  • @Nedwin
    @Nedwin 4 года назад

    The best thing here is, a tech expert who love music. And that is cool!

  • @Shenaniiganz
    @Shenaniiganz 4 года назад

    **Floating Head added to "teacher-library"**
    Now I can confidently say I had all types of teachers.

  • @rollre8247
    @rollre8247 2 года назад

    CSS art is very interesting. Thanks for showing us

  • @Diablerick
    @Diablerick 4 года назад

    Nice

  • @ikhtearuddinbilash239
    @ikhtearuddinbilash239 3 года назад

    ok gost

  • @AlJey007
    @AlJey007 4 года назад

    why do you need sass if you are not using any of its features?

  • @deejayerick
    @deejayerick 4 года назад

    Make more videos like this bro please!...

  • @NeelanshMathur
    @NeelanshMathur 4 года назад

    The floating head scared me at first XD. Nice chroma keying.
    Loved the tutorial mate

  • @shrutigupta445
    @shrutigupta445 4 года назад

    This was super fun to watch! Gonna try it myself!!

  • @tomitomion1179
    @tomitomion1179 4 года назад

    How did this head escape the jar?

  • @MiscMeTube
    @MiscMeTube 4 года назад

    I love this work

  • @CabbageYe
    @CabbageYe 4 года назад

    I've always found CSS art very interesting. Thanks for showing us how to start out.

  • @CrookzArtwork
    @CrookzArtwork 4 года назад

    love ur content brother

  • @fabiomendes6901
    @fabiomendes6901 4 года назад

    I love this channel!

  • @gilchristianpabilona8142
    @gilchristianpabilona8142 4 года назад

    Quick question as a beginner in web designer, where do I put my portfolio so that I can show it to my potential employer, where they can access the design since I can't afford a hosting rn.

    • @rishabhchaudhary9234
      @rishabhchaudhary9234 4 года назад +1

      if no backend is required you can host a static html/css/vanila js on git

    • @gilchristianpabilona8142
      @gilchristianpabilona8142 4 года назад

      @@rishabhchaudhary9234 Than kyou, ill search all about this, I'm new to all of this. :)

  • @aftabk1013
    @aftabk1013 4 года назад

    Floating head Gary 😂

  • @mudrank4184
    @mudrank4184 4 года назад

    Sir today you wore green😂

  • @techwake360
    @techwake360 4 года назад

    Hey Garry please have a look behind you ? there is a rat maybe on the rack
    hahahah

    • @DesignCourse
      @DesignCourse  4 года назад

      Crickets and other junk for now ;)

    • @techwake360
      @techwake360 4 года назад

      @@DesignCourse see its moving something there

  • @danielradosa
    @danielradosa 4 года назад

    did u consider recording withour ur face in the videos. I find it very distracting. thanks

  • @Shenaniiganz
    @Shenaniiganz 4 года назад +1

    Mom: How was your class today? I heard you had a new teacher
    Me: Yeah.. He was a bit of an airhead

  • @naifsameersaleh4238
    @naifsameersaleh4238 4 года назад

    3

  • @valroantvideos7322
    @valroantvideos7322 4 года назад

    5

  • @malcolm3498
    @malcolm3498 4 года назад

    4

  • @Chris-vt5zl
    @Chris-vt5zl 4 года назад

    why would someone do this over just drawing it out. This is only useful if you are going to animate it. if your going into animation, then anime.js is the way to go. this is a waste of time if you are not going to animate.

    • @DesignCourse
      @DesignCourse  4 года назад +4

      I think if nothing else at all, it's a great way to help you figure out CSS positioning and other selectors/properties.

  • @creativeworld2635
    @creativeworld2635 4 года назад

    Second comment!

  • @yugsoni2603
    @yugsoni2603 4 года назад

    First comment