Best of CSS — September 2024
- 1
- 2
Community Picks·2y
15 Useful CSS Properties You Should Know About 🎨
Discover 15 often overlooked but incredibly useful CSS properties that can enhance the design, performance, and user experience of websites. These properties include caret-color for changing text cursor color, accent-color for form controls, pointer-events to manage mouse activity, backdrop-filter for background effects, and scroll-snap-type for smooth scrolling transitions, among others.
- 3
Josh W Comeau·2y
The Undeniable Utility Of CSS <code>:has<
The CSS :has pseudo-class is a new and powerful tool that enables styling of parent elements based on their children, working in a 'bottom-up' fashion. This capability opens up numerous possibilities, such as cleaner state-based styling and global event detection without JavaScript. Although it offers compelling advantages, its current 92% browser support necessitates fallback strategies. Practical examples demonstrate :has's ability to solve complex problems effortlessly, although in some cases JavaScript may still be more suitable. The post also showcases practical applications and experiments to highlight its versatility and utility.
- 4
Web Developer·2y
React Cheat Sheet 📄, JWT Best Practices 🔐, SAML Visualization 🔍, CSS Loaders ⏳
This post offers a variety of resources and updates for web developers, including a React cheat sheet, best practices for JWT authentication, an in-depth visualization of SAML, and a collection of CSS loaders. Additionally, it promotes a free AI and ChatGPT masterclass aimed at enhancing workflow efficiency, covering diverse topics from modern CSS properties to tools for graphics and accessibility.
- 5
Piccalilli·2y
How I build a button component
Learn how to build a versatile button component in HTML and CSS with multiple variants including a ghost button and one with hard edges. The guide emphasizes using semantic elements instead of <div> and JavaScript handlers, outlines the use of custom properties for maintainable styles, and incorporates best practices for accessibility using ARIA attributes.
- 6
DEV·2y
7 Old-School Practices in HTML Should Be Avoided
Avoid using outdated HTML practices like specifying type attributes for <script> and <style>, using frameborder on <iframe>, and including support for IE 8. Utilize semantic elements like <header> and <footer> properly within sections, and choose heading tags based on page structure rather than design. Lastly, simplify boolean attributes by omitting unnecessary values.
- 7
3D Book Flip Cover
The post explains how to use HTML, CSS, and JavaScript preprocessors in CodePen to enhance your coding experience. It also covers linking to external resources using both secure (https) and non-secure (http) protocols, as well as how to properly apply vendor prefixes for cross-browser support. Additional tips include autosaving and live preview configurations in CodePen.
- 8
Ahmad Shadeed·2y
CSS display contents
The post explains the CSS display: contents property, demonstrating its ability to remove the box element of a parent container while keeping its children in the DOM. This can be useful for ungrouping elements, styling generated HTML, and adjusting layouts without altering the actual HTML structure. Various examples illustrate how display: contents can simplify complex layouts, enhance flexibility, and solve common design issues such as repositioning elements and creating responsive designs.
- 9
freeCodeCamp·2y
How to Use CSS to Improve Web Accessibility
CSS can significantly enhance web accessibility by updating focus styles, avoiding content shifts, reducing motion for users with vestibular disorders, and customizing contrast options. Techniques such as using the :focus pseudo-class, prefers-reduced-motion, prefers-contrast media queries, and enabling dark mode help create a more inclusive user experience. CSS animations can also enhance UX by visually guiding users and providing feedback. Ensure purposeful and user-friendly implementation to support assistive technologies and improve overall accessibility.
- 10
Syncfusion·2y
React Styling: Essential Tips and Tricks for Designers
Modern React styling techniques include CSS Modules, Styled Components, and Tailwind CSS. CSS Modules prevent class name conflicts by scoping styles locally. Styled Components integrate CSS in JavaScript for dynamic styling and the creation of reusable UI elements. Tailwind CSS uses utility-first classes, allowing for rapid and scalable design directly within HTML, promoting faster development. Each method offers unique advantages in modularity, customization, and performance optimization for web development.
- 11
Creating 3D effects in CSS
CSS can be used to create impressive 3D effects by leveraging properties like transform and perspective. This guide explains how to manipulate 3D dimensions and positions of elements with operations such as translateX(), translateY(), and translateZ(). Additionally, it covers creating visual illusions with shadows and light to enhance the 3D effect. The post includes practical examples like text reflections, shadows, 3D text animations, image tilts, interactive buttons, and how to create tilt effects using vanilla-tilt.js.
- 12
asayer·2y
Building a CSS Sprite Generator
A CSS sprite generator tool combines multiple images into a single file, reducing HTTP requests and improving website performance. CSS sprites enhance user experience by minimizing latency, simplifying CSS, and ensuring consistent appearance. This tutorial provides step-by-step instructions for creating a sprite generator tool that automates sprite sheet creation and its associated CSS code, thus saving server bandwidth and improving SEO.
- 13
- 14
- 15
Lobsters·2yOpinions for Writing Good CSS
CSS, though challenging for beginners, is a robust and flexible language. Key advice includes avoiding unnecessary CSS, using comments for transparency, managing specificity without relying on Ids or !important, and systematizing your approach. Resets and defaults can simplify coding, understanding the codebase is crucial in team settings, and CSS variables and responsive design considerations are essential. Avoid copying and pasting CSS to foster better understanding and deliberate coding choices.
- 16
CSS-Tricks·2y
CSS Masonry & CSS Grid
Masonry layout in CSS, often associated with packing items of varying sizes into columns, lacks a baked-in solution unlike the 'Holy Grail' layout with CSS Grid. There are two competing proposals for integrating masonry into CSS, each with its merits: one as a sub-feature of CSS Grid and another as a separate module. Discussions among CSS experts highlight the challenges and benefits of both approaches, with accessibility and layout performance being key considerations.
- 17
Product Hunt·2y
TailConverter - The easiest way to convert CSS to Tailwind CSS
TailConverter is an intuitive tool designed to easily convert CSS to Tailwind CSS. Created to boost productivity for designers and developers, it marks its first launch and has been featured in the categories of design tools and productivity applications on September 26th, 2024.
- 18
Advanced Animations with CSS linear()
Learn how to create advanced animations using CSS's new `linear()` easing function, which allows for more natural animations without needing JavaScript. The post explains how easing functions calculate the change in styles over time and provides examples and tools for working with different easing functions such as Bézier curves. The `linear()` function, available since late 2023, enables developers to define an animation curve as a series of stop-point lines for more sophisticated effects.
- 19
Web Tools Weekly·2y
CSS Tools, JSON, Databases, Uncats
Discover the genesis and rise in popularity of the htmx project from its creator's perspective, along with a curated list of CSS & HTML tools, JSON & database tools, and uncategorizable utilities. Highlights include Tailwind generators, a Node.js script for obsolete HTML detection, a minimal GraphQL client, and innovative platforms like Fair Source and Fonts Ninja.
- 20
LogRocket·2y
Creating an animated hamburger menu icon for React
Learn how to create an animated hamburger menu icon in React using the `hamburger-react` library and custom CSS animations. The tutorial covers installation, basic implementation, advanced customization, and accessibility enhancements. It also dives into state management using React Context, allowing various components like Sidebar and BackgroundOverlay to respond dynamically to the menu's state. Comprehensive examples and an invitation to try LogRocket for monitoring frontend performance are included.
- 21
Kevin Powell·2y
Improve your reset with these modern CSS additions
Discover three modern CSS additions to enhance your CSS reset. Learn about the text-wrap balance to improve heading appearance, setting max width on text elements to ensure readability, and utilizing container queries for better responsive design. These tips aim to make your web typography and layout more visually appealing and easier to manage.
- 22
Introducing: Complete CSS
Introducing Complete CSS, a new course focused on enhancing your CSS knowledge along with essential soft skills like communication, planning, and execution. The course includes a real-world project to help apply what you've learned. Pre-orders are now open, with the course set to go live in November 2024. You can subscribe to receive updates if you prefer to wait until it's available.
- 23
- 24
iO tech_hub·2y
Controlling your video animations with scroll-timeline and animation-timeline
Learn how to control video animations using the new CSS properties scroll-timeline and animation-timeline, enabling you to create effects like parallax scrolling and scroll-triggered media playback without JavaScript. The post includes a detailed project example demonstrating how to split videos into frames, create animations, and control them with scroll interactions.
- 25
Bram.us·2y
Animate to height: auto; (and other intrinsic sizing keywords) in CSS
Chrome 129 introduces the `interpolate-size` property and `calc-size()` function, allowing smooth transitions and animations from lengths to intrinsic sizing keywords like `height: auto`, `min-content`, and `max-content`. Adding `interpolate-size: allow-keywords;` to your stylesheet enables these animations.
