Utilidades · Superficies

Hatched (achurados)

Aplica 28 patrones de QuicklyCSS con una única clase numerada: los 25 diseños históricos y tres incorporaciones nuevas, sin imágenes externas.

v2.0

Veintiocho patrones

Los 25 originales y tres diseños nuevos.

Una sola clase

Usa .hatched-{número} directamente.

Sin imágenes

Cada trama se genera con gradientes.

Código + resultado

Compara patrones representativos

Selecciona una pestaña para ver la clase exacta y el resultado que produce sobre la misma superficie.

Una clase · patrón completo

Patrón aplicado

Colección completa

Los veintiocho achurados

Las clases 1–25 preservan la colección histórica; 26–28 incorporan puntos, espiga y escamas.

.hatched-1

Diagonal

Líneas diagonales a 45°.

.hatched-2

Diagonal inversa

Invierte la dirección del trazo.

.hatched-3

Horizontal

Líneas paralelas horizontales.

.hatched-4

Vertical

Líneas paralelas verticales.

.hatched-5

Cuadrícula

Cruza los ejes horizontal y vertical.

.hatched-6

Diagonal espaciada

Aumenta la separación entre líneas.

.hatched-7

Diagonal gruesa

Trazo ancho con densidad media.

.hatched-8

Cruz diagonal

Superpone diagonales a 45° y 135°.

.hatched-9

Cuadrícula marcada

Cruce ortogonal de mayor presencia.

.hatched-10

Persiana fina

Horizontal compacta de un píxel.

.hatched-11

Diagonal 30°

Inclinación más suave y compacta.

.hatched-12

Inversa 150°

Trazo inverso grueso y abierto.

.hatched-13

Cruz 30°

Cruce diagonal de ángulo abierto.

.hatched-14

Inversa fina

Línea sutil a 120°.

.hatched-15

Vertical densa

Vertical fina con poco espacio.

.hatched-16

Puntos finos

Matriz alternada de puntos pequeños.

.hatched-17

Diagonal densa

Bandas gruesas y próximas.

.hatched-18

Cuadrícula gruesa

Cruce ortogonal amplio y marcado.

.hatched-19

Cruz fina

Retícula diagonal compacta.

.hatched-20

Trama compleja

Combina ejes y diagonales.

.hatched-21

Horizontal abierta

Línea horizontal con mayor separación.

.hatched-22

Vertical abierta

Línea vertical con mayor separación.

.hatched-23

Diagonal abierta

Diagonal equilibrada y espaciada.

.hatched-24

Cruz abierta

Cruce diagonal de baja densidad.

.hatched-25

Diagonal amplia

Línea gruesa con separación máxima.

.hatched-26

Retícula de puntos

Puntos uniformes y espaciados inspirados en interfaces oscuras.

.hatched-27

Espiga geométrica

Segmentos angulares forman un ritmo de espiga contemporáneo.

.hatched-28

Escamas

Arcos superpuestos producen una trama orgánica y continua.

Referencia

Clases disponibles

Las clases originales conservan sus nombres y las nuevas continúan la misma numeración.

01–05

Patrones básicos

Diagonales, líneas ortogonales y cuadrícula.

.hatched-1 … .hatched-5

06–10

Grosor y densidad

Variaciones más espaciadas, gruesas o compactas.

.hatched-6 … .hatched-10

11–15

Ángulos alternativos

Direcciones de 30°, 120°, 150° y vertical densa.

.hatched-11 … .hatched-15

16–20

Puntos y cruces

Puntos, tramas densas y combinaciones complejas.

.hatched-16 … .hatched-20

21–25

Patrones abiertos

Superficies de baja densidad con mayor separación.

.hatched-21 … .hatched-25

26–28

Nuevos patrones

Retícula de puntos, espiga geométrica y escamas.

.hatched-26 … .hatched-28

Criterio de uso

Buenas prácticas

Un patrón por elemento

No combines varias clases .hatched-*; la última regla puede sustituir a las anteriores.

Prioriza legibilidad

Usa el achurado como fondo decorativo y mantén suficiente contraste para el contenido.

Elige la densidad

Los patrones densos funcionan en superficies pequeñas; los abiertos respiran mejor en áreas amplias.

Retíralo con claridad

Elimina la clase numerada cuando el elemento deba volver a una superficie sin trama.