CSS Tips And Tricks I Wish I Knew Before

Рет қаралды 410,086

Күн бұрын

Unique CSS tips and tricks that every front-end developer should know. Most underrated CSS properties and pseudo classes, effects. #css #webdesign
Watch the second part: • CSS Tips And Tricks 2 ...
Join the newsletter: list.lama.dev
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code:
github.com/safak/css-tips
Join Lama Dev groups
Instagram: / lamawebdev
Facebook: / lamadev
Discord: / discord
Twitter: / lamawebdev
00:00 CSS Clip Path
02:32 CSS Perspective
04:57 CSS Aspect Ratio
05:47 CSS Filters (Blur, Gray Scale Etc)
07:18 Styling Inputs
08:20 CSS :is, :where, :has, :not Tutorial
10:28 HTML CSS Video Captions (Subtitles)

Пікірлер: 434

@LamaDev 7 ай бұрын

Second part is here: kzfaq.info/get/bejne/oa9-gdZl2r-9no0.html

@ShawnRitch 4 ай бұрын

Well done and thank you :)

@okparaeric7637 8 күн бұрын

I would love to know more about transform and perspective please ❤

@gabrielsaunders4642 8 ай бұрын

That “has” pseudo class is a game changer

@mynameisjeff5971 4 ай бұрын

10:19 when you click the spoiler button how do you make it unblur without any javascipt

@SamGoldenMan 4 ай бұрын

Animate it Reverse @@mynameisjeff5971

@BassByTheBay 3 ай бұрын

@@mynameisjeff5971 You could use a pseudo-class on the button, e.g.: .review:has(button:focus) .content { filter: none } But that only works while the button is focused. You could do the checkbox hack, but it's brittle and unnecessarily complex. It really is worth just doing the small amount of simple javascript to add/remove the class name that unblurs the text.

@NewLord 2 ай бұрын

@@mynameisjeff5971Instead of a button use a combination of label + checkbox. Set the "id" attribute on the checkbox and use the "for" attribute on the label to reference it. Style the label as a button. Then you can do this: .review:has(label) input[type="checkbox"] { display:none } .review:has(label) input[type="checkbox"]:checked ~ .content { filter:blur(0) } Your HTML has to be like this: Show Spoiler This is something I also use for pure CSS based hamburger menus.

@shadowsenpai1 Ай бұрын

@@mynameisjeff5971 umm maybe by adding onclick action to button or to change the blur lvl?

@muhammadzohaib543 9 ай бұрын

Sir, I just wanna thanks to you.

@yawkukaladdis27 5 күн бұрын

👍

@emerson-sheaapril8555 5 ай бұрын

You litterly blew my mind and i love how you tied everything together at the end. I really had bo idea you could add captions like that either! Im curious, as im working on a project right now. Would it be possible to highligh each word to bring emphasis to it as people spoke? Currently, we are just doing hard copies but i like this idea as it allows for more flexibility

@U53RN07F0UND 8 ай бұрын

You pack so much useful relevant information into a short video. Amazing job! I haven't checked yet, but if you haven't, please do make a second part to this video!

@killham1337 8 ай бұрын

Very useful, very straightforward and with the subtitles to the vide you have definitely earned a sub

@ekeminiben6885 9 ай бұрын

This is really helpful, I can't wait to see the second part of it. Thanks

@anversadutt 9 ай бұрын

Big yes for transforms and perspective, definitely will be an engaging one, pls do a tutorial on that

@coder5336 9 ай бұрын

You are the best man. I learned to design with your tutorials

@naqieuddinazman4677 9 ай бұрын

This is amazing stuff ! Thank you for creating this content 🔥🔥🔥

@shakhzodgayratov5905 6 ай бұрын

Love it mate! Didn't know this before! Thanks

@GururajSudhindra 9 ай бұрын

this was helpful, Thank you, hope to see the second part soon

@ctaylor960 8 ай бұрын

Been using CSS for years and these tips are new. Thank you.

@stuntersagar5212 5 күн бұрын

Is html css js is enough to get a 5 lpa job ??

@buraksurumcuoglu8303 9 ай бұрын

Very informative video, learned a lot myself. Thank you for providing the quality content as always.

@vastargazing8957 8 ай бұрын

Pretty awesome! Thanks. We're waiting for more videocss.

@CodeMom 8 ай бұрын

Yes please create more tutorials on animation. New subscriber here. Love your way of teaching 😊

@vishnusidharth9309 7 ай бұрын

Yess! Tutorials on perspective will be very useful!

@Jrizy. 8 ай бұрын

This is amazing and incredibly helpful + well explained and demonstrated! Thank you for this. Please keep creating these types of videos!

@fleboho 7 күн бұрын

Stight to the point, no time wasting. Love it.

@emersonguerra2772 Ай бұрын

Man, thank you so much for this! I was looking on how to do this clipping path animation for almost a year and I just don't knew what to look for!

@aniefiokasuquo4781 7 ай бұрын

This is kinda great...just answered so many "hows" questions have been asking since Thanks

@kirksurber7262 8 ай бұрын

I'll be trying a few of those! Thank you!

@alvin942 9 ай бұрын

OMG thank you for reveal these knowledges to us. Those are exactly the reason I want to follow into this industry

@TerryLoughran 8 ай бұрын

Just found your channel... Awesome! Thank you for the cool videos they are fantastic for an aspiring web dev.

@ClipperRoad 20 күн бұрын

Awesome, thank you the tips are very helpful!

@Code2211 9 ай бұрын

Awesome, Please make more videos on different CSS Properties and Values. It is really really helpful to understand the concepts of those advanced CSS Properties and Values.

@samiransari-fg6kx 9 ай бұрын

What an amazing secrets you reveal today, Please continue this series>>>> Thank you

@BlenderModeling-yd5ft 3 ай бұрын

This is awesome! Thank you so much for the information!

@Sam-mn4vl 9 ай бұрын

Great video! I learnt a lot. Would love to see another one or a video on perspective.

@Deatomized 8 ай бұрын

Awesome and simply shown. Thank you !

@gamingbyweek9411 3 ай бұрын

Thank you very much for sharing those tricks!

@zahinhosen6579 9 ай бұрын

thanks a lot for this video dude I was totally unaware of this css tricks and if possible I would like to see more parts of this video

@nayanbiswas370 8 ай бұрын

Owww Thanks a lot.... thats really Cool!! And with much details..cant wait for part2

@mohdali-yq8gq 9 ай бұрын

You always bring great contents. Your explanation is matchless.

@mightydawnweb 4 ай бұрын

Thank you for the great tutorial! Also, cute video at the end there! 😂 Subscribed

@anirudhachakrabarty2050 9 ай бұрын

I want 100parts of those kind videos ... Really awesome tutorial... Lama Dev always Rocks... I learnt Nextjs from your video as well..

@Leesdjo 9 ай бұрын

Amazing content honesty. Thanks very much Lama Dev

@joinglobalnetworks Ай бұрын

This is so great tutorial, THANK YOU so much.

@altantois 7 ай бұрын

Very simple explanation, thank you!

@GameVerse215 8 ай бұрын

this is one of the best video i ever learnt about css .... thanks alot

@PLUS-sj4sf 8 ай бұрын

Thank you so much!!!!! awesome video! Yes please, these type of practical videos are amazing, would be great to focus more on each title with different examples! thanx a million

@lazolabucwa8821 8 ай бұрын

I subscribed before reaching the end of the video. You're a great teacher!

@junog5552 9 ай бұрын

As always, wonderful informative tutorial 🙏

@alainroos5383 6 ай бұрын

Great job as usual ! Thank you! For some reason, I couldn't get the captions to appear on Chrome but it worked fine on Safari.

@markcooke4866 8 ай бұрын

Great tips! I wish I knew before, but thanks to you I now know.

@gouravkumar772 Ай бұрын

Life saver video, clear and precise 👍✨

@alexdin1565 8 ай бұрын

this is my first time i see your video from recommendation and it's amazing channel and content

@nihal8129 7 ай бұрын

This video was so awesome! I love it! Thank you so much. Please make more videos like this. 🤩

@muawiznasir4926 5 ай бұрын

Thank you, Lama Dev. That's such a nice video. I love it.

@chiragchhajed8353 9 ай бұрын

Wow I knew clip-path before but what you did was mind blowing

@user-zs9sx4wd2m 2 ай бұрын

Wow that's crazy for me right now . I like this tip ! Thanks

@NedumEze 8 ай бұрын

Waiting for part 2. Thanks, Lema dev.

@TappinMyFoot 8 ай бұрын

Some great tips. Blur for spoilers makes sense. But please don’t give the impression that blur protects sensitive information. Blurring images or text makes it hard to see on the screen. But the original text or image are available to the user in the page source. For text, screen readers would announce it like regular text. So, nobody should rely on blur styles to prevent people from seeing what was loaded into the page.

@YeahEsCereal 4 ай бұрын

Would screen readers read text with a display of none?

@TappinMyFoot 4 ай бұрын

Screen readers would not read display:none, but would read text that has a blur style but doesn't have display:none. My point was that, for sensitive info, neither blur, nor display:none is enough to protect anything the visitor shouldn't know. If it's in the http response, the user can see it in inspect or view page source.

@YeahEsCereal 4 ай бұрын

@@TappinMyFoot ok thanks!

@blue_berry_pie64 9 ай бұрын

Wow Thank Lama, the video has widen my css knowledge into a whole new level :O.

@olayiimiika8618 9 ай бұрын

what a good tutorial 🙌 ....... thanks so much , i would love to see the second part

@tubeta028 7 ай бұрын

Hi, thanks so much, I have not known or used these tricks before. Great tutorial.

@cariyaputta 26 күн бұрын

Love these videos. Thanks so much.

@mohammedsaleh5357 6 ай бұрын

That's awesome I just starting learning Css and this video make me more interesting big heart bro ❤️

@devshashtag 7 ай бұрын

brooo so many useful tips! thank you

@randre83 7 ай бұрын

This is amazing l! Thanks for the video!

@whitemadrid2838 8 ай бұрын

Owwww man You just a saved me! That outline of input box bothered me a lot finally get rid of it.. Thanks a lot ❤️

@tomasburian6550 8 ай бұрын

Great tricks, brother. Thank you.

@olujobifolaranmi2133 9 ай бұрын

This is very helpful. Thank you lama dev

@WarframeCrunch 9 ай бұрын

With the video one with captions and ::cue is real;y helpful for WCAG, thanks I didn't known about that

@journeytocoding816 6 ай бұрын

Thank you sir. I havent used most of them except transition. So glad to know more about css❤❤❤❤❤❤

@BB-oq6uu 5 ай бұрын

Amazing tutorial... Just what I needed

@arshoweo8701 7 күн бұрын

Watching this a few hours before exam and I’m grateful for it ❤️

@Screenwave007 5 ай бұрын

Thank you for these tips . It's will me a lot. ❤

@brightokoro7073 9 ай бұрын

Nice work good to have you back

@SoniaChavez-je7hq 3 ай бұрын

New styles ! Thanks for teaching

@hardikchavada8974 8 ай бұрын

Amazing video🎉🎉. Very helpful

@magoxxii 7 ай бұрын

So great! Thanks! 🎉

@mrgames-Will 7 ай бұрын

This is amazing! Thank you! ❤

@chrisroberts43 6 ай бұрын

This is incredible! Thnak you

@jayanth704 9 ай бұрын

Great video 💯Need second part too✨

@LeEn-lz6lj 8 ай бұрын

This is amazing! Thank you so much

@techfunwithaadil 9 ай бұрын

Thanks sir exciting about next css tips videos

@user-iz8du7vr4p 8 ай бұрын

Thanks alot sir, we want more videos like this!!

@georgesword2012 9 ай бұрын

Wow, those tips are really usefull, thanks! 👍

@WaqarAhmad-jp4mw 9 ай бұрын

Sure would love have a detailed tutorial on perspective and creating amazing layouts using it.

@gabrielkingori3375 2 ай бұрын

Thanks awesome,, I really love the tutorial.

@woolgum 7 ай бұрын

Great, fun and easy to follow. More videos please. :)

@anas980 10 сағат бұрын

Great video! Thank you

@456_rider 9 ай бұрын

Very informative...need videos like this❤

@nadeemakramansari1331 8 ай бұрын

OMG.... you nailed the css...damn amazing....I learnt a lot from u. 2mrw M gonna practice those skills.

@throbicon 3 ай бұрын

Thank you! Very useful! 😄

@NoudvD63 9 ай бұрын

Thanks, very helpful.

@2difficult2do 9 ай бұрын

Thank you for all content and exlanation. You are very good teacher.

@huthifabakeer3023 5 ай бұрын

It is just amazing Thank you so much ❤❤❤❤

@qasimalikan3559 5 ай бұрын

Amazing video, very useful ❤

@tohirasadov689 9 ай бұрын

This is very useful and wonderful job

@albedesigns 5 ай бұрын

Great video! Subbed to your channel also since I'm new here lol Definitely want to see the next video!!!

@luciferevil9o908 9 ай бұрын

It was really helpful and i appreciate you for new tips :) see you in next one

@karnankarna8405 3 ай бұрын

Nice css tricks i knew css but this new and helpful development side ❤❤

@EusebioJoveth 9 ай бұрын

Excelente conteúdo mestre.❤

@dixitGogoi32 9 ай бұрын

Nice, man ... specially the last one

@hariprasatht9082 3 ай бұрын

awesome tricks, subscribed !

@Mrameenmgm 8 ай бұрын

Useful tips, many thanks

@official-k.i.d.u-k5750 8 ай бұрын

Very Helpfulll....we need 30 days of css tricks code❤❤

@piusvictor8780 9 ай бұрын

Amazing tutorial, great job 👏

@TheMetalMag 8 ай бұрын

The evolution is becoming amazing