Contenido
Usando el código CSS, es posible generar un fondo rayado para una página web de una web sin hacer uso de gráficos. Este efecto utiliza niveles gradientes del CSS con múltiples interrupciones de color, además de la propiedad "background-size" (tamaño del fondo de pantalla) para hacer que el vector gradiente se repita por toda la pantalla. La mejor manera de hacer esto es comenzar con un color de fondo sólido y hacer una de sus bandas transparentes para que el color sea realzado. Los usuarios que visitan su página utilizando navegadores de Internet antiguos ver el color sólido.
instrucciones
-
Abra el archivo de hoja de estilo CSS en el Bloc de notas o en un programa de edición de código. Agregar esta regla al final del archivo:
html {height: 100%; }
Esta regla hace posible rellenar todo el fondo de una página web con la raya gradiente que creará.
-
Defina un color de fondo para su página dentro de "html {}" para proporcionar el color base para sus rayas y un patrón para navegadores antiguos:
html {height: 100%; background-color: black; }
-
Agregue el código siguiente a su patrón "html {}" para crear un efecto de raya horizontal:
background-image: linear-gradient (transparent 50%, white 50%);
Creará dos interrupciones de color, siendo la primera transparente y la segunda blanca. Cada interrupción de color toma el 50% del espacio del gradiente en la pantalla. Ajuste la anchura de las tiras cambiando los valores porcentuales.
-
Agregar un valor cero a la primera interrupción de color y separarla con una coma:
Background-image: linear-gradient (0, transparent 50%, black 50%);
Esto colocará sus rayas en vertical, en lugar de colocarlas en horizontal.
-
Duplique la propiedad "background-image" (imagen de fondo) y sus valores en una nueva línea. Haga esto dos veces, creando tres líneas con el mismo código. Agregue el prefijo "-moz" al gradiente lineal en una de las líneas de código duplicadas. Añada el prefijo "-webkit" a la otra línea duplicada:
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%);
-
Restringir el gradiente a una cierta cantidad de píxeles, definiendo el "background-size" en la siguiente línea en su código CSS:
background-size: 20px;
Cambie el número de píxeles del "background-size" para modificar el tamaño del gradiente. Debido a la repetición constante del gradiente en el ancho de página, cada repetición corresponderá a un conjunto de rayas en la pantalla.
instrucciones
advertencia
- Algunos navegadores antiguos no soportan los gradientes de CSS3. Cuando desee mostrar rayas para todo tipo de explorador, utilice comentarios condicional para incluir una hoja de estilos con un gráfico repetitivo.