CSS Tip: Learn CSS the easy way

Another demo using Anchor Positioning and Tooltips.

Building on the idea from the previous post, I created a circular list instead of a horizontal one.

Using modern CSS and a few lines of code to create a responsive list of stacked images.

Replace the default focus ring with a stylish one that travels between the elements as you navigate with your keyboard.

Here is another idea of implementation (after the first and second ones), where the tooltip adjusts its position to remain visible and follow its anchor.

The position-area property allows you to control the placement of an absolutely positioned element relative to its anchor box.

In the previous post, we created a tooltip that flips between two positions to remain visible.

Toggle the value of border-radius based on the container/screen size using a simple line of code.

With anchor positioning, we can anchor an element to another and also ensure it remains visible on the screen regardless of the anchor's position.

Similar to the dynamic :nth-child(), we can use if() and math functions to emulate a range selection.

In a previous post, I created a simple 3D box using corner-shape and the border properties.

Ready for the new corner-shape property?

The functional pseudo-class :is() is ideal for shortening selectors.

Centering in CSS is pretty easy nowadays.

The Fundamentals of CSS Alignment September 04, 2025 (Last updated on April 17, 2026) While centering elements in CSS has become easy over time, there is still a lot of confusion around alignment in general.

In a previous post, we saw how to place images around a circle.

Similar to the :nth-child() trick, we can use the if() condition and some calculation to implement the logic of media queries.

Using modern CSS, you can create a sequential animation that involves an unknown number of items with a simple code.

With the powerful shape() function and the new sibling-index()/sibling-count() functions, we can create an infinite logo marquee using a few lines of code.

Using offset combined with the new sibling-index() and sibling-count() functions, we can easily and precisely place images (or any elements) around a circle using a few lines of code.

We can get the index of an element using sibling-index(), and we can express inline conditions using if().

With CSS, you can use the new sibling-index() function to get the position of any element relative to all its sibling elements.

Do you want to invert a shape created using clip-path: shape()?

Recreating a 3 dots loader using shape() and animating it using CSS variables and @property Read more

A new and easy way to create hexagon shapes using corner-shape.

Do you know the safe keyword?

CSS is adding a new way to express conditions using an if() syntax.

When an image fails to load the browser will simply show you the alt text but you can change this using a cool CSS trick.

Previously, I used CSS mask to create an arc shape with rounded edges.

Do you want to convert an SVG code into CSS?

Use the new shape() and create a cool CSS-only blob shape.

Another classic shape made easy with the new shape() function.

Another experimentation using the new shape() function to add rounded corners to a box with a triangular shape.

Similar to the hexagon shape, here is a generic code to create any regular polygon shape with rounded corners.

We can create a hexagon shape using clip-path: polygon() but what about the rounded corners variation?

flex-wrap: wrap allows items to wrap onto multiple lines but it has another function.

Using the new attr() function, we can customize a progress element based on the progression.

Add Zig-Zag edges to your element using the mask property and one gradient.

Split an image into pieces using the mask property, then show it fully on hover.

Another classic logos animation?!

Cut a border from the inside of an image using the mask property and two gradients.

A few lines of code and you have a CSS-only way to read the value of an input range slider.

Ready for the new text-box property?

Are you tired of the unwanted spaces above and below your text?

Do you know the zoom property?

A fun CSS-only experimentation using modern features to create bouncy radio buttons.

Similar to the star rating component, I am creating a volume control component using the native range slider and zero JavaScript.

Combining the inverted radius shape with modern CSS to create a fancy reveal animation.

Transform the native range slider into a star rating component using a few lines of CSS and zero JavaScript.

Using the same code structure as the wavy box to create another variation, a wiggly box!