Best of CSS — January 2025
- 1
- 2
WebDev·1y
I Finally built a Grid Playground with Awesome Animations
Flexbox Labs now includes a Grid Playground with new features like grid container and item properties, grid item placement control, and grid line manipulation. This beta release aims to help users master CSS grids while still offering the original Flexbox Labs features. Upcoming updates include grid line numbers, CSS box shadows, gradients, border-radius, and CSS transforms. Feedback and support are welcomed.
- 3
gitconnected·1y
Frontend Developer Roadmap 2025: The Complete Guide
This guide provides a comprehensive roadmap for aspiring frontend developers in 2025, covering essential skills such as understanding web basics, setting up a coding workspace, HTML, CSS, JavaScript, version control with Git and GitHub, and learning popular frameworks like React. It also includes bonus skills like advanced JavaScript techniques, TypeScript, automated testing, and hosting options, all designed to help developers stand out.
- 4
OpenSouls·1y
Top UI libraries with copy-paste components for developers
A curated list of free UI libraries that leverage Tailwind CSS for styling, featuring multiple open-source options. Ideal for developers looking for ready-to-use, copy-paste components. Contributions for additional libraries are welcome to keep the list updated.
- 5
Web Tools Weekly·1y
Top 30 Tools of 2024
Discover the top 30 tools of 2024, which include various CSS and JavaScript libraries, frameworks, and UI components. Learn about solutions for improving sleep quality by neutralizing harmful EMFs, and explore how to support the newsletter creator through various means. Notable tools featured include Beer CSS, VTable, Tini, and Batman-Comic.CSS.
- 6
Community Picks·1y
I Made 12 CSS Tools to Make Life Easier for Developers
Discover a collection of 12 handy CSS tools on NotchTools designed to simplify everyday CSS tasks. These tools generate code for effects like glassmorphism, underlines, text glow, box shadows, and more. NotchTools also provides utilities like CSS minification, beautification, and color conversions, all aimed at enhancing developer workflows.
- 7
Ahmad Shadeed·1y
Balancing Text In CSS
Text balancing in CSS is explored with features like `text-wrap: balance` and `text-wrap: pretty` to ensure even text distribution. These techniques are helpful in addressing challenges with dynamic content and varying browser behavior. Practical examples and demos show how text balance can enhance readability in different scenarios.
- 8
- 9
- 10
UX Planet·1y
The Rise and Fall of Neumorphism
Neumorphism, a UI design trend that emerged in 2019-2020, aimed to create new, fresh aesthetics by combining elements of realism with minimalism. It featured shadows, highlights, and pseudo-3D depth to make UI elements feel embedded or extruded from the background. Despite its visual appeal, neumorphism had practical issues, including low contrast, poor usability, and compatibility problems with dark modes. Following its decline, new trends such as glassmorphism and skeuomorphism 2.0 (hyper-realism) are gaining traction, each bringing distinct visual styles and improvements.
- 11
Cassidy's blog·1y
A couple CSS tricks for HTML <dialog>
Learn a couple of useful CSS tricks for styling the HTML <dialog> element, including how to blur the dialog backdrop and disable page scrolling when a dialog is open. These techniques enhance the appearance and usability of native dialogs on websites.
- 12
Web Dev Simplified·1y
Stop Using Pixels For Media Queries
Using pixels for font sizes, media queries, padding, and margins is not recommended due to accessibility issues. Instead, using REM units allows for more responsive and scalable designs that adapt to user settings. This practice ensures that elements on the web page remain proportional and accessible across different devices and user preferences.
- 13
Prismic·1y
Tailwind CSS Animations: Tutorial and 40+ Examples
Tailwind CSS simplifies adding animations to web designs with its utility-first approach and prebuilt classes. This post provides over 40 examples of different animations, including spin, pulse, and bounce effects, along with custom animations using Tailwind's configuration file. It also compares Tailwind with Bootstrap and introduces several tools and libraries to enhance animations. Readers can explore various animation techniques, from simple effects to complex, visually appealing transitions.
- 14
Tiger's Place·1y
Web Performance Deep Dive: From Browser Internals to Best Practices
This extensive guide explores the intricacies of web performance, detailing the browser's rendering pipeline, the importance of initial render, and the critical role of layers in web performance. Key insights include using appropriate script loading techniques, optimizing animations, managing layers effectively, and understanding CSS containment. Practical tips for improving performance and avoiding common pitfalls are also provided.
- 15
- 16
Coding in Public·1y
THE VSCode extension for design systems
Enhance your design workflow in VSCode by using the CSS Var Complete extension to leverage CSS variables. This extension provides intellisense support for CSS variables, making it easier to access and use design tokens directly in your CSS files. Learn how to set up project-specific or global settings to automatically prompt collaborators to install the extension, ensuring a smooth development process.
- 17
- 18
Bram.us·1y
View Transitions Snippets: Keeping the page interactive while a View Transition is running
When using View Transitions, the page becomes unresponsive to clicks due to the `::view-transition` pseudo element capturing all clicks. To solve this, disable pointer events on this pseudo element with `pointer-events: none;` in CSS. Additionally, prevent the `:root` element from being captured in the View Transition to ensure snapshots don't interfere with hit testing.
- 19
LogRocket·1y
Getting ready for Tailwind v4.0
Tailwind CSS v4.0 introduces a new performance engine, Tailwind Oxide, and simplifies project setup by eliminating the need for a `tailwind.config.js` file. This version allows customizations directly within the CSS file using the `@theme` directive. Container queries now have built-in support, and many existing utilities have been improved for better efficiency and styling. An upgrade tool is available to assist with migrating projects from v3 to v4, and several changes to existing utilities are outlined to ensure compatibility.
- 20
- 21
- 22
View Transitions Snippets: Getting all Animations linked to a View Transition
Learn how to get all animations linked to an active view transition using JavaScript. The post provides a code snippet to filter animations associated with the `::view-transition` pseudo-element and explains how to use it after starting a transition and taking snapshots. Future improvements to simplify the code are also discussed.
- 23
Kevin Powell·1y
Remove empty elements with one line of CSS - great for dynamic content
Learn how to efficiently hide empty elements in dynamic content using the CSS empty pseudo-selector, avoiding the need for complex JavaScript solutions. Ensure that your error messages are completely empty to work correctly and consider accessibility implications for screen readers.
- 24
- 25
