Superficies y texturas (surfaces)

Un módulo solo CSS que da profundidad y luz a cualquier bloque. Añade una clase a una tarjeta, al panel de un diálogo, a un panel lateral, a un menú, a un aviso, a un selector o a un control del carrusel y toma la superficie; todos los efectos se gobiernan con los tokens --iv-glass-*, --iv-blur-*, --iv-glow-* y --iv-texture-*, así que los temas y las personalizaciones siguen funcionando. Los efectos animados se detienen con prefers-reduced-motion; los navegadores sin backdrop-filter reciben una superficie sólida elevada.

CSS: css/surfaces.css (en ivolt.css, después de los componentes). Sin JavaScript. Añadido en la v0.3.

Cristal

iv-glass e iv-glass--strong: fondo translúcido, desenfoque y saturación de lo que hay detrás, borde claro y brillo en el borde superior. El texto mantiene contraste AA en ambos temas; la fixture coloca los paneles sobre una malla para que el efecto se vea.

Cristal sobre una mallafixtures/surfaces/glass.htmlAbrir sola

<section class="iv-texture-mesh" id="surfaces-glass" style="padding: var(--iv-space-10); border-radius: var(--iv-radius-lg)">
  <div class="iv-grid iv-grid--auto iv-u-gap-4">
    <article class="iv-card iv-glass">
      <div class="iv-card__body">
        <span class="iv-badge iv-badge--info">Frosted</span>
        <h3 class="iv-card__title">Glass over a gradient mesh</h3>
        <p class="iv-u-m-0">Sample content, not a real product. <code>iv-glass</code> replaces the card background with the glass tokens and blurs what sits behind it. Where <code>backdrop-filter</code> is missing, the card falls back to an opaque surface.</p>
      </div>
      <div class="iv-card__footer">
        <a class="iv-button iv-button--ghost iv-button--sm" href="#surfaces-textures">Textures</a>
        <a class="iv-button iv-button--primary iv-button--sm" href="#surfaces-glow">Glow</a>
      </div>
    </article>
    <article class="iv-card iv-glass iv-glass--strong">
      <div class="iv-card__body">
        <span class="iv-badge iv-badge--primary">Strong</span>
        <h3 class="iv-card__title">More opacity, more blur</h3>
        <p class="iv-u-m-0">Sample content, not a real product. <code>iv-glass--strong</code> raises the tint and the blur radius, for panels that carry long text or form controls.</p>
      </div>
      <div class="iv-card__footer">
        <a class="iv-button iv-button--ghost iv-button--sm" href="#surfaces-textures">Textures</a>
        <a class="iv-button iv-button--primary iv-button--sm" href="#surfaces-glow">Glow</a>
      </div>
    </article>
    <article class="iv-card iv-glass iv-texture-grain">
      <div class="iv-card__body" style="position: relative">
        <span class="iv-badge">Grain</span>
        <h3 class="iv-card__title">Glass with film grain</h3>
        <p class="iv-u-m-0">Sample content, not a real product. <code>iv-texture-grain</code> adds an inline SVG noise overlay in soft light; the body carries <code>position: relative</code> so the text stays above it.</p>
      </div>
      <div class="iv-card__footer">
        <a class="iv-button iv-button--ghost iv-button--sm" href="#surfaces-textures">Textures</a>
        <a class="iv-button iv-button--primary iv-button--sm" href="#surfaces-glow">Glow</a>
      </div>
    </article>
  </div>
</section>

El cristal se gana su nombre sobre una fotografía:

Cristal sobre una fotografíafixtures/surfaces/glass-photo.htmlAbrir sola

<div style="position: relative; border-radius: var(--iv-radius-lg); overflow: clip; min-block-size: 24rem; display: grid; align-content: end; padding: clamp(1.5rem, 4vw, 2.5rem)">
  <img src="/photos/p1018.jpg" width="1280" height="800" alt="" loading="lazy" style="position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover">
  <div class="iv-grid iv-grid--auto" style="--iv-grid-min: 14rem; position: relative">
    <article class="iv-card iv-glass iv-edge-glint">
      <div class="iv-card__body"><span class="iv-badge">Glass</span><h3 class="iv-card__title">Over a photograph</h3><p>Photograph by Andrew Ridley on Unsplash. The panel blurs and tints what sits behind it; text keeps AA contrast.</p></div>
    </article>
    <article class="iv-card iv-glass--strong iv-edge-near">
      <div class="iv-card__body"><span class="iv-badge">Strong</span><h3 class="iv-card__title">More tint, more blur</h3><p>Sample copy. Where <code>backdrop-filter</code> is missing the card falls back to a solid raised surface.</p></div>
    </article>
  </div>
</div>

.iv-root {
  --iv-grid-min: 14rem;
}

Texturas

iv-texture-grain extiende una película fina de ruido sobre el bloque, nunca sobre el texto. iv-texture-mesh pinta una malla de gradiente con los colores de la marca; cámbiala con --iv-mesh-1, --iv-mesh-2 y --iv-mesh-3. iv-texture-aurora es la misma malla derivando despacio.

Grano, malla y aurorafixtures/surfaces/textures.htmlAbrir sola

<div class="iv-stack iv-u-gap-6" id="surfaces-textures">
  <section class="iv-texture-grain" style="padding: var(--iv-space-6); background-color: var(--iv-color-surface-raised); border: var(--iv-border-width) solid var(--iv-color-border); border-radius: var(--iv-radius-lg)">
    <div style="position: relative">
      <h3 class="iv-u-mt-0">Grain on a raised surface</h3>
      <p class="iv-u-m-0">A single inline SVG turbulence tile, repeated and blended in soft light at <code>--iv-texture-grain-opacity</code>. No bitmap and no remote asset: the texture ships inside the stylesheet.</p>
    </div>
  </section>
  <section class="iv-texture-mesh" style="--iv-mesh-1: #2266D8; --iv-mesh-2: #66B1FF; --iv-mesh-3: #73DFFF; padding: var(--iv-space-6); border-radius: var(--iv-radius-lg)">
    <h3 class="iv-u-mt-0">Gradient mesh, custom colours</h3>
    <p class="iv-u-m-0">Three radial gradients driven by <code>--iv-mesh-1</code>, <code>--iv-mesh-2</code> and <code>--iv-mesh-3</code>. This block overrides the three locals inline with fixed sample values, so it keeps the same colours in both themes.</p>
  </section>
  <section class="iv-texture-aurora" style="padding: var(--iv-space-6); border-radius: var(--iv-radius-lg)">
    <h3 class="iv-u-mt-0">Aurora</h3>
    <p class="iv-u-m-0">The same mesh at 200% size, drifting for 18 seconds in alternate directions. Under <code>prefers-reduced-motion: reduce</code> the animation is dropped and the mesh stays still.</p>
  </section>
</div>

.iv-root {
  --iv-mesh-1: #2266D8;
  --iv-mesh-2: #66B1FF;
  --iv-mesh-3: #73DFFF;
}

Luz, texto degradado, barrido y elevación

iv-glow dibuja un borde de gradiente cónico que gira al pasar el puntero o enfocar y proyecta un halo suave. iv-gradient-text rellena un titular con el degradado de la marca. iv-shine barre una luz sobre un botón o una tarjeta una vez al pasar el puntero. iv-elevate eleva un bloque al pasar el puntero.

Halo, texto degradado y brillofixtures/surfaces/glow.htmlAbrir sola

<div class="iv-stack iv-u-gap-6" id="surfaces-glow">
  <h2 class="iv-gradient-text iv-u-m-0">Light that follows the edge</h2>
  <div class="iv-grid iv-grid--auto iv-u-gap-4">
    <article class="iv-card iv-glow">
      <div class="iv-card__body">
        <h3 class="iv-card__title">Glowing border</h3>
        <p class="iv-u-text-muted iv-u-m-0">Sample content, not a real product. A masked conic gradient draws the 1px ring. On hover or focus the angle turns for six seconds and a halo in <code>--iv-glow-primary</code> appears; the ring stays still when the browser has no animatable custom properties, or when motion is reduced.</p>
      </div>
      <div class="iv-card__footer">
        <a class="iv-button iv-button--ghost iv-button--sm" href="#surfaces-glass">Back to glass</a>
      </div>
    </article>
    <article class="iv-card iv-elevate">
      <div class="iv-card__body">
        <h3 class="iv-card__title">Elevation on hover</h3>
        <p class="iv-u-text-muted iv-u-m-0">Sample content, not a real product. <code>iv-elevate</code> lifts the card by four pixels and swaps in the deepest shadow. With reduced motion the lift is dropped and only the shadow changes.</p>
      </div>
      <div class="iv-card__footer">
        <a class="iv-button iv-button--ghost iv-button--sm" href="#surfaces-textures">Back to textures</a>
      </div>
    </article>
  </div>
  <p class="iv-u-m-0"><a class="iv-button iv-button--primary iv-shine" href="#surfaces-glass">Sweep the light across me</a></p>
</div>

Tokens

Token	Claro	Oscuro	Lo usa
`--iv-glass-bg`, `--iv-glass-bg-strong`	blanco al 55 % y 78 %	carbón al 45 % y 72 %	`iv-glass`
`--iv-glass-border`, `--iv-glass-highlight`	blanco al 65 % y 90 %	blanco al 12 % y 20 %	`iv-glass`
`--iv-blur-sm/md/lg`	8px, 16px, 28px		`iv-glass`
`--iv-glow-primary`, `--iv-glow-secondary`	cobalto profundo al 35 %, cian al 30 %	cobalto al 45 %, cian al 40 %	`iv-glow`, halos de foco, mallas
`--iv-texture-grain-opacity`	0,05	0,09	`iv-texture-grain`

Errores frecuentes

Cristal sobre un fondo plano de un solo color: no se transparenta nada. Ponlo sobre medios, una malla o contenido.
Texto atenuado sobre cristal: cae por debajo del contraste AA. Usa el color de texto normal sobre iv-glass.
iv-glow en una tarjeta con iv-card__media: el anillo necesita overflow: visible, así que se pierde el redondeo exterior del medio. Úsalo en tarjetas sin medio.
Grano en bloques de texto pequeños: resérvalo para zonas de portada y superficies grandes.
Varios bloques aurora en una página: uno es un ambiente, cinco son una carga.

Todos los componentes de contenido