CSS Tips And Tricks I Wish I Knew Before

Подписаться 298 тыс.

Просмотров 390 тыс.

50% 1

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)

Наука

Опубликовано:

7 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 420

@LamaDev 6 месяцев назад

Second part is here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kINNs4uYYnY.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 14 дней назад

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

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

@muhammadzohaib543 8 месяцев назад

Sir, I just wanna thanks to you.

@naqieuddinazman4677 8 месяцев назад

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

@coder5336 8 месяцев назад

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

@anversadutt 8 месяцев назад

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

@ekeminiben6885 8 месяцев назад

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

@GururajSudhindra 8 месяцев назад

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

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

@vishnusidharth9309 7 месяцев назад

Yess! Tutorials on perspective will be very useful!

@buraksurumcuoglu8303 8 месяцев назад

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

@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

@junog5552 8 месяцев назад

As always, wonderful informative tutorial 🙏

@EusebioJoveth 8 месяцев назад

Excelente conteúdo mestre.❤

@kirksurber7262 8 месяцев назад

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

@vastargazing8957 8 месяцев назад

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

@alvin942 8 месяцев назад

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

@Sam-mn4vl 8 месяцев назад

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

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

@lazolabucwa8821 7 месяцев назад

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

@jayanth704 8 месяцев назад

Great video 💯Need second part too✨

@brightokoro7073 8 месяцев назад

Nice work good to have you back

@GameVerse215 8 месяцев назад

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

@olujobifolaranmi2133 8 месяцев назад

This is very helpful. Thank you lama dev

@LeEn-lz6lj 8 месяцев назад

This is amazing! Thank you so much

@Deatomized 8 месяцев назад

Awesome and simply shown. Thank you !

@WaqarAhmad-jp4mw 8 месяцев назад

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

@piusvictor8780 8 месяцев назад

Amazing tutorial, great job 👏

@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

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

@jamesgulland 8 месяцев назад

Such a cool vid! Subscribed ❤

@paulcharman8113 8 месяцев назад

Really interesting and well explained video. Just wondering how you would make use of something like the perspective example. Could you place text on the shape that would move with the shape perhaps?

@olayiimiika8618 8 месяцев назад

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

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

@Adam-nw1vy 8 месяцев назад

Distilled awesomeness. Chapeau 🎩

@456_rider 8 месяцев назад

Very informative...need videos like this❤

@tomasburian6550 8 месяцев назад

Great tricks, brother. Thank you.

@TheMetalMag 8 месяцев назад

The evolution is becoming amazing

@Leesdjo 8 месяцев назад

Amazing content honesty. Thanks very much Lama Dev

@user-iz8du7vr4p 7 месяцев назад

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

@altantois 7 месяцев назад

Very simple explanation, thank you!

@shaquibahmed1545 7 месяцев назад

Informative and clear

@nayanbiswas370 7 месяцев назад

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

@markcooke4866 8 месяцев назад

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

@Mrameenmgm 8 месяцев назад

Useful tips, many thanks

@StephenRayner 8 месяцев назад

Excellent! To the point

@luciferevil9o908 8 месяцев назад

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

@BlenderModeling-yd5ft 3 месяца назад

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

@mohdali-yq8gq 8 месяцев назад

You always bring great contents. Your explanation is matchless.

@woolgum 7 месяцев назад

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

@hardikchavada8974 7 месяцев назад

Amazing video🎉🎉. Very helpful

@georgesword2012 8 месяцев назад

Wow, those tips are really usefull, thanks! 👍

@ephraimbernard5773 8 месяцев назад

Very concise and informative

@anirudhachakrabarty2050 8 месяцев назад

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

@clintchrystie6727 8 месяцев назад

Thank you for sharing 🤜🤛

@user-tt4gm2fx1m 8 месяцев назад

Just awesome sir.. You born to teach.

@pravinmudaliyar3421 8 месяцев назад

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

@mightydawnweb 4 месяца назад

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

@navidghasemi9685 8 месяцев назад

tnx a lot man, missed you

@IamDarkAngeL1 8 месяцев назад

The Legend is back !

@blue_berry_pie64 8 месяцев назад

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

@alexdin1565 8 месяцев назад

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

@shakhzodgayratov5905 5 месяцев назад

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

@cameroncoop7878 8 месяцев назад

Really cool thank you!

@fierceplannerzzz-bh3ip 8 месяцев назад

Yes we need videos on transforms and perspective

@CodeMom 7 месяцев назад

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

@2difficult2do 8 месяцев назад

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

@chiragchhajed8353 8 месяцев назад

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

@sunnyssharma7363 8 месяцев назад

Please create a second part, thank you so much ❤

@serhii_barabash 7 месяцев назад

great examples ☺️💛

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

@samimustafa7284 8 месяцев назад

the best explanation i could ever hear before.

@aniefiokasuquo4781 7 месяцев назад

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

@techfunwithaadil 8 месяцев назад

Thanks sir exciting about next css tips videos

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