Trucos CSS

Trucos CSS

Tips y técnicas rápidas de CSS

Pequeños trucos de CSS para resolver detalles de interfaz: layouts, efectos sutiles, animaciones simples y microinteracciones. Son ejemplos pensados para entender rápido el patrón, adaptarlo a tu diseño y mantener el code visual limpio y consistente.

Fluid Sizing with clamp()

Smooth responsive sizes without media queries. One line of CSS that scales between min and max values.

#css #responsive #typography

Browser support: Chrome 79+, Firefox 75+, Safari 13.1+

Animate Height with Grid

Finally animate to auto height! Use grid-template-rows from 0fr to 1fr for smooth accordion animations.

#css #animation #grid

Browser support: Chrome 107+, Firefox 110+, Safari 16.4+

Motion Path Animation

Animate elements along custom curves and SVG paths without JavaScript.

#css #animation #svg

Browser support: Chrome 55+, Firefox 72+, Safari 15.4+

Container Queries

Components that respond to their container's size, not the viewport. Perfect for reusable UI.

#css #responsive #container-queries

Browser support: Chrome 105+, Firefox 110+, Safari 16+

Avoid Universal Selector Resets

Why * { margin: 0 } hurts performance and what to use instead.

#css #performance #reset

Browser support: Chrome 1+, Firefox 1+, Safari 1+

Circle: border-radius vs clip-path

Two ways to make circles, but only clip-path gives you a circular click area.

#css #shapes #clip-path

Browser support: Chrome 55+, Firefox 54+, Safari 9.1+

Light Sweep with Conic Gradient

Create a rotating light beam effect using conic gradients and CSS animation.

#css #animation #gradients

Browser support: Chrome 85+, Firefox 91+, Safari 15.4+

Alt Text for CSS Content

Add accessible descriptions to images injected via CSS content property.

#css #accessibility #a11y

Browser support: Chrome 77+, Firefox 104+, Safari 17.4+

CSS corner-shape

Squircle, bevel, scoop, and notch corners without SVG or masks.

#css #shapes #experimental

Browser support: Chrome 128+

CSS Multi-Column Layout

Newspaper-style text columns that adapt without media queries.

#css #columns #layout

Browser support: Chrome 50+, Firefox 52+, Safari 10.1+

Step Counters with CSS

Display 'Step X of Y' automatically using CSS counters and :has().

#css #counters #has-selector

Browser support: Chrome 105+, Firefox 121+, Safari 15.4+

CSS Masks

Control opacity with gradients and shapes for ink fades and soft transitions.

#css #masks #effects

Browser support: Chrome 120+, Firefox 115+, Safari 15.4+

Pure CSS Tooltips

Lightweight tooltips using data attributes and pseudo-elements.

#css #tooltips #attr

Browser support: Chrome 4+, Firefox 2+, Safari 3.1+

Dynamic Form Labels with :has()

Auto-add asterisks to required fields and '(optional)' to optional ones.

#css #forms #has-selector

Browser support: Chrome 105+, Firefox 121+, Safari 15.4+

Zigzag Layout with Flexbox

Alternate card layouts without changing HTML using nth-child and flex-direction.

#css #flexbox #layout

Browser support: Chrome 29+, Firefox 28+, Safari 9+

Gradient Text

Colorful gradient headlines with pure CSS - no images required.

#css #gradients #typography

Browser support: Chrome 4+, Firefox 49+, Safari 5+

Multi-Line Truncation

Limit text to specific number of lines with ellipsis using line-clamp.

#css #typography #truncation

Browser support: Chrome 6+, Firefox 68+, Safari 5+

Background Removal with Blend Modes

Remove white or black backgrounds from images using mix-blend-mode.

#css #blend-modes #images

Browser support: Chrome 41+, Firefox 32+, Safari 8+

Safe Area Insets

Adapt layouts for device notches and gesture bars using env().

#css #mobile #responsive

Browser support: Chrome 69+, Firefox 65+, Safari 11.1+

Tailwind Child Selectors

Style all child elements from the parent using [&_selector] syntax.

#tailwind #css #selectors

Browser support: Chrome 1+, Firefox 1+, Safari 1+

Mirror Reflection Effect

Create glass-surface reflections using -webkit-box-reflect.

#css #effects #reflection

Browser support: Chrome 4+, Safari 4+, Edge 79+