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.

Css transition docs https://developer.mozilla.org/en-US/docs/Web/CSS/transition

---

Css contrast filter.

Css filter docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

---

Css Hsl colors introduction.

CodePen: https://codepen.io/Since1979/pen/dyOYvJO

---

Css border styles.

Css border-style docs: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

---

Swapping colors with css custom properties.

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.

Follow me on Twitter

Thanks for reading/watching and stay safe

Comments

[Dionysis]

About "CSS border styles". Can I use border-style: none solid none if I want borders only left and right instead of none solid solid none?

[Stephan Nijman]

Yes you can! :)

[Charanjit Chana]

I’ve rarely used the delay option for transitions so had no idea it could be done in one line!

[Stephan Nijman]

For a long time i didn't even know it existed! But it's a nice one to know about! :)

[Minhazur Rahman Ratul]

useful :)

[Stephan Nijman]

Thank you Ratul. Glad you think that! :)

[Obscure.]

My favorite one out of this list is use of HSL because I like to use it too , great post!

[Stephan Nijman]

Thank you! Hsl really is amazing! :)