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.