CSS Tips And Tricks I Wish I Knew Before

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)

[@LamaDev]

Second part is here: kzbin.info/www/bejne/oXqxf6Zqqr6MpLs

[@ShawnRitch]

Well done and thank you :)

[@gabrielsaunders4642]

That “has” pseudo class is a game changer

[@mynameisjeff5971]

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

[@SamGoldenMan]

Animate it Reverse ​@@mynameisjeff5971

[@BassByTheBay]

@@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]

@@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?

[@Jrizy.]

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

[@muhammadzohaib543]

Sir, I just wanna thanks to you.

[@ctaylor960]

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

[@emerson-sheaapril8555]

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

[@ekeminiben6885]

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

[@naqieuddinazman4677]

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

[@coder5336]

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

[@vishnusidharth9309]

Yess! Tutorials on perspective will be very useful!

[@U53RN07F0UND]

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!

[@anversadutt]

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

[@killham1337]

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

[@vastargazing8957]

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

[@kirksurber7262]

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

[@buraksurumcuoglu8303]

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

[@brightokoro7073]

Nice work good to have you back

[@Sam-mn4vl]

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

[@junog5552]

As always, wonderful informative tutorial 🙏

[@EusebioJoveth]

Excelente conteúdo mestre.❤

[@alvin942]

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

[@NedumEze]

Waiting for part 2. Thanks, Lema dev.

[@olujobifolaranmi2133]

This is very helpful. Thank you lama dev

[@Deatomized]

Awesome and simply shown. Thank you !

[@lazolabucwa8821]

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

[@GameVerse215]

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

[@BlenderModeling-yd5ft]

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

[@LeEn-lz6lj]

This is amazing! Thank you so much

[@TerryLoughran]

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

[@jayanth704]

Great video 💯Need second part too✨

[@nayanbiswas370]

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

[@zahinhosen6579]

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

[@olayiimiika8618]

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

[@aniefiokasuquo4781]

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

[@mightydawnweb]

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

[@Adam-nw1vy]

Distilled awesomeness. Chapeau 🎩

[@Code2211]

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.

[@Leesdjo]

Amazing content honesty. Thanks very much Lama Dev

[@markcooke4866]

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

[@altantois]

Very simple explanation, thank you!

[@TheMetalMag]

The evolution is becoming amazing

[@user-iz8du7vr4p]

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

[@shakhzodgayratov5905]

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

[@samiransari-fg6kx]

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

[@techmate2890]

Greatt man❤

[@Mrameenmgm]

Useful tips, many thanks

[@456_rider]

Very informative...need videos like this❤

[@mohdali-yq8gq]

You always bring great contents. Your explanation is matchless.

[@nihal8129]

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

[@muawiznasir4926]

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

[@tomasburian6550]

Great tricks, brother. Thank you.

[@hrishikeshpawar3341]

Lama you are a gem

[@PLUS-sj4sf]

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

[@navidghasemi9685]

tnx a lot man, missed you

[@techfunwithaadil]

Thanks sir exciting about next css tips videos

[@gouravkumar772]

Life saver video, clear and precise 👍✨

[@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!

[@hardikchavada8974]

Amazing video🎉🎉. Very helpful

[@codelove9544]

Just just just just supper duper exciting 👌👌🔥🔥

[@blue_berry_pie64]

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

[@jamesgulland]

Such a cool vid! Subscribed ❤

[@shaquibahmed1545]

Informative and clear

[@misanthropicmusings4596]

Yes, more!

[@piusvictor8780]

Amazing tutorial, great job 👏

[@WaqarAhmad-jp4mw]

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

[@clintchrystie6727]

Thank you for sharing 🤜🤛

[@leewebs8566]

You are the best. I wish you success in this life and the hereafter.

[@alexdin1565]

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

[@dixitGogoi32]

Nice, man ... specially the last one

[@luciferevil9o908]

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

[@alainroos5383]

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.

[@cameroncoop7878]

Really cool thank you!

[@user-tt4gm2fx1m]

Just awesome sir.. You born to teach.

[@fierceplannerzzz-bh3ip]

Yes we need videos on transforms and perspective

[@StephenRayner]

Excellent! To the point

[@anirudhachakrabarty2050]

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

[@mrgames-Will]

This is amazing! Thank you! ❤

[@fasteditsyt]

Yes I lijed it! Thank you!

[@samimustafa7284]

the best explanation i could ever hear before.

[@IamDarkAngeL1]

The Legend is back !

[@devshashtag]

brooo so many useful tips! thank you

[@georgesword2012]

Wow, those tips are really usefull, thanks! 👍

[@mohammedsaleh5357]

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

[@ClipperRoad]

Awesome, thank you the tips are very helpful!

[@NoudvD63]

Thanks, very helpful.

[@randre83]

This is amazing l! Thanks for the video!

[@MrFuadPro]

You are amazing man.

[@user-dp9yj7or4x]

Perfect!

[@chiragchhajed8353]

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

[@tohirasadov689]

This is very useful and wonderful job

[@2difficult2do]

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

[@mathiaz943]

Yes, for tutorial!

[@ephraimbernard5773]

Very concise and informative

[@woolgum]

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

[@drawingsby_sid]

This is Goldmine ! Please keep making these videos

[@wotaLGD999]

helpful, Continue these tricks

[@joinglobalnetworks]

This is so great tutorial, THANK YOU so much.

[@serhii_barabash]

great examples ☺️💛

[@gamingbyweek9411]

Thank you very much for sharing those tricks!

[@sunnyssharma7363]

Please create a second part, thank you so much ❤