Best of CSS Tip — 2024

1. 1
   Article

   CSS Tip·2y

   Write better CSS with modern CSS

   Learn how to write better CSS with modern CSS features that can help optimize your code and reduce redundancy.

   1.1K

   42
2. 2
   Article

   CSS Tip·2y

   3D parallax effect on hover

   Explores a new concept of 3D parallax effect on hover, aiming for a better illusion using minimal CSS. The technique involves using only an <img> tag without any extra elements or pseudo-elements and keeps the CSS declarations under 15.

   284

   12
3. 3
   Article

   CSS Tip·2y

   Get the screen width & height without JavaScript

   Learn how to obtain screen width and height as pixel values using only CSS, avoiding JavaScript. This method leverages @property and trigonometric functions, providing unitless values that update in real-time upon screen resize.

   211

   12
4. 4
   Article

   CSS Tip·2y

   Inverted border-radius using CSS mask

   Learn how to use a CSS mask to create an inverted radius corner with minimal code, without the need for extra elements or pseudo-elements, and optimized with CSS variables.

   174

   3
5. 5
   Article

   CSS Tip·2y

   Animate to height/width auto (without hacks)

   Learn how to smoothly transition to `height: auto` using just three lines of code. The key is the `interpolate-size: allow-keywords` property. Compatible with the latest version of Chrome.

   111

   3
6. 6
   Article

   CSS Tip·2y

   Update CSS variables using range slider

   Learn how to link a CSS variable with a range slider to update its value in real-time using scroll-driven animations, without the need for JavaScript. Includes a demo showcasing the technique, currently compatible with Chrome only.

   107

   5
7. 7
   Article

   CSS Tip·2y

   Full-bleed layout with modern CSS

   Learn how to create a full-bleed layout using modern CSS. A full-bleed layout allows an element to extend beyond its container's boundaries, reaching the edge of the page. This tutorial provides various examples and compact syntax options for achieving this effect with CSS.

   102

   6
8. 8
   Article

   CSS Tip·2y

   Typed CSS variables using @property

   Stop defining your CSS variables inside :root and start using @property to create typed CSS variables. This approach enhances debugging, provides implicit data validation, allows animations where applicable, and makes variables available globally with default values.

   100

   9
9. 9
   Article

   CSS Tip·2y

   CSS-only background patterns with a minimal code

   Find a collection of CSS-only background patterns with minimal code. Easily adjust size and colors and navigate between patterns.

   90

   3
10. 10
    Article

    CSS Tip·2y

    Fancy hover effect with anchor positioning

    Experiment with anchor positioning to create fancy hover effects such as sliding and jumping for menu items.

    79

    1
11. 11
    Article

    CSS Tip·1y

    Glowing border animation with a smooth stop

    Learn how to add a glowing border animation around an element using modern CSS techniques like `@property`, CSS Mask, and Math functions. The animation is infinite on hover and stops smoothly when the mouse leaves the element.

    75

    5
12. 12
    Article

    CSS Tip·2y

    Border gradient with border-radius

    Quick guide on adding gradient coloration to borders with rounded corners using CSS. Discusses current limitations and alternative methods like CSS mask and pseudo-elements.

    70

    2
13. 13
    Article

    CSS Tip·2y

    Curved avatar header with hover effect

    Learn how to create a stylish curved avatar header featuring a hover effect using CSS masks, `@property`, and math functions. Benefit from optimized techniques with CSS variables and enjoy a clean, simple HTML implementation.

    67

    4
14. 14
    Article

    CSS Tip·2y

    Grainy texture using CSS gradients

    Learn how to create a grainy texture background with CSS gradients using a few lines of code. This simple technique can add a unique, random-style background to your web projects.

    67

    3
15. 15
    Article

    CSS Tip·2y

    Circular progress using scroll-driven animations

    Learn how to transform the native progress element into a circular one using only the <progress> tag, with control via 'max' and 'value' attributes. This Chrome-only experiment leverages scroll-driven animations and the @property feature in CSS.

    66

    1