Cómo hacer un fondo rayado con el CSS

El uso de código de Cascading Style Sheet, puede generar un fondo de rayas para toda una página web sin necesidad de utilizar ningún tipo de gráficos. Este efecto utiliza gradientes CSS nivel con múltiples etapas de color y la propiedad "background-size" para hacer que el gradiente se repite en toda la pantalla. La mejor manera de hacerlo es comenzar con un color de fondo sólido y hacer una de sus franjas transparentes para que el color se muestra a través. Cuando los visitantes ver ver su página web en los navegadores antiguos, van a ver el color sólido.

Instrucciones

1 Abra el archivo de hoja de estilos CSS en el Bloc de notas o un programa de edición de código. Añadir esta regla a la parte inferior del archivo:

html {

altura: 100%;

}

Esta regla hace que sea posible llenar todo el fondo de una página Web con el gradiente de la raya que va a crear.

2 Establecer un color de fondo para su página web dentro "html {}" para proporcionar una base de color para sus rayas y una reserva para navegadores antiguos:

html {

altura: 100%;

background-color: negro;

}

3 Añadir este código a su "html {}" gobernar para crear un efecto horizontal de la raya:

Imagen de fondo: lineal de gradiente (50% transparente, blanco 50%);

Este código crea dos etapas de color en el degradado, la primera y la segunda transparente blanco. Cada etapa de color ocupa el 50 por ciento del espacio de la pendiente en la pantalla. Ajuste de la anchura de las rayas respecto a la otra cambiando los valores porcentuales.

4 Añadir un valor cero en frente de la primera etapa de color y separarla de las paradas con una coma:

Imagen de fondo: lineal gradiente (0, 50% transparente, negro 50%);

Este cambio hará que sus rayas verticales en vez de horizontales.

5 Duplicar su propiedad "Imagen de fondo" y sus valores en una nueva línea. Haga esto dos veces, por lo que el resultado final será con tres líneas del mismo código. Añadir el prefijo "-moz" para el gradiente lineal en una de las líneas duplicadas de código. Añadir el prefijo "webkit" a otra línea duplicada:

Imagen de fondo: lineal gradiente (0, 50% transparente, blanco 50%);

Imagen de fondo: -moz-linear-gradiente (0, 50% transparente, blanco 50%);

Imagen de fondo: -webkit-lineal de gradiente (0, 50% transparente, blanco 50%);

6 Restringir el degradado a una cierta cantidad de píxeles por establecer el "fondo de tamaño" en la línea siguiente en el código CSS:

fondo-size: 20px;

Cambiar el número de píxeles en el "fondo de tamaño" para cambiar el tamaño de la pendiente. Debido a que el gradiente se repetirá para el ancho de la página, cada repetición de la pendiente se convierte en un conjunto de rayas en la pantalla.

Consejos y advertencias

• Algunos navegadores antiguos no son compatibles con gradientes CSS3. Cuando se desea mostrar un fondo de rayas para cada navegador, utilizar comentarios condicionales para incluir una hoja de estilo con un gráfico de repetición.