Top 10 CSS Tricks You Didn't Know!

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ก.ค. 2024
  • My new HTML5 & CSS3 COURSE IS OUT NOW!
    developedbyed.com/
    In this episode we are going to take a look at 10 awesome css tricks that you probably didn't know!
    Also excited to announce my Creative HTML5 and CSS3 Course releasing on december the 4th.
    Check out my courses:
    developedbyed.com/
    Microphones I Use
    Audio-Technica AT2020 - geni.us/Re78 (Amazon)
    Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
    BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
    Camera Gear
    Fujifilm X-T3 - geni.us/7IM1 (Amazon)
    Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
    PC Specs
    Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
    Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
    AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
    Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
    ASRock B450M PRO4 - geni.us/YAtI (Amazon)
    DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
    Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
    Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
    Logitech G305 - geni.us/PIjyn (Amazon)
    Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
    DISCLAIMERS:
    I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
    🎁Support me on Patreon for exclusive episodes, discord and more!
    / dev_ed
    🛴 Follow me on:
    Twitch: / developedbyed
    Twitter: / developedbyed
    Instagram: / developedbyed
    Github: github.com/developedbyed/
    #css3 #programming
  • วิทยาศาสตร์และเทคโนโลยี

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

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

    Topics:
    1. 1:36 - Pointer-events:all
    2. 5:38 - Block vs Inline
    3. 11:15 - Margin auto to center
    4. 12:21 - Line-height to center text
    5. 12:31 - p::selection and p::first-letter
    6. 14:08 - Ancla with smoth scroll
    7. 15:46 - Invert the colors on the screen
    8. 18:18 - Adapt text on risize
    9. 19:45 - Doble box-shadow
    10. 21:55 - Text Gradient

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

      Roberto Sanchez what do you mean? Like this is stuff to go on a resume?

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

      Go away Roberto

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

      @@jakem9519 learn english first. the word can be used in different contexts.

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

      Dharmang Learn English? The one who posted the comment really had no context to go off of, so if you have nothing constructive to say, fuck off snowflake.

    • @FordExplorer-rm6ew
      @FordExplorer-rm6ew 4 ปีที่แล้ว +1

      Thenkg u

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

    The Creative HTML5 and CSS course is officially launching on December the 4th!
    Thanks so much for all the wonderful support this year and hopefully next year we can do several other courses including javascript, ui design and more!

    • @sunnydhama
      @sunnydhama 4 ปีที่แล้ว

      $20? udemy courses for $5 and skillshare for $10 for a month for 1000s of courses

    • @SahraClayton
      @SahraClayton 4 ปีที่แล้ว

      will you make a full javascript course

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

      20 is not much.... if he is doing this on yt imagine what will u learn for 20$

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

      @@nekotrecixxx6019 12hours of jam packed content! Its going to be great! Thank you!

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

      Where can i buy it?

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

    He makes learning so much fun. Anyone can be an instructor, but not everyone can teach. He teaches by using enthusiasm and a love for the material. Thanks

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

      true asf .. i really don't understand why all instructors in universitys must be very lazy boring teachers

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

      th-cam.com/video/UZgBTXJenbg/w-d-xo.html

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

    I knew all these tricks back when Michael Jackson was still trying to setup his clothing store... Billie Jeans
    For real though, great video!!!!

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

    1:28 "I might smile right now but I am actually in pain"
    Yeah, same here.

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

    Ed, every one of your videos makes me smile and I get to learn something new in the process.
    That's the best kind of learning in my book! 👍
    Thank you!

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

    Love the last one, tried it one time but didn't realize I needed to change the display to inline, you're a beast!

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

    btw: using display: inline-block (or even inline-flex) will give you the benefits of inline and block... takes only the space thats needed, but takes margin, height and stuff... great vid (as usual 🙂)

  • @sebastiaanvv
    @sebastiaanvv 4 ปีที่แล้ว

    For three months I'm learning to program as a new hobby. So yes, most of the content I did not know ;)
    I'm so happy that people like you make these enthousiastic video's and tutorials for other people to learn from. Thank you thank you!!! I hope you realise you are bringing a lot of joy and professionalism into the world by doing this.

  • @jonyjalfon94
    @jonyjalfon94 4 ปีที่แล้ว

    Hey Ed i've been watching your videos for a while and i just realized how the background music makes it way more watchable and less monotone than other tutorial videos. Thank you for the amazing content and keep it up!!

  • @Tizmo-tt9ry
    @Tizmo-tt9ry 4 ปีที่แล้ว +60

    i knew all of these tricks what you mean i knew this since micheal jackson was chamona

  • @CosminSerbanDesign
    @CosminSerbanDesign 4 ปีที่แล้ว

    congrats for the 200k - happy to hear you're releasing a course!

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

    The 'I am doing tha weird accent again' just killed me bro ! Self awarness = 1000% lmao

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

    OMG Ed, why are you so good to us? Recent follower and already loving your content so much :) :) :)

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

    I just watched the whole video without noticing that it's 24min long !!! I enjoy your content so much keep up the hard work !! 💛 from Morocco

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

    $20 for the course!?!? That is an insane price. I hope everyone picks it up. I know I will. Dev Ed you da best boi!

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

      Why, when you can get a 40 hour ("aour" not "haour") course on udemy for $9

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

      Dan Palu I took the course. It was great the way he explained everything easily and he is an engaging teacher. I felt I leaned a lot and maybe I could get that from udemy but I was entertained along the way as well. If you need to learn the concepts I suggest getting it

    • @Anto-xh5vn
      @Anto-xh5vn 3 ปีที่แล้ว

      @@SeanClaDesigns Different tastes

  • @miminurjannah7501
    @miminurjannah7501 4 ปีที่แล้ว

    I'm just loving you you! Your intro is so hilarious.Thanks for sharing your knowledge and time with us

  • @taylortoast2
    @taylortoast2 4 ปีที่แล้ว

    Waited all day to watch your videos. Just to savor it. Looking forward to Saturdays.

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

    You are the best!!! I cannot wait to purchase your course. I always go for free courses but I’m sure that yours will worth every penny, even if I will not learn anything new I’m happy to support you.

  • @alcymn
    @alcymn 3 ปีที่แล้ว

    awesome content Ed! loving the lofi background music as well:D

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

    13:48 Luckily that *L* wasn't a *D* otherwise we would just sit here in awkward silence.

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

    "Internet Explorer can go to the trashcan." OOF

  • @nubcops220
    @nubcops220 4 ปีที่แล้ว

    I love how you seem so nervous but you still manage to pull those jokes I love it

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

    Great video! Adapting code on risizing, margin auto to center and adding gradient to the text stroke me! You are a CSS God, brother!

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

    You're genuinely a great guy! Thanks so much!

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

    Wow this was way more helpful than I could've ever imagined

  • @terraflops
    @terraflops 4 ปีที่แล้ว

    I really enjoyed the last one!! Thanks so much Ed.

  • @filiph.1409
    @filiph.1409 3 ปีที่แล้ว

    Just bought your full javascript and html/css course! Keep up the good work! :D
    And thanks!

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

    Definitely getting the course, you should do an animations course with gsap next :D

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

    Great video Dev Ed 😉🙂 Keep it up!!

  • @MaciejObi
    @MaciejObi 4 ปีที่แล้ว

    Hello Ed!
    Does the course cover inputs styling and checkbox tricks like menu open/close?

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

    I can't wait to buy this courseeee!!!

  • @sheeraz1022
    @sheeraz1022 4 ปีที่แล้ว

    This was awesome. Most of the things I didn't knew before. Please keep on sharing similar things.

  • @abgestaubt
    @abgestaubt 4 ปีที่แล้ว

    I'm psyched about the course!

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

    Thanks Ed. Great tutorial video!

  • @tarunsharma5364
    @tarunsharma5364 3 ปีที่แล้ว

    this is the best video i've seen on youtube today.....It really made my day

  • @ahnaf135
    @ahnaf135 3 ปีที่แล้ว

    Awesome video dude. I learned a lot!

  • @Tesla-Live____
    @Tesla-Live____ 4 ปีที่แล้ว

    Hey, thanks for your videos i have one question and would be appreciate it if you can help.
    My href in nav tag are affecting the whole body and making it clickable also, as also i need to make empty not clickable space between the section in menu.
    Thanks

  • @kaduzinhoba
    @kaduzinhoba 4 ปีที่แล้ว

    So cool tips! thank you sooo much!

  • @ethantaylor8370
    @ethantaylor8370 4 ปีที่แล้ว

    Man epic vid. Its got a few little tricks I prob should have known but honestly I didn't. Thanks man.

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

    Ed, do you update the courses you have available for sell? I saw your courses content and I am amazed man. I am buying all

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

    Your teaching style makes me feel like less of an idiot. :D CSS is my least favorite. I needed all of these tricks. Thanks!

  • @TheVictorcor
    @TheVictorcor 3 ปีที่แล้ว

    Loved those tricks! Thank you so much!

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

    started like i will find one or two tricks, but was a good one video, learned much more !

  • @ArianMozafari
    @ArianMozafari 4 ปีที่แล้ว

    I always had the first issue, thank you so much Ed! (The video playback is not finished yet)

  • @frontmonkey2322
    @frontmonkey2322 4 ปีที่แล้ว

    I love this kind of video > < thanks Dev

  • @kaunas163
    @kaunas163 4 ปีที่แล้ว

    you can also use display: inline-block, to have mixed functionality between display: block and display: inline

  • @Dubstepschule
    @Dubstepschule 3 ปีที่แล้ว

    So entertaining!
    You are my favorite code guy!

  • @marcusmedellin1397
    @marcusmedellin1397 4 ปีที่แล้ว

    Great Video and thanks for the new HTML5/CSS3 Course. Looking forward to more videos.

  • @ethans7395
    @ethans7395 3 ปีที่แล้ว

    Very helpful video, thanks for the tips!

  • @MichoSchmidt
    @MichoSchmidt 4 ปีที่แล้ว

    Great tips Dev ed ! :D What camera do you use?

  • @wykrytotrojana
    @wykrytotrojana 4 ปีที่แล้ว

    Idk why but i enjoy watching your videos :) great job !

  • @mysteryguy793
    @mysteryguy793 4 ปีที่แล้ว

    how do you make the navigation stick and the page as a whole to be mobile friendly?

  • @RobertWildling
    @RobertWildling 4 ปีที่แล้ว

    Wow! I actually really thought I'd know them all, but, hell, was I wrong! The "dark mode" effect is awesome! Thanks so much!
    As for the shadows and VSCode: just hit tab and then 0 directly instead of first deleting all the text hints...

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

    Thank you so much for all your videos, I have been enjoying watching them. you have a funny and incredible way for learning!!.😍😍😍🥰

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

    Just bought your HTML/CSS course! So excited to start. Thanks for your hard work! 😄

  • @BhargavaMan
    @BhargavaMan 4 ปีที่แล้ว

    Whoooa dude you hit 200K, congrats!

  • @digigoliath
    @digigoliath 4 ปีที่แล้ว

    Cool. Totally enjoyed the video & love the tips & tricks.

  • @mohammadfallah.rasoulnejad5379
    @mohammadfallah.rasoulnejad5379 4 ปีที่แล้ว

    dude, i think i should buy your courses right now! very good explanations.

  • @miketkachenko5939
    @miketkachenko5939 4 ปีที่แล้ว

    Woah there! That filter thing just blew my head off!

  • @pierrebertin4364
    @pierrebertin4364 4 ปีที่แล้ว

    There is nothing better than basic things, very nice video !

  • @devaes
    @devaes 4 ปีที่แล้ว

    Thank you Ed . I really learn a lot from you .

  • @vitamax3777
    @vitamax3777 4 ปีที่แล้ว

    Thank you! It is high level, and so simple

  • @BadGirl-pn3qu
    @BadGirl-pn3qu 3 ปีที่แล้ว

    Awesome! Thank you for sharing :)

  • @purpaleslushii
    @purpaleslushii 4 ปีที่แล้ว

    You have a great personality and are really funny without trying to be. Love your Videos

  • @ApoLk_
    @ApoLk_ 3 ปีที่แล้ว

    this was the man who taught me to *center a div,* INSTANT subscribe & like & changed my life & will never forget ty ty

  • @art3myst962
    @art3myst962 3 ปีที่แล้ว

    ed can you pls tell which app do you use to write html and css code ls it will be very helpful

  • @sacharequiem
    @sacharequiem 4 ปีที่แล้ว

    Love yours videos dude, to much positive vibes 👌👌

  • @fergusfergus4495
    @fergusfergus4495 3 ปีที่แล้ว

    Bro your videos and knowledge are so so amazing, thanks u so much for shared it’s with us

  • @thuglifegaming7228
    @thuglifegaming7228 4 ปีที่แล้ว

    Hey can I ask for you help?
    I have created a website but I don’t know how add icons on it, though I have tried the FontAwsome as well but it does not give the very first link to connect that with my own website.

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

    Thanks, I learn a lot from this.

  • @AtifKhan-cm8qv
    @AtifKhan-cm8qv 4 ปีที่แล้ว +1

    Thank you Dev Ed you teached me a lot. Thank you so much 😀😀😀

  • @digitalankit3309
    @digitalankit3309 4 ปีที่แล้ว

    i have a query.. as you know that nowadays lots of tools appear for making static websites or even dynamic websites without writing code.
    is there any way to create ios and Andriod apps by using any tool?

  • @anonymfilm2717
    @anonymfilm2717 3 ปีที่แล้ว

    22:36 why does the webkit-background-clip: text; get an yellow underline beneath it in the css code?

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

    Hello :) What extension do you use in vs code to autoformat your code after you save a file? Thanks

    • @CodeNascher_
      @CodeNascher_ 4 ปีที่แล้ว

      most likely 'prettier'

  • @oliverarensbach7025
    @oliverarensbach7025 3 ปีที่แล้ว

    you saved my life with the first one THANKS!

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

    19:40 I fell slightly asleep while watching the video then boom!! I woke up again, Thanks for the CSS tricks,

  • @Sysix
    @Sysix 3 ปีที่แล้ว

    5:10
    you can use tab to get focus on it. When the button is an a-tag that could be problematic.
    Use better visibility:hidden + opacity

  • @rakeshmanathana
    @rakeshmanathana 4 ปีที่แล้ว

    Your studio looks awesome!

  • @MirkoTorrisi92
    @MirkoTorrisi92 4 ปีที่แล้ว

    last tips are absolutely the best ones. MERCI!!!!

  • @vinaykashyap6363
    @vinaykashyap6363 4 ปีที่แล้ว

    Hey, Ed is SASS included as part of the site development? All the best for your new launch!

  • @erwincalayag9463
    @erwincalayag9463 3 ปีที่แล้ว

    You saved me tons of time. Thank you!

  • @koko5498
    @koko5498 4 ปีที่แล้ว

    The last gradient explanation was the best distinction explanation of inline and block elements

  • @Luuck3Fire
    @Luuck3Fire 4 ปีที่แล้ว

    Scroll-bar behavior was the most awesome function that u show in my opnion.

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

    Thank you very much for 14:08 this is something which really looking for

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

    0:28 “lets take a look at these cool pricks”😂

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

      he said "tricks" not pricks

    • @BBlackSmitHH
      @BBlackSmitHH 3 ปีที่แล้ว

      @@mrgoferdather it sounded like pricks🤷🏻‍♂️

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

    Thank you for video, and good luck with channel!;)

  • @ajinkyadeshpande3992
    @ajinkyadeshpande3992 4 ปีที่แล้ว

    One of the best Video !!
    Love your Videos......

  • @imrulkayes1914
    @imrulkayes1914 4 ปีที่แล้ว

    what did extention did you used im vscode for html and css?

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

    Fantástico ! 🙌Amazing data ed! 😻Greetings from argentina 🇦🇷

  • @user-gi2qd4js6o
    @user-gi2qd4js6o 2 ปีที่แล้ว

    awesom man i like it!!!

  • @arunace
    @arunace 4 ปีที่แล้ว

    Awesome video, thanks for the small small tricks :D :D :D :D

  • @nicktriantafillidis1447
    @nicktriantafillidis1447 4 ปีที่แล้ว

    loved the tricks, very helpful

  • @mythicsoul_
    @mythicsoul_ 4 ปีที่แล้ว

    Insanely useful video glad I found you.

  • @5upl1an
    @5upl1an 4 ปีที่แล้ว

    *this will make a fine addition to my collection*

  • @aniltokraliya3571
    @aniltokraliya3571 4 ปีที่แล้ว

    Thank you. These tricks are amazing.

  • @krishcm3016
    @krishcm3016 4 ปีที่แล้ว

    Great video!!🙌🙌🤗

  • @danielpmo
    @danielpmo 4 ปีที่แล้ว

    Awesome. I love your videos. Just watched the other video about view time, entertainment vs education. Just thought I would try to give you a sugestion, but first understand my viewing experience. I was about to not watch everything after having had my mind blown by the pointer-events, than I noticed the dark mode and time advanced to see something else. After that I decided to rewind and watch everything. I think what I might have realized that can serve as a suggestion is if I had been briefed on what to expect from those things it could've helped me to decide to watch it all, or maybe on the transitions you could brief, like "This next one is this and I love because of this and it does that. Let me show it to you.". Good luck, keep fun and keep posting.

  • @skk20I
    @skk20I 4 ปีที่แล้ว

    I wonder with the Text Gradient tips, does that mean we can do the same with a picture background ?

  • @Mahdi_Ashouri
    @Mahdi_Ashouri 4 ปีที่แล้ว

    dude i love u, u are great developer!