To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.
Css transition delay.
Small #css tip: You can add a small delay to your css transitions to prevent unintended hover animations by adding the delay parameter.
👇Codepen example in the link below!15:41 PM - 21 Jan 2021
Css transition docs https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Css contrast filter.
Small #Css tip: A bit of a funky one to start off the weekend. If you want to go for a bit of a grungy look, you can use the css contrast filter with a high value to create some wicked looking images. And you can transition them as well! 😜
👇Codepen example in the link below!12:11 PM - 22 Jan 2021
Css filter docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Css Hsl colors introduction.
Small #css tip: In this week's video we will take a look at how we can ditch hex colors and adopt the amazing Hsl and Hsla functions inside of our css.
👇Check out the video in the comment below10:40 AM - 17 Feb 2021
CodePen: https://codepen.io/Since1979/pen/dyOYvJO
Css border styles.
Small #css tip: If you just want two border sides you don’t have to specify the full border styles for both but you can use the border-style property to shorthand the sides you want to show. 😀12:12 PM - 25 Jan 2021
Css border-style docs: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
Swapping colors with css custom properties.
Small #css tip: If you set up your Custom Properties right you can use them to change your text colors in a specific section like your footers.
👇Check out a live preview in the CodePen below12:47 PM - 27 Jan 2021
I also did a youtube video on this: https://www.youtube.com/watch?v=Yl2j_b82zwo
Css custom properties docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Subscribe and Follow
Subscribe to my Youtube channel.
Thanks for reading/watching and stay safe
Top comments (8)
About "CSS border styles". Can I use
border-style: none solid noneif I want borders only left and right instead ofnone solid solid none?Yes you can! :)
useful :)
Thank you Ratul. Glad you think that! :)
My favorite one out of this list is use of HSL because I like to use it too , great post!
Thank you! Hsl really is amazing! :)
I’ve rarely used the delay option for transitions so had no idea it could be done in one line!
For a long time i didn't even know it existed! But it's a nice one to know about! :)