Propiedades personalizadas tipadas en CSS

@property le dice al navegador qué es una variable, y entonces puede animarla.

@property --card-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --card-tint {
  syntax: "<color>"; inherits: true; initial-value: #f8fafc;
}

.card {
  background: linear-gradient(var(--card-angle), var(--card-tint), white);
  transition: --card-angle 400ms ease, --card-tint 400ms ease;
}

.card:hover {
  --card-angle: 120deg;
  --card-tint: #dbeafe;
}

Cómo funciona

syntax nombra el tipo; <length> y <color> son los comunes.
Una variable sin tipo es una cadena, y una cadena no se puede interpolar.
inherits e initial-value completan la declaración.

Palabras clave y builtins usados aquí

background
deg
ms
property
transition

El intento, en números

Líneas: 19
Caracteres a escribir: 375
Tokens: 85
Ritmo de tres estrellas: 85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 60 segundos.

Escribe este fragmento

Paso 3 de 3 en Propiedades personalizadas; paso 7 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →