Best of CSS — October 2024
- 1
- 2
DEV·2y
Top 7 Web development projects for beginners
Gaining practical experience and building a portfolio is crucial for beginners in web development. Seven suggested projects include a personal portfolio website, a to-do list app with advanced features, a product landing page, a simple calculator, a weather app using an API, a responsive blog page with dynamic content, and a mini e-commerce product page. These projects cover essential skills like HTML, CSS, JavaScript, responsive design, API handling, and more.
- 3
Bram.us·2y
Scroll-driven animated card stack with scroll snap events
A detailed breakdown and rework of Paul Noble's impressive scroll-driven card stack demo, which uses a few lines of JavaScript and zero dependencies. Key techniques include an invisible scroller with ScrollTimeline, CSS scroll-snapping to center cards, and custom animations for snapped cards. A remix of the demo simplifies the code by using shared keyframes and includes a fallback for browsers not supporting Snap Events.
- 4
- 5
Coding in Public·2y
Favorite New Tailwind Extension
Fluid Tailwind is a new plugin that leverages the CSS clamp function to allow smooth transitions of values like padding, margin, and text sizes within Tailwind CSS. This plugin simplifies writing Tailwind classes and enhances UX by providing fluid transitions between values. The post also guides on setting up and configuring the plugin properly to work with Tailwind's default settings.
- 6
Web Tools Weekly·2y
CSS & HTML, Build Tools, JS Utilities
A collection of useful web development tools and frameworks including skellyCSS for skeleton screens, tailwind-to-inline for converting Tailwind classes to inline styles, and various other CSS libraries. It also highlights build tools and JavaScript utilities such as Hot Hook, nrr, and UAParser.js. Additionally, it features commercial apps for analytics, interactive FAQs, and drag-and-drop code editors.
- 7
Hacker News·2y
Video & audio player themes for every web player & framework
Discover a variety of customizable audio and video player themes for every web player and framework. These themes can be tailored using just HTML and CSS, featuring designs inspired by popular platforms like YouTube, Vimeo, and social media apps. Themes include retro and modern options, each optimized for different types of content and viewer preferences.
- 8
Kevin Powell·2y
This new CSS property just solved animating to height auto
Animating height to auto in CSS is now easy with a new property. By using 'interpolate size: allow keywords', you can transition to height auto without hacks. This method also works with other intrinsic keywords like min-content, max-content, and fit-content. Using this property at the root level applies the effect sitewide. Tips on managing visibility during transitions are also included.
- 9
- 10
Community Picks·2y
Learn CSS Border Animations in 6 Minutes
Learn how to create border animations in CSS using uncommon and cool CSS properties. The guide explains why the traditional border property won't work for complex animations and demonstrates using pseudo-elements like ::after and ::before to achieve the desired effect. A conic gradient is employed for smooth color transitions, and custom properties are used for animating the gradient angles efficiently.
- 11
LogRocket·2y
Simplifying CSS animations with the display and size properties
Recent updates in Chrome have introduced new features that simplify animating CSS properties like display and size. Traditionally, developers faced challenges animating properties like display and height: auto, often relying on opacity or JavaScript workarounds. The new additions, such as keyframe animations for display, the calc-size() function, and the transition-behavior property, facilitate smoother animations without complex code. These improvements make CSS animations more accessible and efficient.
- 12
CSS-Tricks·2y
CSS Anchor Positioning Guide
CSS Anchor Positioning provides a simple way to attach and position elements adjacent to others directly in CSS, allowing for fallback positions to avoid overflow issues. It has gained rapid browser support, notably being released in Chrome 125, and offers a more efficient alternative to JavaScript-based positioning. The guide covers key concepts, such as defining anchors and targets, and explains properties like `position-area`, `position-visibility`, and `position-try-fallbacks` for fine-grained control. The spec includes handy functions like `anchor()` and `anchor-size()` for attaching and scaling elements relative to anchors. However, some bugs and spec changes exist, impacting implementation nuances.
- 13
LambdaTest·2y
47 Best Glowing Effects in CSS
CSS glowing effects make web elements visually striking by using properties like box-shadow, text-shadow, and filter. These effects are commonly applied to buttons, text, input fields, and more to enhance user experience and highlight key areas. From neon text to glowing buttons and boxes, these effects can transform website aesthetics, making them modern and engaging. Proper implementation ensures consistent performance across various browsers and devices, with tools like LambdaTest aiding in testing responsiveness and compatibility.
- 14
Web Developer·2y
CSS Interaction Properties You Might Not Know About
Learn about various CSS interaction properties like Scroll Snap, overscroll-behavior, scrollbar-gutter, overflow-anchor, touch-action, and the new View Transition API. These properties allow for more intuitive scrolling, better control over touch interactions, space reservation for scrollbars, and dynamic animations based on user scroll behavior or view transitions. Practical examples for each property demonstrate how to enhance user experience on web pages.
- 15
freeCodeCamp·2y
How to Build a CSS Component Library and Improve Your Web Development Skills
Building a CSS component library can dramatically improve UI development efficiency and consistency. Key steps include designing component layouts, structuring them with HTML, styling with CSS, and hosting the CSS file for easy reuse. This process not only speeds up development but also ensures maintainable and scalable code. Benefits include faster development, uniform styling, better maintainability, community support, and customization options. The post details steps for creating, styling, and hosting components, emphasizing the importance of a structured, modular approach to web design.
- 16
Why jQuery 4 is a good reminder to stop using jQuery
Although jQuery has played a significant role in web development, its latest version, jQuery v4, feels outdated. Modern web APIs offer enhanced, developer-friendly features that make jQuery unnecessary. This post highlights how native JavaScript and advanced CSS have replaced jQuery's DOM manipulation and animation functionalities, evidencing the library's gradual decline in relevance.
- 17
Lun Dev Code·2y
Remove Image Backgrounds With One Line Of Code From Master CSS
The post introduces a method to remove image backgrounds using a single line of CSS code, specifically utilizing the mix-blend-mode property. This technique ensures that product images blend seamlessly with the website's design, addressing issues caused by non-transparent backgrounds. The approach is compatible with all major browsers and provides a powerful solution for consistent web design, especially in e-commerce.
- 18
BRiCSS
BRiCSS provides a simple, low-level CSS abstraction with a naming convention based on abbreviations. It creates optimized CSS files for responsive design by focusing on properties that are actually used. The solution requires only a browser, generates automatic documentation, and supports offline operation. It integrates well with design systems and allows users to instantly see the file size impact of their settings, with options to copy or download the latest custom CSS library.
- 19
My top 5 most popular front-end tips
The post outlines the top five front-end tips based on the author's short-form video views. It covers various tips like debugging CSS overflows, adjusting favicons for different color schemes, handling HTML input types and modes, modern CSS practices, and strategies for better learning and retaining web development skills outside of tutorials. Key highlights include using an outline to locate hidden elements, using media queries for favicons, enhancing user experience with input fields, and the importance of building projects independently to overcome 'tutorial hell'.
- 20
asayer·2y
Mastering Technical Interviews: Strategies for Landing your Dream Job
In the highly competitive job market of today, acing technical interviews is crucial for landing your dream front-end development job. This post covers the importance of mastering fundamentals, common interview questions, and types of technical assessments such as live coding, take-home assignments, whiteboard challenges, and pair programming. It also provides preparation tips, portfolio showcasing techniques, and insights on salary negotiations to ensure you present yourself in the best light and get compensated fairly for your skills. Key resources and platforms for further learning and networking are also recommended.
- 21
How to style HTML with matcha.css
matcha.css is a pure CSS library that simplifies the process of styling HTML elements without the need to write custom CSS. It offers basic, responsive, and customizable styling with substantial support for various HTML elements. The library is easy to integrate and remove, enhances workflow, and avoids the use of !important rules, making style overriding simple. Developers can utilize matcha.css to streamline their CSS work, particularly for basic components like buttons, forms, and menus. Additionally, it can be used alongside other CSS frameworks, though conflicts may arise.
- 22
Codrops·2y
Staggered (3D) Grid Animations with Scroll-Triggered Effects
An exploration into staggered grid animations incorporating 3D perspective effects, filters, and typography. The demo includes a unique cylinder-like 3D effect in a two-columned grid layout, utilizing GSAP's SplitText plugin. The repo contains a trial version for experimentation.
- 23
DesignCourse·2y
Creating Scroll Activated RIVE Animations
Learn how to create scroll-activated animations using RVE and JavaScript. The post guides you through setting up animations with different timelines and how to control them based on the scroll position using JavaScript. It includes detailed steps on creating the animations in RVE, integrating them with HTML and CSS, and implementing smooth scrolling effects for better user experience.
- 24
Leveraging CSS :invalid for Real-Time Data Validation
The :invalid pseudo-class in CSS allows real-time data validation for form fields without relying on JavaScript or server-side validation. Attributes like 'required' and 'pattern' help create rules to guide users, offering a better user experience. The pseudo-class works across popular browsers, though slight styling differences may occur. Combining :invalid with HTML5 attributes can provide useful visual feedback and error messages. For more complex validations, incorporating JavaScript may be necessary. Following best practices ensures effective and accessible error handling in forms.
- 25
Unleash the Power of Scroll-Driven Animations
Scroll-driven animations are directly linked to scrolling progress, pausing and playing with scroll direction. Unlike scroll-triggered animations, which run independently, scroll-driven ones offer performance perks by avoiding render-blocking. Techniques are demonstrated using CSS properties like `animation-timeline` and JavaScript's `ScrollTimeline` to create responsive animations. Core concepts also include view timelines and named/anonymous timelines for more complex animation management, benefiting from hardware acceleration. Performance tips like preferring `overflow: clipped` over `hidden` and attaching animations after shorthand properties ensure smooth operation.
