CSS Tip: Learn CSS the easy way

After the previous effect, here is a different way to stop an infinite rotation on hover.

Using the new @starting-style you can create animations without using @keyframes.

What time is it?

Use modern CSS to control the rotation of any element smoothly.

Do you want to detect if an element is having an overflow or if it's scrollable?

A modern and more intuitive way to center block elements is available!

Create a border-only breadcrumb shape using a few lines of code and modern CSS.

Add a glowing border animation around your image (or any element) with a few lines of code.

Use modern CSS and a few lines of code to create a full-bleed layout.

You want to create a discrete animation using steps() but you struggle with its value, right?

Updating the previous rounded tab shape to create the vertical version using the same code structure.

Do you want to know the scrollbar width?

Create folded rectangle shapes with a subtle 3D effect Single element (no pseudo-element) Optimized with CSS Variables Powered by CSS mask Read more

Do you know that text-indent can take an extra value each-line?

We saw the selector for the first occurrence and here is the selector for the last occurrence.

A CSS selector to select the first occurrence of an element regardless of its position in the document.

After the previous effect, I am trying another concept of 3D parallax effect with a better illusion!

Learn the correct way to create a one-color gradient with an optimized code.

Place you image inside a rhombus shape with a cool hover effect No extra element (only the <img> tag) No pseudo-element Less than 15 CSS declarations Read more

Do you know that the below declarations are the same?

Create different kind of puzzle shapes using a few lines of code Single element (Works with <img>) Optimized with CSS variables Powered by CSS mask Read more

Adding a new set of loaders to the biggest collection of loading animations.

Many have a wrong information about the default behavior of position: absolute element.

Only three lines of code and you have a smooth transition to height: auto Read more

Do you want to convert a length value to a unitless value?

Using scroll-driven animations, you can link a CSS variable with a range slider and easily update its value!

Adding a tooltip to the native progress element showing the percentage of progress.

I am using the inner curve/notch shape to create a fancy header with an avatar and a cool hover effect.

Create an inner curve/notch shape using CSS mask and a few lines of code Only one element No pseudo-element Works with gradients & images Optimized with CSS variables Read more

Adjust the below to get your quantity query selector!

Create a nice decorative line with rounded dashes using a few lines of code Only one element Responsive (no cut or partial dash) You can easily switch to the vertical version Optimized with CSS variables Code available here: css-shape.com/rounded-dashes R…

Use an online generator to create fancy wavy circles in no time!

Create an arc shape with rounded edges using a few lines of CSS Single element (no pseudo-element) Less than 10 CSS declarations Supports gradient coloration Optimized with CSS variables Read more

"What is the width of the scrollbar?"

By adjusting the code of the previous tip (getting the width/height of any element) we can do some intresting counting.

Use modern CSS features to get the width and height of any element as CSS variables.

The same code of the previous trick can also be used to get the scroll progress of any element on the page.

Get the scroll progress of the page as a CSS variable using a few lines of code Powered by Scroll-Driven animations Defined at the :root level (avaiable to all the elements) Typed using @property You can easily use it within any formula Read more

Add a slider to adjust the font-size of your website using modern CSS features. 0 JavaScript required (100% CSS) Powered by Scroll-driven animations & @property Easy to control using CSS variables Read more

Stop defining your variables inside :root!

Get the screen width and height as pixel values using a simple CSS code.

Save this code for the future!

Use CSS mask to create an inverted radius corner with a minimal code.

Transforming the native progress element into a circular one.

Create a random-style background (grainy texture) using a few lines of code.

A few experiemntation usign Anchor Positioning to create fancy hover effects.

A simple code to invert any kind of shape created using clip-path: polygon().

After the previous concept, here is another idea of range slider.

Enhance your text wrapping using text-wrap.

Create a custom range slider with a tooltip showing the selected value.