CSS Tips And Tricks I Wish I Knew Before

8 місяців тому

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: ukposts.info/have/v-deo/o3l_gqlrrI-Kz40.html
Join the newsletter: list.lama.dev
If it is valuable to you, you can support Lama Dev.
Join: ukposts.info/the/OxWrX5MIdXIeRNaXC3sqIg.htmljoin
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code:
github.com/safak/css-tips
Join Lama Dev groups
Instagram: lamawebdev
Facebook: groups/lamadev
Discord: discord.gg/yKremu4mPr
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)

КОМЕНТАРІ: 418

@LamaDev 6 місяців тому

Second part is here: ukposts.info/have/v-deo/o3l_gqlrrI-Kz40.html

@ShawnRitch 4 місяці тому

Well done and thank you :)

@gabrielsaunders4642 7 місяців тому

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 3 місяці тому

Animate it Reverse @@mynameisjeff5971

@BassByTheBay 2 місяці тому

@@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 12 днів тому

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

@muhammadzohaib543 8 місяців тому

Sir, I just wanna thanks to you.

@Jrizy. 8 місяців тому

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

@ctaylor960 7 місяців тому

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

@U53RN07F0UND 7 місяців тому

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 8 місяців тому

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

@vishnusidharth9309 7 місяців тому

Yess! Tutorials on perspective will be very useful!

@ekeminiben6885 8 місяців тому

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

@naqieuddinazman4677 8 місяців тому

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

@GururajSudhindra 8 місяців тому

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

@coder5336 8 місяців тому

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

@CodeMom 7 місяців тому

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

@vastargazing8957 8 місяців тому

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

@killham1337 8 місяців тому

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

@emerson-sheaapril8555 4 місяці тому

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

@Code2211 8 місяців тому

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.

@brightokoro7073 8 місяців тому

Nice work good to have you back

@buraksurumcuoglu8303 8 місяців тому

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

@kirksurber7262 8 місяців тому

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

@junog5552 8 місяців тому

As always, wonderful informative tutorial 🙏

@alvin942 8 місяців тому

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

@lazolabucwa8821 7 місяців тому

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

@samiransari-fg6kx 8 місяців тому

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

@NedumEze 8 місяців тому

Waiting for part 2. Thanks, Lema dev.

@GameVerse215 8 місяців тому

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

@EusebioJoveth 8 місяців тому

Excelente conteúdo mestre.❤

@jayanth704 8 місяців тому

Great video 💯Need second part too✨

@Sam-mn4vl 8 місяців тому

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 !

@TheMetalMag 8 місяців тому

The evolution is becoming amazing

@olujobifolaranmi2133 8 місяців тому

This is very helpful. Thank you lama dev

@nayanbiswas370 7 місяців тому

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

@clintchrystie6727 8 місяців тому

Thank you for sharing 🤜🤛

@PLUS-sj4sf 7 місяців тому

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

@TerryLoughran 8 місяців тому

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

@navidghasemi9685 8 місяців тому

tnx a lot man, missed you

@anirudhachakrabarty2050 8 місяців тому

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

@LeEn-lz6lj 8 місяців тому

This is amazing! Thank you so much

@alexdin1565 7 місяців тому

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

@Mrameenmgm 8 місяців тому

Useful tips, many thanks

@altantois 7 місяців тому

Very simple explanation, thank you!

@zahinhosen6579 8 місяців тому

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

@456_rider 8 місяців тому

Very informative...need videos like this❤

@user-iz8du7vr4p 7 місяців тому

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

@olayiimiika8618 8 місяців тому

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

@Adam-nw1vy 8 місяців тому

Distilled awesomeness. Chapeau 🎩

@Leesdjo 8 місяців тому

Amazing content honesty. Thanks very much Lama Dev

@hardikchavada8974 7 місяців тому

Amazing video🎉🎉. Very helpful

@tomasburian6550 8 місяців тому

Great tricks, brother. Thank you.

@shaquibahmed1545 7 місяців тому

Informative and clear

@techfunwithaadil 8 місяців тому

Thanks sir exciting about next css tips videos

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

@piusvictor8780 8 місяців тому

Amazing tutorial, great job 👏

@hrishikeshpawar3341 8 місяців тому

Lama you are a gem

@techmate2890 7 місяців тому

Greatt man❤

@markcooke4866 8 місяців тому

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

@jamesgulland 8 місяців тому

Such a cool vid! Subscribed ❤

@leewebs8566 8 місяців тому

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

@fierceplannerzzz-bh3ip 8 місяців тому

Yes we need videos on transforms and perspective

@WaqarAhmad-jp4mw 8 місяців тому

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

@codelove9544 7 місяців тому

Just just just just supper duper exciting 👌👌🔥🔥

@samimustafa7284 8 місяців тому

the best explanation i could ever hear before.

@aniefiokasuquo4781 6 місяців тому

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

@luciferevil9o908 8 місяців тому

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

@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 ❤️

@chiragchhajed8353 8 місяців тому

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

@user-tt4gm2fx1m 8 місяців тому

Just awesome sir.. You born to teach.

@cameroncoop7878 7 місяців тому

Really cool thank you!

@serhii_barabash 7 місяців тому

great examples ☺️💛

@ephraimbernard5773 7 місяців тому

Very concise and informative

@alainroos5383 5 місяців тому

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.

@IamDarkAngeL1 8 місяців тому

The Legend is back !

@BlenderModeling-yd5ft 3 місяці тому

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

@dixitGogoi32 8 місяців тому

Nice, man ... specially the last one

@MrFuadPro 8 місяців тому

You are amazing man.

@pravinmudaliyar3421 8 місяців тому

Please more videos on "perspective" and 3d transforms. There aren't many tutorials related to these topics.

@georgesword2012 8 місяців тому

Wow, those tips are really usefull, thanks! 👍

@StephenRayner 8 місяців тому

Excellent! To the point

@NoudvD63 8 місяців тому

Thanks, very helpful.

@daniels7250 7 місяців тому

Informatieve video 👍

@blue_berry_pie64 8 місяців тому

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

@mohdali-yq8gq 8 місяців тому

You always bring great contents. Your explanation is matchless.

@tohirasadov689 8 місяців тому

This is very useful and wonderful job

@mightydawnweb 4 місяці тому

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

@mamunsj5594 7 місяців тому

very informative. Love from Bangladesh 🇧🇩

@shakhzodgayratov5905 5 місяців тому

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

@sunnyssharma7363 8 місяців тому

Please create a second part, thank you so much ❤

@wotaLGD999 7 місяців тому

helpful, Continue these tricks

@TappinMyFoot 7 місяців тому

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 3 місяці тому

Would screen readers read text with a display of none?

@TappinMyFoot 3 місяці тому

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 3 місяці тому

@@TappinMyFoot ok thanks!