DEV Community

Cover image for Some small Css tips #007
Stephan Nijman
Stephan Nijman

Posted on • Originally published at since1979.dev

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

Top comments (8)

Collapse
 
porphyrogennitos profile image
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?

Collapse
 
vanaf1979 profile image
Stephan Nijman

Yes you can! :)

Collapse
 
developeratul profile image
Minhazur Rahman Ratul

useful :)

Collapse
 
vanaf1979 profile image
Stephan Nijman

Thank you Ratul. Glad you think that! :)

Collapse
 
kritishd8 profile image
Obscure.

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

Collapse
 
vanaf1979 profile image
Stephan Nijman

Thank you! Hsl really is amazing! :)

Collapse
 
cchana profile image
Charanjit Chana

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

Collapse
 
vanaf1979 profile image
Stephan Nijman

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