Las rayas son bastante fáciles de hacer en CSS en estos días. Los degradados CSS a través de la propiedad background-image realmente nos respaldaron. Pensé en documentar algunas variaciones en un lugar de fácil referencia.
Rayas diagonales de colores normales
Las rayas diagonales son fáciles de quitar gracias a repeating-linear-gradient():
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);En lugar de que la última parada de color sea 100% (o nada, lo que significa 100%), es un valor fijo. Más allá de eso, simplemente comienza de nuevo. Así es como lo pienso (ampliado):
Vea Pen epfEc de Chris Coyier (@chriscoyier) en CodePen.
Rayas diagonales de degradado
Si hace que el fondo sea un linear-gradient(), y luego haga la mitad de las rayas totalmente transparentes usando repeating-linear-gradient(), puede parecer que las rayas tienen degradados. Debido a los múltiples orígenes (y el orden de apilamiento), puede hacerlo todo junto en un solo elemento:
background:
/* On "top" */
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
#ccc 10px,
#ccc 20px
),
/* on "bottom" */
linear-gradient(
to bottom,
#eee,
#999
);Vea el Pen xhkpD de Chris Coyier (@chriscoyier) en CodePen.
Rayas sobre la imagen
¿Quizás una textura? Cualquier imagen funcionará. Puede revelar parte de la imagen haciendo que algunas rayas sean completamente transparentes y otras completamente opacas. O cualquier combinación. Nuevamente, múltiples fondos permiten que todo esto suceda en el mismo elemento.
background: repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 10px,
rgba(0, 0, 0, 0.3) 10px,
rgba(0, 0, 0, 0.3) 20px
),
url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/[email protected]);Vea el Pen gaKyv de Chris Coyier (@chriscoyier) en CodePen.
Cualquier dirección, cualquier ángulo
No tiene que ser exactamente de 45 grados. Eso es parte de la belleza del gradiente lineal repetido (). No es como este rectángulo perfecto que tiene que alinearse y repetirse, es solo un conjunto de instrucciones de dibujo que se repiten.
background: repeating-linear-gradient(
-55deg,
#222,
#222 10px,
#333 10px,
#333 20px
);Vea el Pen qfHmw de Chris Coyier (@chriscoyier) en CodePen.
Rayas rectas (compatibilidad con el navegador ligeramente mejor)
Hay una sintaxis muy antigua para los degradados CSS que usaba -webkit-gradient() (tenga en cuenta el no “lineal” o “radial”). Básicamente: Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Cosas viejas. Esos navegadores no admiten la repetición de degradados. Pero podría simularlo un poco, especialmente para rayas rectas, haciendo un pequeño rectángulo de fondo a través de background-size, dibujando las rayas allí y haciendo que se repita naturalmente como background-image lo hace.
background: linear-gradient(
to bottom,
#5d9634,
#5d9634 50%,
#538c2b 50%,
#538c2b
);
/* The rectangle in which to repeat.
It can be fully wide in this case */
background-size: 100% 20px;Vea el Pen uxJrf de Chris Coyier (@chriscoyier) en CodePen.
Si quisieras volverte loco, podrías transform: rotate() algún elemento con estas rayas rectas y cortar el desbordamiento, en el que replicar las rayas diagonales con un soporte de navegador más profundo. Parece mucho trabajo.
Rayas verticales
También puede usar el mismo método que el anterior para las rayas verticales. O simplemente usa repeating-linear-gradient():
background: repeating-linear-gradient(
to right,
#f6ba52,
#f6ba52 10px,
#ffd180 10px,
#ffd180 20px
);Vea el Pen oCpEu de Chris Coyier (@chriscoyier) en CodePen.
Solo para ser claro, con repeating-linear-gradient() es mejor que hagas un -webkit-repeating-linear-gradient() así como el que no tiene prefijo, si está, ya sabe, prefijando compre usted mismo lo que no debería.
Rayas radiales
¿Quién dice que tienen que ser rectas, eh? Los gradientes radiales pueden ser repeating-linear-gradients():
/* Note the RADIAL */
background: repeating-radial-gradient(
circle,
purple,
purple 10px,
#4b026f 10px,
#4b026f 20px
);Vea el Pen AEymd de Chris Coyier (@chriscoyier) en CodePen.
Funky Town
A veces ocurren errores de redondeo (¿tal vez?) U otro tipo de extravagancia.
Whattyagonnado. Sospecho que mejorará con el tiempo.
Actualizar: Christopher Cohen escribe en:
Puedes derrotar a la ciudad funky estableciendo paradas basadas en porcentajes y usando background-size. No sé si Chrome simplemente calcula con una precisión diferente para% vs px, pero descubrí que esto me dio líneas hermosamente ordenadas.
Otro consejo rápido; a veces necesitas especificar background-attachment: fixed o ignora background-position. Esto es útil al aplicar estilo a las barras de progreso, etc., con cuadros superpuestos llenos de degradado.
Vea los degradados de repetición de lápiz de Christopher Cohen (@Jeevecore) en CodePen.
Todas las demostraciones
Todos juntos ahora.