Cómo hacer un fondo rayado con CSS

Escrito por sara williams | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un fondo rayado con CSS
Los visitantes al ver tu página web en los navegadores más antiguos verán el color sólido. (Hemera Technologies/AbleStock.com/Getty Images)

Con hojas de estilo en cascada (Cascading Style Sheet o CSS, por sus siglas en inglés), puedes hacer un fondo de rayas para una página web entera, sin necesidad de utilizar ningún tipo de gráfico. Este efecto utiliza gradientes CSS con varios colores y la propiedad "background-size" para hacer degradado repetido en toda la pantalla. La mejor manera de hacerlo es comenzar con un color de fondo sólido y hacer una de sus rayas transparente, para poder ver el color de bajo. Los visitantes al ver tu página web en los navegadores más antiguos verán el color sólido.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el archivo de hoja de estilo CSS en el Bloc de notas o en un programa de edición de código. Agrega esta regla a la parte inferior del archivo:

    html { height: 100%; }

    Esta regla permite rellenar todo el fondo de una página web con el gradiente de la raya has creado.

  2. 2

    Establece un color de fondo para tu página web dentro de "html {}" para proporcionar un color base para tus rayas y un color de fondo negro para los exploradores más antiguos:

    html { height: 100%; background-color: black; }

  3. 3

    Agrega este código a tu regla "html {}" para crear un efecto horizontal de rayas:

    background-image: linear-gradient(transparent 50%, white 50%);

    Este código crea dos color en tu degradado, el primero transparente y el segundo blanco. Cada color toma hasta 50% del espacio del gradiente en la pantalla. Ajusta la anchura de las rayas respecto a la otra, cambiando los valores porcentuales.

  4. 4

    Agrega un valor cero frente al primer color y sepáralo de los otros con una coma:

    Background-image: linear-gradient(0, transparent 50%, black 50%);

    Este cambio hará tus rayas verticales, en lugar de horizontales.

  5. 5

    Copia la propiedad "background-image" y sus valores en una nueva línea. Haz esto dos veces, para que tengas tres líneas del mismo código. Añade el prefijo "-moz" para el gradiente lineal en una de las líneas de código. Agrega el prefijo "-webkit" a otra línea:

    background-image: linear-gradient(0, transparent 50%, white 50%); background-image: -moz-linear-gradient(0, transparent 50%, white 50%); background-image: -webkit-linear-gradient(0, transparent 50%, white 50%);

  6. 6

    Restringe el degradado a una cierta cantidad de píxeles estableciendo la "background-size" en la siguiente línea en el código CSS:

    background-size: 20px;

    Cambia el número de píxeles en "background-size" para cambiar el tamaño del gradiente. Debido a que el gradiente se repetirá por el ancho de la página, cada repetición del gradiente se convertirá en un conjunto de rayas en la pantalla.

Consejos y advertencias

  • Algunos navegadores antiguos no soportan gradientes de CSS3. Si deseas mostrar un fondo de rayas en todos los navegadores, usa comentarios condicionales para incluir una hoja de estilo con un gráfico repetido.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles