CSS Tips by Theo Soti for Web and Frontend Developers

Compare the practical CSS techniques for animating dynamic height, including Grid, interpolate-size, and calc-size(), without guessing max-height.

Control how images and videos fill a fixed media box with the five object-fit values: fill, contain, cover, none, and scale-down.

Use the CSS hover media feature to avoid mouse-only interactions on touchscreens and provide appropriate behavior for each input type.

Create a CSS-only dark mode with a checkbox and :has(), follow the system preference, or let light-dark() select theme-aware colors.

Use offset-path, offset-distance, and offset-rotate to move an element along a curve or custom SVG path without animating left and top.

Combine font style, variant, weight, size, line height, and family in one font declaration, while avoiding the shorthand reset trap.

Define reusable custom CSS functions for calculations, colors, and fluid values without repeating the same expressions across a stylesheet.

Use the native details and summary elements for keyboard-friendly accordions, then add a smooth CSS Grid animation without replacing their semantics.

Use the slash syntax of the CSS content property to provide replacement text for generated images while keeping meaningful content in HTML.

Use the CSS if() function to choose property values from style, media, and support queries without writing JavaScript state glue.

A modern CSS guide to Anchor Positioning for popovers, tooltips, and dropdowns without getBoundingClientRect, scroll listeners, or layout JavaScript.

Use HTML command and commandfor to control dialogs and popovers declaratively, with less JavaScript and native browser behavior.

Layer two linear gradients, tilt with a 3D perspective transform, fade with a mask, and animate the background position.

Use @starting-style for modern CSS entry transitions on dialogs, popovers, drawers, and display:none elements without JavaScript timing hacks.

Style browser find-in-page matches with CSS ::search-text and :current.

CSS random() lets you generate values inside a range and share random base values across properties.

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

Animated gradient borders are easier with modern CSS: conic gradients, pseudo-elements, and @property replace JavaScript-heavy tricks.

Use CSS scroll-state queries to shrink a sticky header only after it becomes stuck.

Use CSS scroll-state queries to style a sticky element only when it is actually stuck to the top.

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.

Use the native reset button to restore inputs, selects, checkboxes, and validation state without JavaScript.

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

Use CSS scroll state queries to style elements based on scroll position.

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

CSS relative colors turn one base color into hover states, borders, shadows, and accents, a practical modern CSS pattern for UI systems.

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

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

Learn how CSS sibling-index() lets elements position themselves based on sibling order.

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

Better box shadows start with light direction, layering, and color.

Learn how to combine entry animations and scroll-driven motion using modern CSS.

A behind the scenes look at how I designed my ebook cover, from AI drafts and Photopea mockups to a clean, minimal design style.

Create responsive Masonry layouts using the CSS column-width property.

Use CSS container queries to make components respond to their parent’s size, not the viewport.

Customize scrollbars to match your UI using scrollbar-color and scrollbar-width.

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

Build column layouts with the CSS columns property.

Enhance your UI with the CSS backdrop-filter property.

Serve sharp, responsive backgrounds with CSS image-set().

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

Learn how to animate text with a moving background using only CSS.

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

Learn how CSS @property upgrades custom variables with validation, debugging, and animation support.

CSS nesting is now natively supported with 91% browser coverage.

Learn how to build interactive layouts using CSS :has() and :checked.

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.

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

Discover how to customize each list bullet in CSS using @counter-style and list-style-type.

Learn how to create a smooth light sweep effect on cards using only CSS gradients and keyframes.