Best of CSS — December 2024

  1. 1
    Article
    Avatar of devtoDEV·1y

    100+ Frontend Projects to level up your Skills

    Finding interesting frontend projects to work on can be challenging for both beginners and experienced developers. This post shares a GitHub repository with over 100 frontend projects, complete with source code. The projects range from beginner to advanced levels, covering a variety of applications like calculators, e-commerce websites, and more. Tips on how to select, analyze, and customize these projects are also provided to help developers improve their skills and build an impressive portfolio.

  2. 2
    Article
    Avatar of joshwcomeauJosh W Comeau·1y

    Next-level frosted glass with backdrop-filter • Josh W. Comeau

    Learn how to create an advanced frosted glass effect using the `backdrop-filter: blur()` CSS property and other optimizations to enhance the depth and realism of your web projects. This guide covers the intricacies of CSS filters, handling browser compatibility, and fixing common issues like pixel consideration and flickering. It includes practical demonstrations, code snippets, and tips for improving performance and visual quality.

  3. 3
    Article
    Avatar of webtoolsweeklyWeb Tools Weekly·1y

    Top Tools of 2024 (Part 1)

    HubSpot is recommended as the top free CRM software for small and scaling businesses, offering powerful features and an intuitive user experience. The post lists tools ranked #60 to #31 for 2024, including libraries like remoteStorage for data persistence, CodeViz for visualizing codebases, and matcha.css for simple styling. Readers are encouraged to support the newsletter through subscriptions or contributions.

  4. 4
    Article
    Avatar of communityCommunity Picks·1y

    CSS Layout Generator

    Explore how a CSS Layout Generator can simplify the process of creating flexible and responsive web layouts without manual coding. Such tools help designers and developers quickly generate CSS code for various layout configurations.

  5. 5
    Article
    Avatar of PrismicPrismic·1y

    CSS Hover Effects: 40 Engaging Animations To Try

    Interactive websites are key to a good user experience, and CSS hover animations can help achieve this. This post provides 40 engaging CSS hover animations, including custom ones and examples from other developers. Techniques range from simple button scaling to complex 3D effects. It also highlights tools and libraries like Hover.css, Mocassin.css, and iHover for creating these animations easily, enhancing the visual appeal and interactivity of your website.

  6. 6
    Article
    Avatar of devtoDEV·1y

    5 Frontend Development Myths That Need to Die in 2024

    Frontend development is often misunderstood due to persistent myths. Common misconceptions include the simplicity of CSS, the ability of frameworks to solve all problems, the perceived complexity gap between frontend and backend, the optional nature of accessibility, and the belief that frontend development will soon be fully automated by AI. These myths overlook the nuanced, challenging nature of building user-facing software and highlight the importance of understanding the intricacies of frontend work.

  7. 7
    Article
    Avatar of PrismicPrismic·1y

    CSS Text Animations: 40 Creative Examples to Try

    CSS text animations can enhance user experience by making web content more engaging. This post showcases 40 creative examples of text animations, including custom animations and curated CodePen projects. Each example is accompanied by live demos and code snippets for easy implementation. The post also discusses essential CSS features and principles behind these animations and presents popular libraries and tools to help create your own animations.

  8. 8
    Video
    Avatar of wdsWeb Dev Simplified·1y

    The CSS Display Property is Changing Forever

    The CSS display property now accepts two values, enhancing flexibility in layout design. Initially, the display property could only define the element's own layout, but advancements allow specifying how child elements behave with values like flex, grid, and more. New properties like 'contents' and 'flow-root' offer additional control, such as preventing margin collapsing. This new approach provides greater flexibility and precision in web design layouts.

  9. 9
    Article
    Avatar of bramBram.us·1y

    More options for styling <details>

    Chrome 131 introduces new styling options for <details> and <summary> elements, allowing properties other than 'block' and the use of the ::details-content pseudo-element. While currently only supported in Chrome, these features are expected in Safari soon.

  10. 10
    Video
    Avatar of wdsWeb Dev Simplified·1y

    How To Master CSS in 1 Month!

    A newly launched CSS course includes over 100 videos and 20 projects, aimed at teaching you how to build complex projects like a Discord clone and a fully responsive Figma landing page. The course covers both foundational and advanced CSS concepts, including new color features and custom media queries. A discount code is available for one week, offering $35 off. Testimonials are included to showcase the course's effectiveness.

  11. 11
    Article
    Avatar of PrismicPrismic·1y

    CSS Button Animations: 40 Ideas to Try + Code Examples

    Explore 40 creative CSS button animations designed to enhance user experience and make buttons stand out. From hover effects and 3D animations to click and SVG animations, these examples demonstrate a variety of techniques to inspire your projects. Learn how to use custom CSS, JavaScript, and tools to create visually engaging and interactive buttons.

  12. 12
    Video
    Avatar of t3dotggTheo - t3․gg·1y

    Tailwind just broke a TON of websites...

    Tailwind CSS recently faced an issue where custom text selection colors broke in the latest version of Chrome (131). This problem arose due to changes in Chrome's handling of CSS variables and selection properties. Although quickly addressed, the incident highlights the complexities of web development and browser compatibility, emphasizing the need for cautious use of advanced CSS features. Fixes include using specific Tailwind settings or waiting for Chrome updates.

  13. 13
    Article
    Avatar of ishadeedAhmad Shadeed·1y

    Solved By Modern CSS: Feature Image

    Learn how to design a responsive feature image with a caption using modern CSS techniques including container queries, the :has() selector, and CSS grid. The guide explores different layout options and demonstrates how to achieve fluid design that adjusts to various container sizes, ensuring the caption appears in a classic or circular style depending on the viewport.

  14. 14
    Article
    Avatar of kirupaKirupa·1y

    Preserving the Pixel Art Look in Web Content

    Learn how to preserve the classic 8-bit pixel art look in modern web content by using specific HTML and CSS properties. The post covers making images pixelated using the image-rendering property, loading and embedding custom pixel fonts, and disabling anti-aliasing to retain the sharp, jagged appearance characteristic of pixel art. It also emphasizes testing designs across different browsers and devices for consistency.

  15. 15
    Article
    Avatar of css_tricksCSS-Tricks·1y

    Knowing CSS is Mastery to Frontend Development

    While modern frameworks like React and TypeScript, along with component libraries such as MUI and Tailwind, have made styling easier, many developers lack the knowledge to assess the quality of CSS in their codebases. This can lead to performance issues and a lack of understanding of foundational principles. Ultimately, prioritizing user experience and a deeper understanding of CSS are crucial for effective frontend development.

  16. 16
    Article
    Avatar of csstipCSS 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.

  17. 17
    Video
    Avatar of wdsWeb Dev Simplified·1y

    How To Handle CSS Colors Like A Senior Dev

    The post provides an in-depth guide on advanced CSS color features. It covers color spaces and gamuts, how to use relative colors, the color mix function, and methods to implement dynamic light and dark modes. These techniques allow developers to leverage a broader range of colors and create more dynamic, visually appealing websites.

  18. 18
    Video
    Avatar of t3dotggTheo - t3․gg·1y

    I love Tailwind, but this is scary...

    Tailwind CSS V4 introduces several changes and improvements, including moving to Lightning CSS for better performance, adding CSS-first configuration, and supporting radial and conic gradients. However, some features have raised concerns such as the impact of using CSS variables on performance, potential maintainability issues with descendant and child variants, and the use of double-star selectors. Critical feedback highlights the need for caution in adopting these new features to ensure code maintainability and performance.

  19. 19
    Article
    Avatar of communityCommunity Picks·1y

    CSS Scan 4.0

    CSS Scan 4.0 offers a fast and easy way to inspect, copy, and edit CSS by simply hovering over elements. Users can take advantage of a limited-time deal in honor of Human Rights Day, with lifetime licenses available at discounted prices. The tool supports multiple browsers and includes features like code export to Codepen, Tailwind CSS conversion, grid alignment verification, and more. The purchase also provides a discount on toast.log.

  20. 20
    Video
    Avatar of kevinpowellKevin Powell·1y

    No more extra scrollbars when using overflow-x

    Learn how to prevent unwanted horizontal scrolling by using the CSS 'clip' property instead of 'overflow: hidden'. This solution allows you to manage overflow in one direction while maintaining visibility in the other, solving common issues with double scroll bars. Additionally, get tips on removing elements from the DOM for better user navigation.

  21. 21
    Article
    Avatar of communityCommunity Picks·1y

    Quick start · Base UI

    This guide provides instructions for installing and setting up Base UI components using npm. It includes steps for configuring portals to ensure popups appear above other elements, and offers styling options using Tailwind, CSS Modules, or other CSS methods. The guide also encourages exploring the documentation to learn more about available components.

  22. 22
    Article
    Avatar of bramBram.us·1y

    Re-imagine the web with Scroll-Driven Animations

    Learn how to create engaging, app-like web experiences through fluid, responsive scroll-driven animations using CSS and JavaScript. The post addresses common concerns such as the necessity of JavaScript for certain effects, and how to manage user preferences for reduced motion animations.

  23. 23
    Article
    Avatar of csstipCSS Tip·1y

    Overflow/scrollbar detection using modern CSS

    Detecting overflow or scrollable elements using modern CSS techniques is possible through scroll-driven animation. This information can be stored in a variable at the root level for various uses like styling elements on the page. The method works well with Chrome and doesn't necessarily require style queries, offering simpler alternatives for targeting elements.

  24. 24
    Article
    Avatar of freecodecampfreeCodeCamp·1y

    How to Write Better Names for Your Variables, Functions, and Classes – With Examples

    Naming is a crucial aspect of writing clean, maintainable, and scalable code. Good names improve readability, maintainability, collaboration, and scalability. The post offers comprehensive guidelines for naming conventions across various programming languages like camelCase for variables and functions, PascalCase for classes, kebab-case for CSS elements, and snake_case for Python. It also provides universal naming principles like being descriptive and concise, avoiding cryptic abbreviations, and following consistent naming conventions. Practical examples are given for creating good class names, variable names, and function names.

  25. 25
    Article
    Avatar of PrismicPrismic·1y

    39 Awesome CSS Animation Examples with Demos + Live Code

    CSS animations can make websites more engaging by using effects like hover states, transitions, and interactive elements. The post showcases 39 examples of CSS animations along with demos and live code, including text animations, hover effects, button animations, loading animations, and more. These examples range from simple CSS-only effects to more complex animations requiring JavaScript. Additionally, it provides resources and tools for creating custom animations.

See all CSS archives