@@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.
@@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.
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.
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.
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!
7:40 input:focus {outline: none;} alone is dangerous, because it creates accessibility issues for users who can’t use a mouse or touch device. When I want to change the blue outline, I often do something different. Like a good box shadow or outline color like you‘ve shown a bit later. But one should not get rid of a visible response entirely.
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
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.
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
I have one doubt, if adding perspective to the container we can assume we are standing at that much distance from the container/.frame, but the frame's size doesn't appear to be getting bigger as we decrease the distance, only the child/.shape seems to be getting smaller/bigger, even though the perspective property is being added to the .frame.
This is amazing! i started with the Course HTML5 and CSS, this is really helpfull and easy to remember. Thanks for this. *Edit: in these few minutes, i learned more than the two months from my course. I subscribed.
Second part is here: th-cam.com/video/kINNs4uYYnY/w-d-xo.html
Well done and thank you :)
I would love to know more about transform and perspective please ❤
That “has” pseudo class is a game changer
10:19 when you click the spoiler button how do you make it unblur without any javascipt
Animate it
Reverse @@mynameisjeff5971
@@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.
@@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.
@@mynameisjeff5971 umm maybe by adding onclick action to button or to change the blur lvl?
Sir, I just wanna thanks to you.
👍
Big yes for transforms and perspective, definitely will be an engaging one, pls do a tutorial on that
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.
Would screen readers read text with a display of none?
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.
@@TappinMyFoot ok thanks!
Yes please create more tutorials on animation. New subscriber here. Love your way of teaching 😊
This is really helpful, I can't wait to see the second part of it. Thanks
Thank you for the great tutorial! Also, cute video at the end there! 😂 Subscribed
this is my first time i see your video from recommendation and it's amazing channel and content
Watching this a few hours before exam and I’m grateful for it ❤️
Yess! Tutorials on perspective will be very useful!
Very useful, very straightforward and with the subtitles to the vide you have definitely earned a sub
Owww Thanks a lot.... thats really Cool!! And with much details..cant wait for part2
What an amazing secrets you reveal today,
Please continue this series>>>>
Thank you
I love them, thank you so much. I'm glad youtube recommended your channel to me.
This is amazing stuff ! Thank you for creating this content 🔥🔥🔥
Love it mate! Didn't know this before! Thanks
this was helpful, Thank you, hope to see the second part soon
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!
You are the best man. I learned to design with your tutorials
This is amazing and incredibly helpful + well explained and demonstrated! Thank you for this.
Please keep creating these types of videos!
Stight to the point, no time wasting. Love it.
OMG thank you for reveal these knowledges to us. Those are exactly the reason I want to follow into this industry
Best css reveal video I've ever watched not all those ones repeating same stuff everytime, u should start a tutorial or something....u know a lot
7:40 input:focus {outline: none;} alone is dangerous, because it creates accessibility issues for users who can’t use a mouse or touch device. When I want to change the blue outline, I often do something different. Like a good box shadow or outline color like you‘ve shown a bit later. But one should not get rid of a visible response entirely.
This is kinda great...just answered so many "hows" questions have been asking since
Thanks
I subscribed before reaching the end of the video. You're a great teacher!
The video's caption in the tutorial is actually pretty neat, she just wants to watch Lama dev all day 😎
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.
Thank you so much. I know it won't be justified enough because this lesson is game-changing.
The evolution is becoming amazing
This is Goldmine ! Please keep making these videos
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!
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
Pretty awesome! Thanks. We're waiting for more videocss.
Great video 💯Need second part too✨
That's awesome I just starting learning Css and this video make me more interesting big heart bro ❤️
this is one of the best video i ever learnt about css .... thanks alot
Owwww man You just a saved me!
That outline of input box bothered me a lot finally get rid of it.. Thanks a lot ❤️
Life saver video, clear and precise 👍✨
Subscribed bro👌many powerful tools in one video
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
Nice work good to have you back
Wow! CSS is my favorite WEB technology and maybe even favorite IT technology. So powerful. so fancy!
This video was so awesome! I love it! Thank you so much. Please make more videos like this. 🤩
Just found your channel... Awesome! Thank you for the cool videos they are fantastic for an aspiring web dev.
Thank you, Lama Dev. That's such a nice video. I love it.
I want 100parts of those kind videos ... Really awesome tutorial... Lama Dev always Rocks... I learnt Nextjs from your video as well..
Wow Thank Lama, the video has widen my css knowledge into a whole new level :O.
Waiting for part 2. Thanks, Lema dev.
This is awesome! Thank you so much for the information!
You are the best. I wish you success in this life and the hereafter.
Thank you sir. I havent used most of them except transition. So glad to know more about css❤❤❤❤❤❤
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.
Wow that's crazy for me right now . I like this tip ! Thanks
I'll be trying a few of those! Thank you!
Very informative video, learned a lot myself. Thank you for providing the quality content as always.
Can you do a beginner to advance sass/scss tutorial? preferably with how to use sass without a VScode extention
As always, wonderful informative tutorial 🙏
Wow I knew clip-path before but what you did was mind blowing
For a guy who has been using CSS since the 90s, this is all mind blowing!
With the video one with captions and ::cue is real;y helpful for WCAG, thanks I didn't known about that
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
That was really helpful! Thank you 🙏
very informative.
Love from Bangladesh 🇧🇩
Great video! Subbed to your channel also since I'm new here lol Definitely want to see the next video!!!
You always bring great contents. Your explanation is matchless.
Clip path trick taking the path from an SVG is sick 🤙🏻🤙🏻
Great tips! I wish I knew before, but thanks to you I now know.
Great video! I learnt a lot. Would love to see another one or a video on perspective.
the best explanation i could ever hear before.
Wooo I never thought like this, CSS is awesome 😎 Bro, Thanks 🙏 You Dear.😊😊😊😊😊.
Hi, thanks so much, I have not known or used these tricks before. Great tutorial.
I have one doubt, if adding perspective to the container we can assume we are standing at that much distance from the container/.frame, but the frame's size doesn't appear to be getting bigger as we decrease the distance, only the child/.shape seems to be getting smaller/bigger, even though the perspective property is being added to the .frame.
Please more videos on "perspective" and 3d transforms. There aren't many tutorials related to these topics.
bro u crazy generous with those tips! 🎉
Thanks sir exciting about next css tips videos
Awesome and simply shown. Thank you !
Amazing content honesty. Thanks very much Lama Dev
❤❤ wow,, everything in new,, thanks sir,, love from Bangladesh
This is amazing! i started with the Course HTML5 and CSS, this is really helpfull and easy to remember. Thanks for this.
*Edit: in these few minutes, i learned more than the two months from my course. I subscribed.
what a good tutorial 🙌 ....... thanks so much , i would love to see the second part
Awesome, thank you the tips are very helpful!
This is so great tutorial, THANK YOU so much.
Thank you so much for this great tutorial as a frontend developer it is JEM 💎 for me ❤❤
Distilled awesomeness. Chapeau 🎩
Very simple explanation, thank you!
Very Helpfulll....we need 30 days of css tricks code❤❤
Tysm. Yes, Please create tutorials on animation effects, transiition and persepective.
Nice css tricks i knew css but this new and helpful development side ❤❤
Thanks alot sir, we want more videos like this!!
OMG.... you nailed the css...damn amazing....I learnt a lot from u. 2mrw M gonna practice those skills.
This is amazing! Thank you! ❤
It was really helpful and i appreciate you for new tips :) see you in next one
Just just just just supper duper exciting 👌👌🔥🔥
Nice, man ... specially the last one
This is very helpful. Thank you lama dev
Thank you and please add more advanced css topics..
This is amazing l! Thanks for the video!
brooo so many useful tips! thank you
Great tricks, brother. Thank you.