Some small Css tips #009

#webdev #css #html #beginners

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

Alternating circular stripes with css gradients.

Stephan Nijman

@vanaf1979

Small #css tip: Last week i showed you how to make stripes with linear-gradient. The same can be done in a circular fashion using css radial-gradient.

👇Check out a live preview in the CodePen below

12:42 PM - 04 Feb 2021

Radial-gradient mdn docs: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()

Image text fill.

Stephan Nijman

@vanaf1979

Small #css tip: You can use an image to fill your text (knockout text) by combining the css background-clip and text-fill-color properties. This one is inspired by an awesome Css-Tricks article that you can also find below.

👇Check out a live preview in the CodePen below

11:44 AM - 05 Feb 2021

Css Tricks article: https://css-tricks.com/going-from-solid-to-knockout-text-on-scroll/

Css: Aligning your list items with your text.

I didn't put out a new video this week, but you might have missed this one.

Also check out my blog post: https://dev.to/vanaf1979/css-aligning-your-lists-with-your-text-340o

Update css custom properties (Variables) with javascript.

Stephan Nijman

@vanaf1979

Small #css tip: You can use #javascript to update the values of your css custom properties/variables. As an example you can have an element follow your mouse.

👇Check out the demo in the CodePen below.

11:56 AM - 09 Feb 2021

Blurry elements.

Stephan Nijman

@vanaf1979

Small #css tip: You can blur any element on your webpage using the css blur filter, and you can animate them too.

👇Check out the CodePen below.

11:49 AM - 10 Feb 2021