DEV Community

loading...
Cover image for Some small Css tips #003

Some small Css tips #003

Stephan Nijman
Hi I'm Stephan Nijman! WordPress, Php, Javascript, React and Css Developer/Enthusiast/Blogger/Youtuber.
Originally published at since1979.dev ・2 min read

To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.

Attribute selections


Check out the full documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Missing attribute selection


Text version is here: https://gist.github.com/vanaf1979/743529e1910c7f39eada070a41eba40c

Css :not() documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

To check for more a11y issues i recommend you check out checka11y.css https://github.com/jackdomleo7/Ch


Left aligning your html lists


Full text version is here: https://gist.github.com/vanaf1979/f1107b152e21560ac47a529ce733c808

Simple columns


Full text version is here: https://gist.github.com/vanaf1979/27ce8660def0de2c58a34c21e7ccf98c

Adding icons to your links


Full text version: https://gist.github.com/vanaf1979/1f73caabf97a70ee9629ef80052aa81b

Attribute selectors docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Font Awesome with pseudo-selectors docs: https://fontawesome.com/how-to-use/on-


Responsive headers with clamp


Live example in CodePen > https://codepen.io/Since1979/pen/KKgQzKw?editors=1100

Css Clamp Docs > https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

Css Clamp browser support > https://caniuse.com/?search=Clamp


Want more of this?

If you would like to have these tips, and other stuff, in your twitter timeline come and follow me @Vanaf1979. If you just want the gist you can follow me here on dev.to @Vanaf1979 as well. Or you could check out my blog at Sinse1979.dev

Thanks for reading and stay safe.

Discussion (7)

Collapse
himanshutiwari15 profile image
Himanshu Tiwari 🌼

Amazing way to represent
And unique as well
How do you do that?

Collapse
vanaf1979 profile image
Stephan Nijman Author

Thanks Himanshu. :)

Do you mean the code images?

Collapse
himanshutiwari15 profile image
Himanshu Tiwari 🌼

Yeah the Twitter kind of embed πŸ˜…

Thread Thread
vanaf1979 profile image
Stephan Nijman Author

The twitter embeds are part of the markdown editor here on dev. They're called liquid tags. When you write a post there is a link in the right sidebar to the documentation.

The code images themselves are made with carbon.now.sh/ :)

Thread Thread
himanshutiwari15 profile image
Himanshu Tiwari 🌼

Ooohhhh
Okh....
Thanks 😊
Now I can improve my blogs 😁

Collapse
mahmoud38021 profile image
Mahmoud Alaraby

Nice I like it ❀

Collapse
vanaf1979 profile image
Stephan Nijman Author

Thank you Mahmoud. Glad you liked it! :)