Rayas CSS No-Jank | Programar Plus

Mi mente va inmediatamente a repeating-linear-gradient y degradados rígidos cuando se piensa en crear rayas en CSS. Usted hace una raya usando el mismo color entre dos paradas de color, y otra raya (o más) pero usando un color diferente entre dos paradas de colores (compartiendo el del medio).

Asi como:

background: repeating-linear-gradient(
  45deg,
  black,
  black 10px,
  #444 10px,
  #444 11px
);

Eso hará que las rayas grises oscuras en ángulo estén separadas por 10 píxeles en negro.

Pero así es como se muestra en mi pantalla:

¿Puedes ver esa irregularidad en la representación en la que una o dos de las rayas parecen más claras y más delgadas que las otras? No tengo ni idea de porqué. Supongo que tiene algo que ver con la representación de subpíxeles o similares. Esto no es difícil de replicar. No son solo estos dos colores o este ángulo en particular es casi cualquier franja creada con repeating-linear-gradient. Sin embargo, deja de ser tan notorio con rayas más gruesas (digamos, 5px y más grueso).

Hice algunos ejemplos. Este con rayas más apretadas en sentido contrario es especialmente preventivo:

Necesitaba hacer esto el otro día, encontré el jankiness y recordé esta pequeña nota en nuestro artículo de rayas. Equivale a: no usar repeating-linear-gradient. Solo usa linear-gradient, establece un background-size y deja que se repita. De hecho, eso parece funcionar. El problema con esto es … ¿qué tan grande haces el background-size? Si las rayas son verticales u horizontales, es bastante fácil manchar algo. Pero si las rayas están en ángulo … calcular el ancho × alto perfecto es complicado. Supongo que está relacionado con el teorema de Pitágoras, pero estoy fuera de mi alcance allí.

¿Entonces, Qué haces?

Usa esta pequeña herramienta generadora:

Hace todas las matemáticas sofisticadas necesarias para hacerlo bien. Puede ver el JavaScript no minificado aquí. Buscar / GET BACKGROUND SIZE / para ver todas las matemáticas. Sea lo que sea que esté haciendo allí, las rayas salen perfectamente.

Una especie de vergüenza repeating-linear-gradient no tiene una mejor salida visual ya que es mucho más fácil razonar sobre eso, pero oye, tienes que hacer lo que tienes que hacer.

(Visited 2 times, 1 visits today)