Open Source Front End·2yI built a Flexbox Playground with Awesome Animations
Flexbox labs is an open source visual tool designed to help you create and customize CSS Flexbox layouts. Key features include an edit tab, save tab, pre-built layouts, and options for customizing the app. The tool is built using React, TypeScript, Sass, and Framer Motion.
asayer·2yBest 7 Practice Projects to Level Up your Skills
Building hands-on projects is essential for web development growth. This post discusses seven practice projects - To-Do List App, Simple Calculator, Weather App, E-commerce Product Page, Tic-Tac-Toe Game, Real-time Chat Application, and Personal Portfolio Website. Each project helps enhance various skills such as JavaScript event handling, API usage, responsive design, and more. Tips for leveling up include breaking down projects, using version control, seeking help, experimenting, and continual learning.
Fireship·2yCSS just changed forever… plus 7 new features you don't know about
CSS has received a significant update, introducing a new logo in the color Rebecca purple and several game-changing features. Among these are the 'aligned content' property for easier centering without flexbox or grid, type-specific CSS variables via the 'property' at rule, and improved animations with the 'starting style' at rule. Additionally, new math functions have been added, alongside improvements for managing light/dark modes and form validation. The 'interpolate size' property also allows for the animation of elements with auto height.
tailwindcss·1yTailwind CSS v4.0 Beta 1
Eight months in the making, Tailwind CSS v4.0 Beta 1 is now available, featuring a new performance-oriented engine that boasts significantly faster build times. The update also includes a unified toolchain, CSS-first configuration, and modern web design enhancements like native cascade layers and container queries. Check out the beta documentation to get started and contribute to its development ahead of the stable release early next year.
Dev Squad·2yI built a Flexbox Playground with Awesome Animations
Flexbox Labs is an open source visual tool designed to help users create layouts using CSS Flexbox. The tool includes customizable features such as edit, save, pre-built layouts, and settings tabs. Additional functionalities include clone, undo, redo, reset, generate code, and more. Built with React, TypeScript, Sass, and Framer Motion, it aims to simplify layout creation and animations for developers.
Lun Dev Code·2yCrazy Ink Animation Effect with CSS Only
Learn how to create a stunning ink animation effect using just CSS. This tutorial walks you through using transparent ink images and GIFs to create visually impressive backgrounds without editing the original images. The guide includes detailed steps and tools needed to implement this effect smoothly.
asayer·2yCreate Scroll Animations with just CSS
Learn to create scroll-based animations using only CSS with detailed examples and code snippets. Understand how to use the animation-timeline and animation-range properties to trigger animations when elements enter the viewport. Also, explore how to handle browser compatibility with JavaScript fallbacks using IntersectionObserver or scroll event listener.
Community Picks·2yTailwind CSS easing classes
A set of easing functions is provided for use in Tailwind CSS projects. It is recommended to use class names with arbitrary properties like `[transition-timing-function:cubic-bezier(...)]` instead of `ease-[cubic-bezier(...)]`, particularly when working with the tailwindcss-animate plugin, due to compatibility issues noted in the Tailwind CSS documentation.
Ahmad Shadeed·2yOverflow Clip
Learn about the CSS overflow property, its usage, and how to control content clipping using the overflow: clip value, which is supported by major browsers. Understand the common issues with overflow: hidden and discover practical use cases for overflow: clip in web design, such as hero sections, single-direction clip, and scroll-driven animations.
Community Picks·1yCSS Grid Cheat Sheet
A comprehensive cheat sheet for CSS Grid, providing detailed information to help web developers create complex and responsive layouts efficiently. It breaks down various properties and examples, making it easier to understand and implement CSS Grid in real-world projects.
CSS Tip·1yFull-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.
Community Picks·2yTailwind CSS Centering: Examples with Tutorial
Tailwind CSS simplifies the often complex task of centering elements in web design through its utility-first approach. This tutorial highlights various techniques for centering text, divs, and inline elements using utility classes like `text-center`, `justify-center`, and `items-center`. It covers installing Tailwind via CDN or npm and details different strategies for horizontal and vertical alignment, enhancing both speed and consistency in web development.
Community Picks·2yNew CSS that can actually be used in 2024 #
CSS has seen significant changes in recent years, introducing several new features now supported by modern browsers. These include logical properties that adapt to different reading directions, container queries for more flexible responsive designs, the powerful :has pseudo-class for conditionally styling elements based on their children, and cascade layers for better organization of styles. Additional advancements include subgrid for improved grid layouts and useful new functions like clamp and min/max for responsive design. These updates promise more control and flexibility for developers but may require polyfills for older browser support.
freeCodeCamp·1yHow to Build a Memory Card Game Using React
This post walks you through building a memory card game using React. It includes details on the project's tech stack (NPM, Vite, React, CSS Modules), project structure, and performance optimizations for mobile devices. The game tests memory skills by challenging players to click unique anime images without repeating. It features dynamic gameplay, score tracking, responsive design, and smooth animations. The post explains how to set up the development environment, create components, manage state, and implement custom hooks, while also providing a GitHub repository for code reference.
Kevin Powell·2yStop Writing Extra Code: HTML Inputs Are More Powerful Than You Think
Developers often overlook the capabilities of HTML inputs and CSS. For example, number inputs can be limited using min and max attributes. CSS pseudo-classes like 'in-range' can enhance user feedback. The color picker input allows users to choose colors from any open window. There's an array of native input features and pseudo-classes that can enrich user interfaces.
CSS-Tricks·2yFluid Everything Else
The post discusses modern approaches to responsive design, focusing on the limitations of traditional methods like media queries. It introduces fluid typography and layout techniques using container queries and CSS's clamp() function to create more seamless and adaptive designs. Examples and code snippets are provided to illustrate these concepts.
Community Picks·2yInspirational Tailwind Loading Page Animation Examples
Loading animations enhance user experience by providing feedback while content loads. This guide explores Tailwind CSS animation utilities and offers various examples, such as full-screen GIFs, spinners, expanding circles, and bouncing dots. Tailwind CSS makes it easy to implement these animations, contributing to a more interactive, visually appealing, and user-friendly website.
Lobsters·2yCSS sprite sheet animations · leanrada.com
Sprite sheets in CSS are used to create animations by displaying different parts of a single image file sequentially. This method reduces HTTP requests and allows for interactive, controllable animations. Key techniques involve using CSS properties like background-position and animation with steps() timing function. Compared to GIFs or SVGs, sprite sheets offer more control but can be complex for higher pixel densities and extensive animations.
DEV·1yIs Your CSS Logical?
CSS logical properties allow developers to create adaptable and future-proof web designs by using layout terms that adjust based on the user's writing direction. These properties are essential for internationalizing web applications to support multiple languages and writing modes. Replacing physical CSS properties with logical ones, such as using `margin-inline-start` instead of `margin-left`, ensures consistency across different cultural contexts and enhances the global usability of your website.
Theo - t3․gg·1yTailwind V4 is WAY better than I expected
Tailwind V4 has introduced significant changes, including a rewrite in Rust, making builds up to 100 times faster. The new version brings a unified tool chain, built-in import handling, vendor prefixing, and syntax transforms. It also emphasizes modern CSS features like container queries and 3D transforms, while allowing more seamless configuration directly in CSS. The update is anticipated to greatly enhance performance and ease of use.