Dev Tools·46wPattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft is a new tool offering a modern collection of background patterns, gradients, and glow effects designed for landing pages, portfolios, and web applications. The tool provides professional-grade backgrounds that can be easily copied and pasted into projects, with built-in support for modern CSS and Tailwind CSS for seamless integration.
Frontend Masters·42wLiquid Glass on the Web – Frontend Masters Blog
Apple's new Liquid Glass design aesthetic for version 26 operating systems creates complex visual effects with light refraction, distortion, and frosted glass appearances. Web developers are recreating this look using CSS backdrop-filter, SVG filters like feDisplacementMap and feGaussianBlur, and React components. The technique involves multiple parameters including displacement scale, blur amount, saturation, and aberration intensity. However, implementing liquid glass effects raises significant text contrast accessibility concerns that developers must carefully address when placing text over unknown backgrounds.
Josh W Comeau·44wA Friendly Introduction to SVG • Josh W. Comeau
SVG (Scalable Vector Graphics) is a powerful web technology that allows developers to create scalable, interactive graphics using XML syntax. Unlike traditional image formats, inline SVGs can be styled with CSS and manipulated with JavaScript as first-class DOM citizens. The tutorial covers basic SVG shapes (circles, rectangles, polygons), the viewBox attribute for scalability, and advanced stroke animations including dash patterns and drawing effects. Key concepts include using presentational attributes, creating smooth transitions, and leveraging stroke-dasharray and stroke-dashoffset for dynamic visual effects.
Hacker News·43wIt’s time for modern CSS to kill the SPA
Modern CSS features like View Transitions API and Speculation Rules have eliminated the main advantages of Single Page Applications (SPAs). Native browser capabilities now provide smooth page transitions, instant navigation, and better performance without the complexity, JavaScript overhead, and maintenance burden of client-side routing. Most websites would benefit from returning to Multi Page Application (MPA) architecture with modern CSS enhancements rather than building everything as an SPA.
DEV·46wDrawing a Koala with HTML and CSS
A developer creates a koala drawing using only HTML and CSS, demonstrating advanced CSS techniques like gradients, shadows, positioning, pseudo-elements, masks, and clip-path. The project showcases creative use of CSS properties to achieve a 3D clay-like appearance, with the complete coding process recorded and shared on YouTube.
Chrome Developers·46wCSS conditionals with the new if() function
Chrome 137 introduces the CSS if() function, enabling inline conditionals for dynamic styling. The function supports style(), media(), and supports() queries, allowing developers to write conditional logic directly within CSS properties instead of using separate @media or @supports blocks. Examples include responsive button sizing based on pointer type, color space fallbacks, and state-based styling using data attributes. This feature provides a cleaner architectural approach by keeping styling logic inline rather than scattered across multiple CSS blocks.
WebCraft·46wPattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft is a new tool that provides a modern collection of background patterns, gradients, and glow effects designed for landing pages, portfolios, and web applications. The tool offers professional-grade backgrounds that can be easily copied and pasted into projects, with built-in support for modern CSS and Tailwind CSS for seamless integration.
All Tailwind CSS·45wPattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft is a free collection of modern background patterns, gradients, and glow effects designed for Tailwind CSS. The tool provides professional-grade backgrounds that can be easily copied and pasted into landing pages, portfolios, and web applications, offering seamless integration with modern CSS and Tailwind frameworks.
Changelog·43wIt's time for modern CSS to kill the SPA (Changelog News #154)
Jono Alderson argues that modern CSS capabilities have evolved to the point where they can replace many single page application (SPA) functionalities, potentially offering better performance and simpler development approaches. The discussion explores how contemporary CSS features might eliminate the need for complex JavaScript frameworks in certain web development scenarios.
FREEK.DEV·43wPreventing scrollbar layout shifts
Addresses the common web development issue where page layouts shift when scrollbars appear or disappear during navigation between pages of different lengths. The content focuses on techniques to prevent these jarring visual shifts that can negatively impact user experience.
Prismic·43wTailwind CSS Grid: Complete Guide & Examples
CSS Grid is a powerful 2-dimensional layout system that becomes even more accessible when combined with Tailwind CSS utility classes. The guide covers creating grid containers with `grid` and `inline-grid` classes, managing columns using `grid-cols-x` and positioning classes like `col-span-x`, controlling rows with `grid-rows-x` and `row-start-x` classes, and handling spacing with `gap` utilities. It also explains alignment properties including `justify-items`, `items`, `content`, and `justify` for precise control over grid item positioning. The tutorial includes practical examples like blog post grids and website layouts, plus a comprehensive cheatsheet mapping CSS Grid properties to their Tailwind equivalents.
CSS-Tricks·45wThe Layout Maestro Course
Ahmad Shadeed is developing a new online course called 'The Layout Maestro' focused on CSS layout techniques. The course will cover modern layout methods including Flexbox, CSS Grid, Subgrid, Masonry, and Container Queries. Shadeed is recognized for his expertise in CSS layout through his interactive guides and practical demonstrations. The course is still in development with email signup available for updates.
CSS-Tricks·43wAtomic Design Certification Course
Brad Frost, creator of the Atomic Design methodology from 2013, is launching an online certification course with his brother Ian. The course covers the five-layer design system approach (atoms, molecules, organisms, templates, pages) that emphasizes composable, consistent, and reusable web design components. Currently available for presale at $50 with team discounts.
All Frontend·46wPattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft offers a collection of professional-grade background patterns and gradients designed for websites and applications. The patterns are built with modern CSS and Tailwind CSS, allowing developers to easily copy and paste them into their projects for seamless integration.
Lobsters·45wDon't animate height!
A CSS height animation was causing 60% CPU and 25% GPU usage in an Electron app. The issue stems from height being a layout property that triggers expensive layout recalculation, painting, and compositing on every frame. The solution involves replacing height animations with transform-based animations using translate and multiple elements to create the same visual effect, reducing CPU usage from 15% to 6% and GPU usage to less than 1%.
Coding in Public·46wModern JavaScript TODO app
A comprehensive tutorial for building a todo application using vanilla HTML, CSS, and JavaScript. Covers CRUD operations, local storage for data persistence, modern CSS features like custom properties and nesting, accessibility best practices including ARIA labels and screen reader support, custom events for UI rendering, and creating styled custom checkboxes. The tutorial emphasizes separation of concerns between data management and UI rendering while maintaining semantic HTML structure.
CSS Tip·42wResponsive infinite logo marquee
Modern CSS techniques enable creating responsive infinite logo marquees using the shape() function and new sibling-index()/sibling-count() functions. The approach works with any number of images, adapts to container width without magic numbers, and can be controlled through CSS variables. Currently limited to Chrome browser support, the technique requires equal-width items and works with any content type beyond just images.
DEV·43wCSS Art: Severance Office
A developer recreates the office desk arrangement from the TV show Severance using HTML and 3D CSS transforms. The project demonstrates advanced CSS techniques including custom properties for creating reusable cube components and 3D rotations. During development, the author discovered a Chrome-specific rendering bug where elements rotated exactly 180 degrees become invisible, which was resolved by using 179.999 degrees instead. The bug was reported to Chrome's issue tracker.
Ionic Blog·42wAnnouncing Ionic 8.7
Ionic Framework 8.7 introduces new reorder events (ionReorderStart, ionReorderMove, ionReorderEnd) for better drag-and-drop control, comprehensive CSS utility classes for display and flexbox layouts, Ionicons v8 with enhanced Safari compatibility, and Angular IonModalToken for improved modal dependency injection. The release also deprecates several older classes and events while maintaining backward compatibility.
All Things Frontend·42wGradientCSS — Instantly Modern Gradients for Web Projects
GradientCSS is an open-source tool that provides a curated collection of modern gradients for web projects. It offers one-click copying and exporting in multiple formats including CSS, Tailwind, SCSS, SVG, and images. The tool features live preview, animation controls, and supports various gradient types (linear, radial, conic) without requiring user registration.
DEV·43w✨🎨 Pure CSS Magic: How to Build a Realistic 3D Office Experience 🏢💻🪑
A comprehensive tutorial demonstrating how to build a fully interactive 3D office environment using only HTML and CSS. The project features four office departments with animated characters representing diverse workplace scenarios including executive meetings, job interviews, development teams, and water cooler conversations. Key techniques covered include CSS 3D transforms, glass morphism effects, keyframe animations, and responsive design using CSS Grid. The tutorial emphasizes performance benefits of CSS-only approaches, accessibility considerations, and authentic diversity representation in character design.
CSS Tip·45wDynamic nth-child() using sibling-index() and if()
Modern CSS introduces sibling-index() and if() functions that enable dynamic nth-child() selectors with variable parameters. Unlike traditional nth-child() selectors with fixed values, this approach allows updating A and B parameters on the fly using CSS custom properties. The technique uses mathematical conditions to validate positive integers and implements the nth-child formula programmatically. Currently limited to Chrome browser support.
Cassidy's blog·42wMaking a faded text effect in (mostly) CSS
A tutorial demonstrating how to create a per-letter fading text effect using CSS custom properties and JavaScript. The technique involves splitting text into individual characters wrapped in spans, then applying CSS calc() functions with blur filters and opacity based on character index variables. The author also explores alternative approaches like nth-child selectors and background-clip gradients.
CSS Tip·46wInvert CSS Shapes using shape()
Learn how to invert CSS shapes created with the shape() function using clip-path. The technique allows you to create both the original shape and its cut-out version with simple code modifications. An additional variable can be used to control spacing around inverted shapes, providing more flexibility in design implementation.
CodeHead·43wHow To REALLY Get Into Web Development
Web development can feel overwhelming with countless tutorials and frameworks, but success comes from mastering the fundamentals first. Start with HTML, CSS, and JavaScript basics by building simple projects like calculators and to-do lists. Once comfortable, learn one modern framework like React, then focus on deploying projects online. Avoid tutorial hell by building your own projects, don't compare yourself to experienced developers, and resist chasing every new tool. Consistency in practice matters more than perfection, and everyone starts confused - the key is building bad things and gradually improving them.