Best of CSS — April 2025

1. 1
   Article

   Community Picks·1y

   Animations CSS Generator

   CSS animations allow developers to create dynamic, eye-catching visual effects without using third-party tools or scripting. This guide covers the basics of CSS animations, including keyframes, essential properties, and how they compare to JavaScript animations. CSS animations are simple to implement, performant due to hardware acceleration, and are more responsive and easier to maintain than JavaScript animations. For more complex or interactive animations, JavaScript is recommended.

   342

   17
2. 2
   Article

   Lene Saile·1y

   I updated my website

   The author has rebuilt their website using Eleventy Starter after gaining new insights and learning about new CSS possibilities. While the design remains largely unchanged, almost everything has been refined, improved, and changed. Future articles are planned on topics like OG image creation and using Eleventy for invoicing.

   215

   31
3. 3
   Article

   Larablog·1y

   How To Implement Css Scroll Driven Animations

   Learn how to tie CSS keyframe animations to the scroll position of an element. Gain insights on creating scroll driven animations that enhance the visual appeal and user experience of your website.

   164

   3
4. 4
   Article

   Ahmad Shadeed·1y

   First Look at The Modern attr()

   This post explores the modern usage of the attr() function in CSS, highlighting its ability to handle various data types beyond text, such as color, length, and time. It demonstrates practical use cases including assigning column numbers in CSS grids, setting animation delays, adjusting textarea rows, and defining background images. Modern attr() offers flexibility and improves separation of concerns and reduces CSS conflicts, making CSS more modular and maintainable. Currently supported only in Chrome.

   135

   9
5. 5
   Article

   CSS-Tricks·1y

   CSS Carousels

   Chrome 135 introduces new features for creating carousel UI patterns, including scroll buttons and scroll markers as defined in the CSS Overflow Module Level 5 specification. This post provides step-by-step notes on implementing these features using CSS Grid and Scroll Snapping. It also covers adding scroll buttons and markers, their styling using pseudo-elements, and the functionality they bring for free, such as improved user experience and accessibility.

   121

   1
6. 6
   Article

   CSS-Tricks·1y

   Using CSS backdrop-filter for UI Effects

   Learn how to use the CSS backdrop-filter property to create sophisticated UI effects. This guide covers layering backdrop filters, combining them with other CSS effects, and crafting designs with various filters such as blur, brightness, and contrast. Examples include applying these techniques to textured backdrops and integrating them with CSS properties like mask and mix-blend-mode.

   120

   1
7. 7
   Article

   LogRocket·1y

   5 best open source tools for cross-browser CSS testing

   Cross-browser CSS testing ensures consistent rendering across various browsers like Chrome, Firefox, Safari, and Edge. Tools such as Playwright, Selenium WebDriver, PostCSS and Stylelint, BrowserStack, and BackstopJS automate this process. Playwright and Selenium help with functional testing, PostCSS and Stylelint ensure CSS quality, BrowserStack captures screenshots, and BackstopJS detects visual differences. These open source tools streamline debugging and improve user experience.

   118

   2
8. 8
   Article

   Addy Osmani·1y

   Cover Flow with Modern CSS: Scroll-Driven Animations in Action

   Learn how to recreate Apple's iconic Cover Flow UI pattern using modern CSS techniques. Discover the advantages of using CSS scroll-driven animations and scroll snapping to achieve smooth, JavaScript-free interactions. The post dives into the history of Cover Flow, compares old and new implementation methods, and provides code snippets and performance considerations for building an efficient and accessible Cover Flow experience.

   103

   2
9. 9
   Article

   CSS-Tricks·1y

   Next Level CSS Styling for Cursors

   Enhance your website's user experience by using JavaScript to create custom cursors with dynamic text, animations, and filters. This guide walks through implementing these features while considering fallbacks for touchscreens and accessibility preferences.

   100

   2
10. 10
    Article

    Community Picks·1y

    Developer Tools

    CalculatorBit offers a suite of free online developer tools, including hash generators, CSS minifiers, string manipulation utilities, and shell command generators, designed to aid in various coding and development tasks.

    85

    2
11. 11
    Article

    Hacker News·1y

    Some Nice Things with SVG

    Exploring the visual effects applications of SVG, including creating animated wires and a dynamic table of contents (TOC) in React.js, showcasing how to use the mask property and CSS animations for interactive elements.

    75

    3
12. 12
    Article

    Bootstrap·1y

    Bootstrap 5.3.4

    Bootstrap v5.3.4 includes several bug fixes and documentation updates. Notable changes involve fixes for modal and offcanvas headers, close button display issues in color modes, light mode carousel, floating label alignment for select elements, Sass 1.77.7 deprecation, and popover toggling. Visit the GitHub changelog for a detailed list of changes and head to the official site for the latest version.

    64

    4
13. 13
    Article

    Hacker News·1y

    Minimal CSS-only blurry image placeholders

    Learn a minimal CSS-only technique for creating blurry image placeholders (LQIPs) using a single custom property. This approach avoids the need for JavaScript and extensive markup modifications. It includes a comparison of various LQIP techniques and demonstrates encoding and decoding image information directly in CSS. The post concludes with advanced tips for creating smooth gradient transitions to produce a visually appealing placeholder effect.

    62

    1
14. 14
    Article

    Chrome Developers·1y

    Chrome for Developers

    Chrome 135 introduces several new features including CSS carousels, the command and commandfor attributes for improving button functionality, and the CSS shape() function for defining shapes in clip-path and offset-path properties. Other updates include support for the Web Speech API, Float16Array, and the Observable API.

    54

    1
15. 15
    Article

    MDN Blog·1y

    Default styles for h1 elements are changing

    Changes are being rolled out in browsers that remove default user agent styles for h1 elements within nested sections. Developers should ensure their websites do not rely on these default styles to avoid issues flagged by tools like Lighthouse. Explicitly defining font sizes and margins for heading elements is recommended. Specific instructions are provided for different browsers and tips on updating CSS to conform to these changes.

    47

    4
16. 16
    Article

    LogRocket·1y

    What is glassmorphism? How to create glassmorphic designs

    Glassmorphism is a popular UI design trend that creates a glass-like texture for a modern and transparent interface. It incorporates translucency, blurring, borders, shadows, and gradients to enhance aesthetics while considering user experience. Despite its popularity in design circles and use by major tech companies like Apple and Microsoft, it remains underused in real-world products due to accessibility and practicality concerns. The post offers practical tips on creating glassmorphic designs and emphasizes the importance of subtlety and accessibility.

    46

    3
17. 17
    Article

    Lobsters·1y

    Hiding elements that require JavaScript without JavaScript

    Learn how to hide elements that require JavaScript without using JavaScript. The post covers several methods, including using the <noscript> tag, adding a js-enabled class via JavaScript, and combining <noscript> with CSS overrides for specific elements. The final recommendation involves using a d-js-required class to simplify the process and reduce maintenance.

    45

    1
18. 18
    Article

    Collections·1y

    Tailwind CSS v4.1: Text Shadows, Masks, and Extensive New Features

    Tailwind CSS v4.1 offers new utilities, including text shadows, CSS masks, and colored drop shadows, enhancing frontend development flexibility. The update also improves browser compatibility, adds overflow-wrap utilities, input device targeting, safe and last baseline alignment features, and optimizes build performance.

    44

    3
19. 19
    Article

    CSS-Tricks·1y

    The Lost CSS Tricks of Cohost.org

    Cohost.org, a niche social media site that went public in June 2022 and shut down in September 2024, had a devoted user base of creatives who leveraged its permissive HTML sanitizer to perform unique CSS tricks. Notable techniques included 'width-hacking' using the <details> and <summary> tags, and creative use of SVG animations. Despite its short lifespan, Cohost delivered a unique posting experience free from advertisements and follower counts.

    41

    2
20. 20
    Article

    Hacker News·1y

    CSS Hell

    Welcome to CSS Hell, a challenge featuring 15 tough CSS puzzles designed to test your skills. Each puzzle involves adding specific CSS properties to divs in order to match pegs with corresponding holes. Limited properties can be added, and some divs are locked. Hints and solutions are available, and the puzzles are compatible with Safari, Firefox, and Chrome.

    40

    4
21. 21
    Article

    WebKit·1y

    The CSS shape() function

    The CSS shape() function allows creating adaptive and scalable shapes based on the element's size. Unlike the traditional SVG paths used in clip-path, shape() enables more responsive design using familiar CSS units and variables. This new function enhances the rendering efficiency and flexibility for applying shapes in web design.

    38

    3
22. 22
    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
23. 23
    Article

    Web Tools Weekly·1y

    CSS Tools, AI Tools, Build/Bundle

    A roundup of various tools and resources for web developers, including CSS and HTML tools, AI tools like Vibe Draw and OpenAI Realtime Console, and build/bundling tools such as swc4j and eslint-plugin-unimport. The newsletter also highlights offers from commercial apps and classifieds, and includes a guide for streamlining payments.

    37

    2
24. 24
    Article

    Bootstrap·1y

    Bootstrap 5.3.5

    Bootstrap version 5.3.5 has been released to address a regression issue from Autoprefixer that caused floating form labels to always be 'floated' in Firefox. This release includes several documentation and dependency updates. The update is available on the Bootstrap website and on npm.

    37
25. 25
    Article

    Hacker News·1y

    Apps lighter than a React button

    Nue is a web framework that leverages modern web standards—HTML, CSS, and JavaScript—to deliver exceptionally lightweight applications. It uses a Rust computation engine and event sourcing to handle large scales efficiently, outperforming traditional JavaScript setups. Nue emphasizes a model-first approach with modular design, static typing, and minimal dependencies, aimed at various engineering disciplines including system development, design, and UX.

    32

    3