This content originally appeared on DEV Community and was authored by Stephan Nijman
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
This content originally appeared on DEV Community and was authored by Stephan Nijman
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Stephan Nijman | Sciencx (2021-02-22T11:09:44+00:00) Some small Css tips #007. Retrieved from https://www.scien.cx/2021/02/22/some-small-css-tips-007/
" » Some small Css tips #007." Stephan Nijman | Sciencx - Monday February 22, 2021, https://www.scien.cx/2021/02/22/some-small-css-tips-007/
HARVARDStephan Nijman | Sciencx Monday February 22, 2021 » Some small Css tips #007., viewed ,<https://www.scien.cx/2021/02/22/some-small-css-tips-007/>
VANCOUVERStephan Nijman | Sciencx - » Some small Css tips #007. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/22/some-small-css-tips-007/
CHICAGO" » Some small Css tips #007." Stephan Nijman | Sciencx - Accessed . https://www.scien.cx/2021/02/22/some-small-css-tips-007/
IEEE" » Some small Css tips #007." Stephan Nijman | Sciencx [Online]. Available: https://www.scien.cx/2021/02/22/some-small-css-tips-007/. [Accessed: ]
rf:citation » Some small Css tips #007 | Stephan Nijman | Sciencx | https://www.scien.cx/2021/02/22/some-small-css-tips-007/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.