To continue on my previous post here are some more tweets with little Css tips that might help you in your projects.
Alternating stripes with css gradients.
Small #Css tip: If you need alternating stripes on your ellement you can use css linear-gradient to quickly do exactly that. You can even have transparent stripes!😀
👇Check out a live preview in the CodePen below12:02 PM - 28 Jan 2021
Css linear gradient docs: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()
Css caret-color and placeholder
Small #css tip: Give that extra bit of swag to your forms by styleing your placeholders and caret with caret-color and ::placeholder.
👇Check out a live preview in the CodePen below11:36 AM - 29 Jan 2021
Caret-color docs: https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
::placeholder docs: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
Making selections with Css pseudo-selectors.
I didn't put out a new video this week, but you might have missed this first one.
Also check out my blog post: https://dev.to/vanaf1979/making-selections-with-css-pseudo-selectors-30p7
Responsive images with object-fit cover.
Small #css top: You can use object-fit: cover; to automatically crop and position images within its given width and height without the need to resize the image files themselves.
👇Check out the CodePen below to feel the magic! 😜11:46 AM - 01 Feb 2021
Object-fit docs: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Multi-step animations with @keyframes
Small #css tip: You can create multi step animations using the css @keyframes rule.
👇Check out a live preview in the CodePen below12:33 PM - 02 Feb 2021
Keyframes mdn docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
Subscribe and Follow
Subscribe to my Youtube channel.
Thanks for reading/watching and stay safe
Top comments (4)
The last is pretty cool. Good job.
Thank you SIgnor. Glad you liked it! :)
Number 1 is really cool.
Yeah... There are some many cool things that we can do with css gradients! :)