Best of CSS Tip — 2025

1. 1
   Article

   CSS Tip·1y

   An infinite logos animation

   Learn to create a true infinite logos animation using minimal HTML and the CSS offset property. The technique ensures the animation is responsive.

   171

   1
2. 2
   Article

   CSS Tip·1y

   Inverted radius shape with hover effect

   Learn how to combine the inverted radius shape with modern CSS techniques to create a stylish hover animation. The guide uses minimal HTML, is powered by @property and CSS Mask, and is optimized with CSS variables.

   124

   3
3. 3
   Article

   CSS Tip·52w

   How to correctly use if() in CSS

   CSS is introducing a new if() function for conditional styling, but there's a common pitfall when using calculations within conditions. The browser treats custom property values as strings unless they're registered with @property, which means calculations like calc(var(--n)/2) won't be evaluated. To fix this, you need to register the custom property with @property and specify its syntax and initial value. This registration is only required when calculations are involved - exact value matching works without registration.

   79

   2
4. 4
   Article

   CSS Tip·1y

   Transparent inner border for images

   Learn how to use the CSS mask property along with two gradients to cut a border from the inside of an image, creating a transparent inner border effect. The post also includes a demo with a hover effect.

   59
5. 5
   Article

   CSS Tip·1y

   SVG to CSS Shape Converter

   This post introduces an online tool that converts SVG shapes into CSS using the clip-path property. The generator is responsive and simplifies the coding process by fitting the shape into the smallest rectangle without manual viewBox adjustments.

   48

   4
6. 6
   Article

   CSS Tip·38w

   The Fundamentals of CSS Alignment

   A comprehensive guide to CSS alignment that explains the fundamental concepts behind alignment properties across different layout systems. Covers the two-level alignment theory (content and item levels), demonstrates how alignment works in Grid, Flexbox, and Block containers, and explains concepts like auto margins, safe alignment, and absolutely-positioned elements. Includes interactive demos and a quiz to test understanding.

   42

   1
7. 7
   Article

   CSS Tip·1y

   Smooth rotation with modern CSS

   Learn how to use modern CSS techniques to achieve smooth rotation animations for any element. This method utilizes the @property feature and various math functions to create interactive animations without relying on keyframes.

   41
8. 8
   Article

   CSS Tip·1y

   A single-element star rating component (without JS)

   Learn how to transform a native range slider into an interactive star rating component using just a few lines of CSS, with no JavaScript required. Adjust the number of stars by changing the 'max' attribute.

   39

   1
9. 9
   Article

   CSS Tip·1y

   Blob shape with hover effect

   Learn how to use the CSS-only shape() function to create a dynamic blob shape with a hover effect. The code is accessible via an online generator, but it currently works only in Chrome.

   37

   2
10. 10
    Article

    CSS Tip·43w

    Responsive infinite logo marquee

    Modern CSS techniques enable creating responsive infinite logo marquees using the shape() function and new sibling-index()/sibling-count() functions. The approach works with any number of images, adapts to container width without magic numbers, and can be controlled through CSS variables. Currently limited to Chrome browser support, the technique requires equal-width items and works with any content type beyond just images.

    36

    1
11. 11
    Article

    CSS Tip·25w

    The Hidden Selectors of The HTML Element

    Explores alternative CSS selectors for targeting the HTML root element beyond the standard `html{}` and `:root{}`. Demonstrates lesser-known approaches including the nesting selector `&`, `:scope`, `:has(head)`, `:not(* *)`, and `:not(* > *)`. Explains how these selectors work by leveraging fallback behaviors and unique characteristics of the HTML element, such as being the only element without a parent or having head and body as children.

    34

    2