CSS Short Articles by Theo Soti

You can now style browser find-in-page matches in CSS.

Tue, 28 Apr 2026 00:00:00 GMT

Style browser find-in-page matches with CSS ::search-text and :current. Support is limited, so treat it as progressive enhancement.

You can now create true randomness in CSS.

Sun, 26 Apr 2026 00:00:00 GMT

CSS random() lets you generate values inside a range and share random base values across properties. Powerful idea, but support is still limited.

HTML in Canvas API Explained: Render HTML Inside Canvas

Sat, 18 Apr 2026 00:00:00 GMT

Explore the experimental HTML in Canvas API, which renders real HTML inside canvas while preserving DOM interaction and accessibility.

Shrink a sticky header only when it sticks. In CSS.

Mon, 16 Mar 2026 00:00:00 GMT

Use CSS scroll-state queries to shrink a sticky header only after it becomes stuck. A cleaner way to build adaptive headers without scroll listeners.

You can now detect when sticky is actually stuck. In CSS.

Sun, 15 Mar 2026 00:00:00 GMT

Use CSS scroll-state queries to style a sticky element only when it is actually stuck to the top. No scroll listener, no class toggle, no JavaScript.

Your slider can now know the active card. In CSS.

Sat, 14 Mar 2026 00:00:00 GMT

Use CSS scroll-state queries to detect the snapped slide in a carousel and style the active card without Intersection Observer, scroll listeners, or JavaScript.

Reset Form Inputs Natively with button type="reset"

Sat, 07 Mar 2026 00:00:00 GMT

Use the native reset button to restore inputs, selects, checkboxes, and validation state without JavaScript. A simple HTML feature that is still easy to forget.

Fix z-index leaks with CSS isolation: isolate

Tue, 03 Mar 2026 00:00:00 GMT

Use isolation: isolate to create a new stacking context and keep pseudo-elements, blend effects, and negative z-index layers inside their component.

React to Scroll with CSS Scroll State Queries

Wed, 11 Feb 2026 00:00:00 GMT

Use CSS scroll state queries to style elements based on scroll position. Detect top, bottom, or scrolling states without JavaScript or scroll listeners.

Align Numbers Perfectly with CSS tabular-nums

Mon, 26 Jan 2026 00:00:00 GMT

Use CSS tabular-nums to align numbers in tables, dashboards, prices, and stats for cleaner, more readable interfaces and layouts.

Create a Mirror Reflection Effect with CSS box-reflect

Tue, 20 Jan 2026 00:00:00 GMT

Create a mirror reflection effect in CSS with -webkit-box-reflect and add glossy image reflections with a single property and graceful fallback.

CSS corner-shape: Shape Corners Beyond border-radius

Mon, 19 Jan 2026 00:00:00 GMT

Learn the CSS corner-shape property to create scoop, bevel, squircle, and custom corners beyond border-radius with progressive enhancement.

Position Elements with CSS sibling-index()

Tue, 13 Jan 2026 00:00:00 GMT

Learn how CSS sibling-index() lets elements position themselves based on sibling order. Use pure CSS math for layouts without JavaScript or nth-child selectors.

When Relative Units Behave Differently: EM vs REM in CSS

Sat, 10 Jan 2026 00:00:00 GMT

Learn the difference between CSS em and rem units, when to use each one, and how they affect scalable typography, spacing, and layouts.

Scroll-Driven Animations in CSS with @starting-style

Sat, 20 Dec 2025 00:00:00 GMT

Learn how to combine entry animations and scroll-driven motion using modern CSS. Use @starting-style, custom properties, and scroll timelines.

Build a Masonry Layout with Pure CSS column-width

Sat, 04 Oct 2025 00:00:00 GMT

Create responsive Masonry layouts using the CSS column-width property. Fit flexible columns automatically, no JavaScript or grid hacks—just clean, native CSS.

Responsive Components with CSS Container Queries

Sat, 20 Sep 2025 00:00:00 GMT

Use CSS container queries to make components respond to their parent’s size, not the viewport. Create adaptive layouts and icons with clean, modern CSS.

Style Scrollbars with CSS scrollbar-color & scrollbar-width

Wed, 17 Sep 2025 00:00:00 GMT

Customize scrollbars to match your UI using scrollbar-color and scrollbar-width. Control colors, size, and accessibility. All with just two CSS properties.

CSS image-rendering: pixelated. Scale Pixel Art Without Blur

Mon, 15 Sep 2025 00:00:00 GMT

Preserve sharp edges when scaling pixel art, icons, retro screenshots, or QR codes using one line of CSS supported by modern browsers.

Create Multi-Column Layouts with CSS Columns

Sat, 30 Aug 2025 00:00:00 GMT

Build column layouts with the CSS columns property. Add spacing, separators, and spanning elements in just two lines of code.

CSS backdrop-filter: Frosted Glass Effect Made Easy

Fri, 29 Aug 2025 00:00:00 GMT

Enhance your UI with the CSS backdrop-filter property. Apply blur, brightness, or contrast for sleek frosted-glass effects.

Crisp Background Images with CSS image-set()

Thu, 28 Aug 2025 00:00:00 GMT

Serve sharp, responsive backgrounds with CSS image-set(). Let browsers choose the right asset for retina or standard screens efficiently.

Pure CSS Typing Animation Effect without JavaScript

Wed, 27 Aug 2025 00:00:00 GMT

Create a smooth typing text animation using pure CSS with keyframes, steps(), overflow, and a blinking caret. No JavaScript required.

CSS Moving Background Text Effect without JavaScript

Tue, 19 Aug 2025 00:00:00 GMT

Learn how to animate text with a moving background using only CSS. A lightweight effect with background-clip, keyframes, and zero JavaScript.

CSS clamp(): Responsive Design Without Media Queries

Mon, 18 Aug 2025 00:00:00 GMT

Learn how CSS clamp() creates fluid, responsive layouts by defining min, preferred, and max values—reducing media queries with 95% browser support.

CSS @property: Animate and Validate Custom Variables

Sun, 17 Aug 2025 00:00:00 GMT

Learn how CSS @property upgrades custom variables with validation, debugging, and animation support. A must-have feature for cleaner, more powerful CSS.

Native CSS Nesting vs Preprocessors, no more excuses

Sat, 16 Aug 2025 00:00:00 GMT

CSS nesting is now natively supported with 91% browser coverage. Learn why you may not need Sass preprocessors anymore and how to switch smoothly.

Dynamic Layouts with CSS :has() without JavaScript

Fri, 15 Aug 2025 00:00:00 GMT

Learn how to build interactive layouts using CSS :has() and :checked. Create dynamic grids, galleries, and dashboards without JavaScript.

CSS @scope: Encapsulated Styles Without CSS-in-JS

Thu, 14 Aug 2025 00:00:00 GMT

Discover how CSS @scope lets you limit style leakage, write cleaner HTML, and gain true encapsulation—no BEM, utility classes, or CSS-in-JS needed.

HTML inert: Disable Interactions and Improve Accessibility

Wed, 13 Aug 2025 00:00:00 GMT

Learn how the HTML inert attribute blocks interactions, hides content from screen readers, and improves accessibility for modals and pop-ups.

Custom List Bullets in CSS with @counter-style

Tue, 12 Aug 2025 00:00:00 GMT

Discover how to customize each list bullet in CSS using @counter-style and list-style-type. Unique symbols, emojis, or characters in just a few lines.

CSS Light Sweep Animation for Cards without JavaScript

Mon, 11 Aug 2025 00:00:00 GMT

Learn how to create a smooth light sweep effect on cards using only CSS gradients and keyframes. Simple, reusable, and no JavaScript required.

CSS Safe Area Insets: Protect Content from Phone Notches

Sun, 10 Aug 2025 00:00:00 GMT

Learn how CSS safe area insets keep your UI visible on phones with notches, rounded corners, and gesture bars, with broad browser support.

New CSS Media Query Syntax: Easier, Cleaner, Faster

Tue, 05 Aug 2025 00:00:00 GMT

CSS media queries now support range operators like ≤ and ≥. Write cleaner, more readable responsive rules with 90% browser support.

Create a Back to Top Button with Just HTML and CSS

Tue, 22 Jul 2025 00:00:00 GMT

Create a back to top button with HTML and CSS using native smooth scrolling. No JavaScript, lightweight, and accessible.

Style Native elements, no JS or libraries needed.

Truncate Multiline Text with Ellipsis Using Pure CSS

Fri, 18 Jul 2025 00:00:00 GMT

Limit text to multiple lines with ellipsis using pure CSS. Perfect for cards, previews, and tight layouts.

Crop and Zoom Images with CSS object-view-box

Wed, 16 Jul 2025 00:00:00 GMT

Use object-view-box in CSS to crop and zoom images precisely—no image editing, just clean, flexible layout control.

Wrap Text Around Images with CSS shape-outside

Mon, 14 Jul 2025 00:00:00 GMT

Use shape-outside in CSS to wrap text around custom image shapes—no JavaScript, just clean, creative layout control.

Build an Autoplay Carousel with Pure CSS

Sat, 12 Jul 2025 00:00:00 GMT

Create a smooth, accessible autoplay carousel using only CSS—no JavaScript, no libraries, and zero layout shifts.

Create Accessible Popups with the Native HTML Popover API

Thu, 10 Jul 2025 00:00:00 GMT

Build tooltips, modals, and popups using the HTML Popover API—no JavaScript needed, fully accessible, and widely supported.

Style Native Form Elements with accent-color in CSS

Tue, 08 Jul 2025 00:00:00 GMT

Easily customize checkboxes, radios, sliders, and more using accent-color—no wrappers, no JavaScript, fully accessible.

Unlock All 4 CSS Focus States and 1 Hidden Gem

Mon, 07 Jul 2025 00:00:00 GMT

Learn the 4 focus states in CSS. :focus, :focus-visible, :focus-within, and a hidden gem—for better accessibility and smoother UX.

Simplify CSS Animations with Individual Transform Properties

Sun, 06 Jul 2025 00:00:00 GMT

Use translate, rotate, and scale as separate CSS properties for cleaner, modular, and easier-to-maintain animations.

Build Smarter Layouts with CSS Container Queries

Sat, 05 Jul 2025 00:00:00 GMT

Make components truly responsive with CSS container queries. Style elements based on parent size, not screen width.

Add Smooth Page Transitions with CSS @view-transition

Fri, 04 Jul 2025 00:00:00 GMT

Use @view-transition to create crossfade effects between pages—no JavaScript, just clean, progressive CSS.

Smooth Scrolling with CSS scroll-behavior

Thu, 03 Jul 2025 00:00:00 GMT

Enhance anchor navigation with smooth scrolling and better section spacing using pure CSS—no JavaScript required.

Create Animated Gradient Borders with Pure CSS

Wed, 02 Jul 2025 00:00:00 GMT

Build clean, animated gradient borders using only CSS—no extra elements, fully responsive, and JavaScript-free.

Style Drop Caps in CSS with :first-letter and initial-letter

Tue, 01 Jul 2025 00:00:00 GMT

Add editorial flair to paragraphs using :first-letter and initial-letter in CSS—no extra markup, just clean, elegant styling.

Smarter Layouts with CSS calc-size() without JS

Wed, 25 Jun 2025 00:00:00 GMT

Use the new calc-size() CSS function to size elements dynamically from layout and attribute values—no JS, just responsive, flexible UI.

Create Animated Text Gradients with Pure CSS

Fri, 20 Jun 2025 00:00:00 GMT

Use background-clip: text and keyframes to animate gradients on text—no JavaScript needed, fully CSS-powered, and smooth across modern browsers.

Trim text spacing with text-box-trim and text-box-edge

Thu, 19 Jun 2025 00:00:00 GMT

Use text-box-trim and text-box-edge to remove excess space around text for cleaner UI layouts—perfect for buttons, labels, and tight spacing.

Enhance Form UX with the Native Element

Wed, 18 Jun 2025 00:00:00 GMT

Improve form usability using for autocomplete suggestions—lightweight, accessible, flexible, and fully supported in modern browsers.

Unlock the Power of the Native Element in HTML

Tue, 17 Jun 2025 00:00:00 GMT

Use the HTML

Make Form Fields Auto-Resize with field-sizing: content

Mon, 16 Jun 2025 00:00:00 GMT

Let inputs and textareas resize to fit content automatically using field-sizing: content—no JavaScript needed, with growing browser support.

Modern CSS Color Functions You Should Be Using

Sun, 15 Jun 2025 00:00:00 GMT

Unlock the full power of modern CSS with color functions like oklab(), color-mix(), and color-contrast() for vibrant, accessible, future-ready designs.

End CSS Specificity Battles with Native CSS Layers

Fri, 13 Jun 2025 00:00:00 GMT

Control style priority and prevent overrides using CSS Layers—an organized, scalable way to manage specificity in modern stylesheets.

Align the Last Line of Text with This Little-Known CSS Trick

Sat, 31 May 2025 00:00:00 GMT

Use text-align-last to style only the final line of a paragraph—combine it with justified text for elegant layouts, supported by 95% of browsers.

Write Cleaner CSS with 4 Essential Flexbox Shorthands

Wed, 28 May 2025 00:00:00 GMT

Simplify your Flexbox code with 4 powerful CSS shorthands. Cleaner, shorter, and perfect for reusable components and utility classes.

4 Reusable CSS Snippets for Faster, Cleaner Code

Tue, 27 May 2025 00:00:00 GMT

Discover 4 practical CSS snippets: circle shapes, text truncation, centering, and responsive grids. Reusable, efficient, and no JavaScript needed.

CSS-Only Countdown From 10 to 0 Without JavaScript

Mon, 26 May 2025 00:00:00 GMT

Create a pure CSS countdown from 10 to 0 using custom properties, keyframes, and pseudo-elements—no JavaScript required, with over 92% browser support.

Clean Up Your CSS with :is() and :where() Selectors

Sat, 24 May 2025 00:00:00 GMT

Simplify complex CSS selectors with :is() and :where() for cleaner styles and easier specificity management with broad browser support.

Level Up Text Styling with Advanced CSS Underlines

Thu, 22 May 2025 00:00:00 GMT

Go beyond basic underlines with powerful CSS text-decoration properties like thickness, color, style, and offset. Fully supported and highly customizable.

Build a CSS Counter Without JavaScript

Tue, 20 May 2025 00:00:00 GMT

Learn how to create a live counter using only CSS with properties like counter-reset, counter-increment, and content: counter(). No JS needed!

Write Cleaner CSS with Modern Properties

Sun, 18 May 2025 00:00:00 GMT

Discover 5 powerful CSS features that simplify your code, like inset, scale, :is(), and more. Writing less CSS has never been easier.

Animate in CSS without @keyframes using @starting-style

Fri, 16 May 2025 00:00:00 GMT

Discover how @starting-style enables keyframe-free CSS animations—even on DOM entry. Cleaner syntax, less JS, and smoother UI transitions.

Simplify layouts with CSS display: contents

Sun, 30 Mar 2025 00:00:00 GMT

Use display: contents to restructure layouts without extra markup. Works with Flexbox & Grid for cleaner, more flexible designs.

Create an inverted hover effect with CSS :has()

Fri, 28 Mar 2025 00:00:00 GMT

Achieve a smooth inverted hover effect using CSS :has()—no JavaScript, no hacks! Style parent elements dynamically with clean, native CSS.

Improve text readability with CSS text-wrap

Wed, 26 Mar 2025 00:00:00 GMT

Say goodbye to awkward text wrapping! Use text-wrap: balance; for even lines and text-wrap: pretty; for better spacing.

Stylish drop caps in CSS with just two lines

Mon, 24 Mar 2025 00:00:00 GMT

Make your text stand out with a simple CSS trick! Use :first-letter and initial-letter to create elegant drop caps effortlessly.

Smooth scrolling with CSS for clean, JS-free navigation

Fri, 21 Mar 2025 00:00:00 GMT

Enhance user experience with scroll-behavior: smooth in CSS—no JavaScript needed! Learn how to fix abrupt jumps and improve readability with scroll-margin.

CSS Text Gradients: Stunning Effects in 3 Lines

Fri, 14 Mar 2025 00:00:00 GMT

Enhance your typography with CSS text gradients! No images, no extra elements—just pure CSS magic for bold, eye-catching UI design.

CSS-Powered Before/After Slider with Minimal JS

Wed, 12 Mar 2025 00:00:00 GMT

Create a before/after image slider with just 1 line of JavaScript! Learn how CSS masking and grid make it efficient, simple, and widely supported.

CSS Anchor Positioning: Simplify Dynamic UI Layouts

Mon, 10 Mar 2025 00:00:00 GMT

Learn how CSS Anchor Positioning makes UI layout easier by allowing elements to be positioned dynamically—no more complex JS or layout shifts!

Scroll-Linked CSS Progress Bar Without JavaScript

Fri, 07 Mar 2025 00:00:00 GMT

Create a scroll-synced progress bar using pure CSS and animation-timeline—no JavaScript needed. Lightweight, and performant.

Create custom form validation with CSS only

Wed, 05 Mar 2025 00:00:00 GMT

Validate forms with CSS! Use :valid and :user-invalid pseudo-classes for dynamic input styling without JavaScript. Enhance UX effortlessly.

CSS Gets Dynamic with the New attr() Function

Mon, 03 Mar 2025 00:00:00 GMT

Explore the enhanced CSS attr() function in Chrome 133—now supporting all properties and data types for more dynamic, JS-free styling possibilities.

Create a responsive grid layout with just 1 line of CSS

Fri, 28 Feb 2025 00:00:00 GMT

Responsive layouts in one line of CSS? Discover the power of flexible, media-query-free design for seamless adaptation to any screen.

Select a range of elements without classes

Mon, 24 Feb 2025 00:00:00 GMT

Target a precise range of elements with :nth-child(). Learn how to combine selectors to style specific segments of a list—no extra classes needed.

Write smarter CSS with 2 new selectors

Fri, 21 Feb 2025 00:00:00 GMT

Writing CSS selectors can be tedious, especially when repeating long lists of elements. Thankfully, :is() and :where() make things much cleaner.

New Viewport Units for Improved Mobile Design

Wed, 19 Feb 2025 00:00:00 GMT

Prevent 100vh layout shifts with new CSS viewport units (svh, lvh, dvh). Build smoother, more reliable mobile designs with dynamic toolbars.

How CSS subgrid fixes alignment issues for good

Mon, 17 Feb 2025 00:00:00 GMT

Master CSS Subgrid for perfect layout alignment! Build consistent pricing cards, blog listings, and dashboards with ease.

Great visuals with mask effects

Sat, 15 Feb 2025 00:00:00 GMT

With mask-image, you can create ink effects, smooth transitions, and elegant content reveals, without heavy graphics or extra elements.

New way of declaring media queries

Thu, 13 Feb 2025 00:00:00 GMT

CSS container queries let elements adapt to their container, not just the viewport. Making layouts more flexible and reusable.