Some of Our Sources
- Simplebits
- TutsPlus - Code
- Abduzeedo
- Crazy Leaf Design
- Fudge Graphics
- Web Design Ledger
- Stylized Web
- Specky Boy
- CSS Tricks
- Spyre Studios
Help Webnuz
Referal links:
February 22, 2021 11:09 am GMT
Css transition docs https://developer.mozilla.org/en-US/docs/Web/CSS/transition
Css filter docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
CodePen: https://codepen.io/Since1979/pen/dyOYvJO
Css border-style docs: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
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
Original Link: https://dev.to/vanaf1979/some-small-css-tips-007-k7d
Some small Css tips 007
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 dont 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
Original Link: https://dev.to/vanaf1979/some-small-css-tips-007-k7d
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To