#css

[ follow ]
#anchor-positioning
fromCSS-Tricks
14 hours ago
Web development

What's !important #3: Popover Context Menus, @scope, New Web Platform Features, and More | CSS-Tricks

CSS advancements like anchor positioning baseline and @scope enable scoped styling, improved popover context menus, and creative image-derived gradient border effects for modern web design.
fromIshadeed
4 months ago
Web development

The Basics of Anchor Positioning

Anchor positioning lets elements be positioned relative to non-ancestor elements using CSS anchor definitions and inset properties, avoiding fragile HTML restructuring.
fromCSS-Tricks
14 hours ago
Web development

What's !important #3: Popover Context Menus, @scope, New Web Platform Features, and More | CSS-Tricks

Web design
fromMedium
14 hours ago

Generate Animated Effects for the Web with Claude

AI tools like Anthropic's Claude can generate high-quality web animated effects and ready-to-use prompts, streamlining creation of polished, lightweight UI animations.
fromSmashing Magazine
2 days ago

Smashing Animations Part 8: Theming Animations Using CSS Relative Colour - Smashing Magazine

I've recently refreshed the animated graphics on my website with a new theme and a group of pioneering characters, putting into practice plenty of the techniques I shared in this series. A few of my animations change appearance when someone interacts with them or at different times of day. The colours in the graphic atop my blog pages change from morning until night every day.
Web design
fromSitePoint Forums | Web Development & Design Community
5 days ago

iOS Safari bottom padding issue? (Footer overlapping content)

The site is https://spectrumoutage.org - it works perfectly on Chrome desktop and Android, but when I load it on my iPhone (Safari), the bottom footer seems to float up and cover the last 50px of the content.
Web development
Web development
fromCSS-Tricks
1 week ago

Future CSS: :drag (and Maybe ::dragged-image?) | CSS-Tricks

The :drag pseudo-class enables styling of elements during active user dragging, allowing CSS-only drag-state visuals without JavaScript class toggling.
fromeLearning
3 weeks ago

Captivate 13 Flip Card Widget - eLearning

Greetings. Can someone please tell me how to get the image on the back of the flip card to fill the card like the image on the front of the card? See attachment with identical image on front and back. I have read the help documentation but did not fine the information needed. Basically, I need the images on the front and back to be the same dimensions. Thank you.
UX design
Web frameworks
fromRaymondcamden
2 weeks ago

An Astro site for my CSS Snippets

A simple Astro site was created to organize and render frequently used CSS snippets, storing each tip as a separate Markdown file for quick reuse.
Web development
fromFrontendmasters
2 weeks ago

!important and CSS Custom Properties

CSS custom property declarations can be marked !important, but the !important keyword applies to the declaration, not to the stored custom property value.
#accessibility
fromCSS-Tricks
2 weeks ago
Web design

What's !important #2: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More | CSS-Tricks

fromCSS-Tricks
2 weeks ago
Web design

What's !important #2: Conditional View Transitions, CSS/SVG Text Effects, the Best of CSS Bluesky, and More | CSS-Tricks

#container-queries
Web development
fromCSS-Tricks
3 weeks ago

text-decoration-inset is Like Padding for Text Decorations | CSS-Tricks

text-decoration-inset clips text decoration ends using independent left/right length insets, aligning decorations to glyphs and enabling transitions, animations, and precise styling.
#web-development
#svg
Web development
fromCSS-Tricks
1 month ago

What's !important #1: Advent Calendars, CSS Wrapped, Web Platform Updates, and More | CSS-Tricks

A biweekly roundup highlights recent CSS, HTML, and browser feature updates, practical CSS techniques, and useful links for web developers.
#typography
fromCSS-Tricks
1 month ago

Responsive List of Avatars Using Modern CSS (Part 1) | CSS-Tricks

You are for sure wondering what the novelty we are bringing here is, right? It has been done countless times. You are right. The main idea is not complex, but the new thing is the responsive part. We will see how to dynamically adjust the overlap between the images so they can fit inside their container. And we will make some cool animations for it along the way!
UX design
fromPiccalilli
1 month ago

A pragmatic guide to modern CSS colours - part two

In my previous article on colours, I dove into the practical side of the new colour features for developers who primarily copy and paste values from a design file into their editor. With all the new colour features that we have in CSS now, we can do more with colours in the browser than designers can do in their design apps, and it opens up a whole world of possibilities.
Web development
#html
#glassmorphism
Web development
fromCSS-Tricks
1 month ago

CSS Wrapped 2025 | CSS-Tricks

Chrome introduced numerous CSS features in 2025 enabling more customizable components, next-generation interactions, and improved ergonomics for web development.
Typography
fromCSS-Tricks
1 month ago

Fit width text in 1 line of CSS | CSS-Tricks

CSS adds text-grow and text-shrink to scale text per-line or consistently using scale, scale-inline, font-size, or letter-spacing, with accessibility and behavior questions outstanding.
Web development
fromSmashing Magazine
1 month ago

State, Logic, And Native Power: CSS Wrapped 2025 - Smashing Magazine

CSS is evolving into a native application platform that handles logic, state, and interactions, reducing JavaScript reliance and enabling ergonomic, robust UI architecture.
fromTheregister
1 month ago

Novel clickjacking attack relies on CSS and SVG

Security researcher Lyra Rebane has devised a novel clickjacking attack that relies on Scalable Vector Graphics (SVG) and Cascading Style Sheets (CSS). Rebane demonstrated the technique at BSides Tallinn in October and has now published a summary of her approach. The attack, which has yet to be fully mitigated, relies on the fact that SVG filters can leak information across origins, in violation of the web's same-origin policy.
Information security
Web development
fromCSS-Tricks
1 month ago

Scrollytelling on Steroids With Scroll-State Queries | CSS-Tricks

Scroll-driven storytelling leverages ancient scroll practices to create immersive narratives while modern CSS-based scroll-driven animations enable smoother, more accessible interactive design.
Web development
fromTreehouse Blog
1 month ago

Front-End Web Development: Build and Design Interactive Websites

Front-end development enables creation of visual, interactive websites using HTML, CSS, and JavaScript and offers an accessible path for beginners.
#corner-shape
#javascript
fromwww.jqueryscript.net
1 month ago
Web development

Weekly Web Design & Development News: Collective #632

Weekly roundup of web development and design resources: JS/CSS libraries, code snippets, UI components, AI tools, design freebies, and major news like Gemini 3 Pro.
from2ality
4 months ago
Web development

Learning web development: Plain objects in JavaScript

Plain JavaScript objects group related named data into properties for reading and writing; classList.toggle toggles a CSS class to show or hide DOM content.
#animations
Web development
fromCSS-Tricks
1 month ago

Should We Even Have :closed? | CSS-Tricks

A :closed pseudo-class is not strictly necessary because details:not(:open) already targets closed state, though naming and top-layer semantics motivate further spec consideration.
fromSitePoint Forums | Web Development & Design Community
1 month ago

Custom CSS code to change Tooltip B/G

Can someone pls share a custom css code to change the tooltip B/G color from blue to orange (#ff6e3d) ? The tooltip is found on the listing card module on 2 pages namely: (1) Home Page & (2) Listing page. Home Page > Card Module > Tooltip screenshot Home page link Listing page > Card Module > Tooltip screenshot Listing page link There are 3x tooltips on the card module ie Detail Video, Gallery & Preview. The custom code code should apply to the 3x tooltip on the 2x pages. Thanks in Advance.
Web development
#trigonometric-functions
Web development
fromLogRocket Blog
2 months ago

When to use CSS text-wrap: balance vs. text-wrap: pretty - LogRocket Blog

text-wrap controls how inline text wraps in CSS, offering values like wrap, nowrap, and balance to manage overflow and improve typographic balance.
Web development
fromFrontendmasters
2 months ago

Super Simple Full-Bleed & Breakout Styles

Modern CSS offers multiple valid approaches for full-bleed and breakout elements; choose between vw-offset techniques or grid-based column spanning based on layout needs and scrollbar behavior.
Web development
fromCSS-Tricks
2 months ago

The "Most Hated" CSS Feature: tan() | CSS-Tricks

tan() computes tangent (opposite divided by adjacent) enabling calculation of triangle dimensions for CSS layouts, such as arranging elements into polygonal slices.
Web development
fromFrontendmasters
2 months ago

Perfectly Pointed Tooltips: A Foundation

The CSS Anchor Positioning API can place tooltips responsively without JavaScript, preventing overflow and edge cutoffs while reducing weight and performance costs.
fromTechzine Global
2 months ago

CSS finally gets support for if() function

After years of developer frustration and questions on online forums, it's finally happening: CSS is getting an if() function to apply styling when a condition is met. For the first time, developers can make logical decisions directly in stylesheets, without separate code blocks. This opens up whole new possibilities for web designers. CSS is a mature styling language that determines how web pages look.
Web development
fromCSS-Tricks
3 months ago

We Completely Missed width/height: stretch | CSS-Tricks

What does stretch do? The quick answer is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space. In short, if you've ever wanted 100% to actually mean 100% (when using padding), stretch is what you're looking for: div { padding: 3rem 50vw 3rem 1rem; width: 100%; /* 100% + 50vw + 1rem, causing overflow */ width: stretch; /* 100% including padding, no overflow */ }
Web development
UX design
fromFrontendmasters
3 months ago

Modern CSS Round-Out Tabs

Use CSS shape() with clip-path to carve rounded, flared tab shapes out of an element without extra DOM elements, enabling variable and flexible coordinates.
Web development
from2ality
3 months ago

Web development for beginners: Styling HTML via CSS

CSS (Cascading Style Sheets) defines the presentation of HTML by applying cascading style rules to control backgrounds, fonts, spacing, borders, and layout.
Web development
fromPiccalilli
3 months ago

A pragmatic guide to modern CSS colours - part one

Modern CSS color syntax uses space-separated functions and unified alpha channels, letting developers omit rgba() and commas, with only IE lacking support.
fromLogRocket Blog
3 months ago

Would You Use If() functions in CSS? - LogRocket Blog

The CSS if() function introduces real conditional logic to CSS. It allows you to write conditions inline instead of relying on media queries or workarounds : Works with style() , media() , and supports() queries for theming, responsive tweaks, and state-based styling Fits property-level decisions, while media and container queries still handle broader layout changes Supports nested logic and pairs well with calc() for advanced patterns Currently supported only in Chromium browsers, so use progressive enhancement and @supports checks
Web development
Web development
fromCSS-Tricks
3 months ago

Getting Creative With shape-outside | CSS-Tricks

Using CSS shape-outside lets text flow around an image's contours, breaking rigid boxes and adding movement, personality, and engagement to long-form layouts.
fromFrontendmasters
3 months ago

How much do you really know about media queries?

Earlier this year, I realized that I knew very little about possibly most of the media queries. Maybe that's not surprising - since I never hear about them. Beyond the classics like @media(min-width: 400px) and the user-preference media queries such as @media (prefers-reduced-motion: reduce), and maaaybe orientation, I can't say that I was using media queries a whole lot. Especially since flexbox, grid layout, and calc() became fairly normalized, in addition to newer sizing values such as min-content, max-content, fit-content, and more recently, stretch.
Web development
Web development
fromUtilitybend
3 months ago

Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index | utilitybend

sibling-index() and sibling-count() enable selecting elements by position among siblings, simplifying staggered animations and conditional CSS logic.
Typography
fromTerence Eden's Blog
3 months ago

Targetting specific characters with CSS rules

CSS can target specific Unicode characters by loading different fonts with @font-face and unicode-range, enabling per-character styling without extra markup.
Web development
fromWebKit
3 months ago

Position-area: Clear and explicit or short and sweet?

A proposed center-span-inline-end CSS keyword would explicitly specify the start and end when spanning columns, increasing clarity at the cost of slight verbosity.
Web development
fromCSS-Tricks
3 months ago

Touring New CSS Features in Safari 26 | CSS-Tricks

Safari 26.0 is a major release adding 75 new features, 3 deprecations, and 171 improvements, including significant new CSS capabilities like anchor positioning.
fromJoshwcomeau
3 months ago

The Big Gotcha With @starting-style * Josh W. Comeau

Introduction Have you heard of the @starting-style at-rule? It's an interesting new tool that lets us use CSS transitions for enter animations. For example, let's suppose we have some UI where elements get added dynamically to the page, and we want them to fade in: When you click the "Add Element" button, a new purple square is generated and added to the page, and a CSS keyframe animation fades it in over 1 second.
Web development
fromCSS-Tricks
3 months ago

CSS Typed Arithmetic | CSS-Tricks

CSS typed arithmetic is genuinely exciting! It opens the door to new kinds of layout composition and animation logic we could only hack before. The first time I published something that leaned on typed arithmetic was in this animation: But before we dive into what is happening in there, let's pause and get clear on what typed arithmetic actually is and why it matters for CSS. Browser Support: The CSS feature discussed in this article,
UX design
fromSmashing Magazine
3 months ago

Ambient Animations In Web Design: Principles And Implementation (Part 1) - Smashing Magazine

Creating motion can be tricky. Too much and it's distracting. Too little and a design feels flat. Ambient animations are the middle ground - subtle, slow-moving details that add atmosphere without stealing the show. Unlike timeline-based animations, which tell stories across a sequence of events, or interaction animations that are triggered when someone touches something, ambient animations are the kind of passive movements you might not notice at first. But, they make a design look alive in subtle ways.
Web design
Web development
fromFrontendmasters
4 months ago

Breakpoint Columns, Five Ways. Which Do You Like?

Four CSS approaches for switching a three-column grid to one column under 500px: top-level media query, nested media query, CSS variable, and custom function.
Web design
fromSarasoueidan
3 months ago

CSS to speech: alternative text for CSS-generated content

CSS ::before and ::after pseudo-elements insert presentational content that can contribute textual content to an element's accessible name but are not exposed in accessibility tree.
UX design
fromPiccalilli
4 months ago

While you're fixing the fun stuff, fix the important stuff too

Avoid hover jitter by ensuring hover state persists when pointer moves among element children, using parent-level targets, extra padding, or non-hacky layout adjustments.
fromCSS-Tricks
4 months ago

Compiling Multiple CSS Files into One | CSS-Tricks

What I like about Stu's stab at this is that it's an ongoing journey rather than a wholesale switch. In fact, he's out with a new post that pokes specifically at compiling multiple CSS files into a single file. Splitting and organizing styles into separate files is definitely the reason I continue to Sass-ify my work. I love being able to find exactly what I need in a specific file and updating it without having to dig through a monolith of style rules.
Web development
fromCSS-Tricks
4 months ago

What're Your Top 4 CSS Properties? | CSS-Tricks

Seems like a pretty straightforward thing to answer, right? But like Donnie says, this takes some strategy. Like, say spacing is high on your priority list. Are you going to use margin? padding? Perhaps you're leaning into layout and go with gap as part of a flexbox direction... but then you're committing to display as one of your options. That can quickly eat up your choices!
Web design
Web design
fromkube.io
3 months ago

Liquid Glass in the Browser: Refraction with CSS and SVG - kube.io

Recreate a Liquid Glass UI effect on the web by approximating optical refraction and specular highlights using CSS, SVG displacement maps, and simplified physics.
Web design
fromCSS-Tricks
4 months ago

What You Need to Know About CSS Color Interpolation | CSS-Tricks

Color interpolation computes intermediate colors between two points to create palettes, gradients, transitions, and mix colors across color spaces using functions like color-mix().
Apple
fromWebKit
4 months ago

Release Notes for Safari Technology Preview 227

Safari Technology Preview Release 227 adds accessibility improvements, animation persistence and bug fixes, and multiple new CSS features for macOS Tahoe and Sequoia.
fromCSS-Tricks
4 months ago

Should the CSS light-dark() Function Support More Than Light and Dark Values? | CSS-Tricks

If you don't know, the light-dark() function takes two color arguments: one for light mode and one for dark mode. Hence, the name light-dark(). It toggles between the two light and dark values based on a user's preferences. Sara Joy has a wonderful article where you can get a much more detailed explanation. The key thing is that the function requires you to use the color-scheme property to activate those two color modes: :root { color-scheme: light dark; } .element { color: light-dark(brown, black); }
Web development
Web development
fromCSS-Tricks
4 months ago

CSS Elevator: A Pure CSS State Machine With Floor Navigation | CSS-Tricks

A pure-CSS elevator state machine uses @property-typed custom properties, counters, and pseudo-classes to animate floors, directions, and timing without JavaScript.
fromjQuery Script
4 months ago

jQuery Retro Flip Clock & Countdown Timer Plugin - FlipClock

Flip Clock is a jQuery plugin for creating a clock & countdown timer that displays information in a digital format on a split flap display. The clock & countdown timer can be fully customized via CSS and full-featured developer API. How to use it: 1. Include required FlipClock CSS in the head section of your page. <link rel="stylesheet" href="/path/to/compiled/flipclock.css" /> 2. Create a container for the clock. <div class="clock"></div> 3. Include jQuery library and the jQuery FlipClock plugin at the bottom of the page. <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/compiled/flipclock.min.js"></script>
JavaScript
fromFrontendmasters
4 months ago

Obsessing Over Smooth radial-gradient() Disc Edges

If you want to avoid using a pseudo-element or, even worse, children just for decorative purposes, then radial-gradient() seems to be the best solution. Especially in the case where you might need a bunch of such discs, more than the two pseudos available on an element. However, if we do something like this: Where r is the gradient disc radius, then we get jaggies, a step-like effect along the radial-gradient() disc, whereas one created with a pseudo-element has smooth-looking edges!
Web design
Web design
fromMeyerweb
4 months ago

To Infinity... But Not Beyond!

Using calc(infinity * length) on text properties causes extreme layout effects and reveals inconsistent computed-value handling across browsers, with Chrome most unpredictable.
Web design
fromCSS-Tricks
4 months ago

3D Layered Text: The Basics | CSS-Tricks

A bulging text effect can be created using advanced CSS techniques along with JavaScript for interactivity.
fromPiccalilli
5 months ago

Another article about centering in CSS

Centering in CSS is no longer an impossible task. Multiple methods such as flexbox and grid make it easy to achieve both vertical and horizontal centering.
Web design
fromCSS-Tricks
5 months ago

How to Prepare for CSS-Specific Interview Questions | CSS-Tricks

Responsive design is one of the fundamentals you'll be asked about. Building a responsive website means your layout, images, and typography adapt gracefully to any device or screen size.
Web development
fromCSS-Tricks
5 months ago

How to Discover a CSS Trick | CSS-Tricks

CSS tricks feel like discovering secret synergies between features, akin to chiseling a sculpture from marble or uncovering fossils, where unexpected pairings achieve the impossible.
Web development
Typography
fromOddBird
5 months ago

Designing for User Font-size and Zoom

User font-size preferences can enhance web readability, but defaults and variations create challenges in achieving a universally ideal experience.
fromSearch Engine Roundtable
5 months ago

Google On SEO & CSS

Google's guidelines recommend making CSS files crawlable. While CSS has implications for SEO, crawlers typically parse HTML for text content and ignore class names.
Web development
[ Load more ]