El CSS que más se consulta, con los valores que producen los generadores CSS del sitio. Pruébelo en el Conversor de Unidades CSS, el Generador de Sombras CSS, el Generador de Border Radius CSS, el Generador de Degradados CSS, el Generador de clamp() CSS, el Generador de CSS Grid y el Generador de Cubic Bezier.
Unidades
| Unidad | Relativa a | Úsela para |
|---|---|---|
px |
Un píxel CSS (1/96 de pulgada) | Bordes, líneas finas, sombras |
rem |
Tamaño de fuente de la raíz (normalmente 16px) | Tamaños de fuente y espacios que siguen la preferencia del usuario |
em |
Tamaño de fuente del propio elemento | Relleno que debe escalar con el texto |
% |
La propiedad equivalente del padre | Anchuras y maquetas fluidas |
vw vh |
1 % del ancho o alto de la ventana | Secciones a pantalla completa, tipografía fluida |
dvh |
Alto dinámico de la ventana (barras del móvil) | Maquetas de altura completa en móviles |
ch |
Ancho del carácter 0 |
Longitudes de línea legibles como 65ch |
fr |
Una parte del espacio libre en una cuadrícula | Columnas y filas de cuadrícula |
24px son 1.5rem con la raíz por defecto de 16px; el Conversor de Unidades CSS hace la aritmética.
Atajos
- Cuatro valores van en sentido horario desde arriba:
margin: arriba derecha abajo izquierda. Dos valores sonvertical horizontal; un valor fija los cuatro. - Sombra de caja:
box-shadow: desplazamiento-x desplazamiento-y desenfoque extensión color, coninsetal principio para una sombra interior. Ejemplo:box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25); - Radio de borde: de una a cuatro esquinas desde la superior izquierda en sentido horario.
border-radius: 8px 8px 8px 8px;redondea todas las esquinas;border-radius: 50%hace un círculo de un cuadrado. - Degradado:
linear-gradient(135deg, #667eea, #764ba2). El ángulo0degapunta hacia arriba,90dega la derecha y135deghacia la esquina inferior derecha. Useradial-gradient(circle, a, b)para uno radial.
Tipografía fluida con clamp()
clamp(mín, preferido, máx) mantiene un valor entre un mínimo y un máximo mientras el término central escala con la ventana. Para crecer de 16px con una ventana de 320px a 32px con 1280px, el generador produce clamp(1rem, 0.6667rem + 1.6667vw, 2rem). Mantenga el máximo por debajo de unas 2,5 veces el mínimo para que el texto aún llegue al 200 % de zoom.
Cuadrícula y flex en una línea
- Cuadrícula de tarjetas adaptable, sin media queries:
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; - Centrar cualquier cosa:
display: grid; place-items: center; - Elemento flexible:
flex: 1 1 0reparte el espacio por igual;flex: 0 0 autoconserva su tamaño natural.
Curvas de aceleración
| Palabra clave | Curva |
|---|---|
linear |
cubic-bezier(0, 0, 1, 1) |
ease |
cubic-bezier(0.25, 0.1, 0.25, 1) |
ease-in |
cubic-bezier(0.42, 0, 1, 1) |
ease-out |
cubic-bezier(0, 0, 0.58, 1) |
ease-in-out |
cubic-bezier(0.42, 0, 0.58, 1) |
Diseñe la suya con el Generador de Cubic Bezier.
Especificidad
La especificidad se cuenta como (IDs, clases y pseudoclases, elementos) y se compara de izquierda a derecha. #nav .item a:hover es (1, 2, 1) y vence a cualquier selector sin ID. Los estilos en línea vencen a todos, y !important anula la especificidad, así que evítelo.
Contraste de color
WCAG pide una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande (unos 24px, o 19px en negrita). Negro sobre blanco es 21:1 y #767676 sobre blanco es 4.54:1, el gris más claro que pasa para texto de cuerpo. Compruebe pares con el Verificador de Contraste de Color; vea Cómo funcionan el color y el contraste.