Gradientes de Repetición CSS3 [Consejos CSS3]
Hay muchas características de CSS3 que cambian la forma en que decoramos un sitio web, una de las cuales es Gradientes CSS3. Antes de CSS3, definitivamente necesitamos imágenes para crear el efecto degradado; ahora podemos ofrecer los mismos (y mejores) efectos usando solo CSS
En nuestras publicaciones anteriores, hemos discutido dos tipos de gradientes que se pueden lograr con CSS3:
- Radial y
- Gradientes lineales.
Esta vez vamos a ver a su hermano: gradientes de repetición.
Repetición básica
Gradientes de repetición Es esencialmente una extensión. La sintaxis es similar a cómo definimos los gradientes radiales y lineales, solo que como su nombre lo indica, también repetirá los colores en una dirección específica. Para repetir gradientes lineales, podemos utilizar esta función: gradiente lineal repetitivo, Mientras que para repetir gradientes radiales o elípticos usamos esta función: gradiente radial de repetición.
/ * Lineal * / .gradient background: repeating-linear-gradient (0deg, # f9f9f9, #cccccc 20px); / * Radial * / .gradient background: repeating-radial-gradient (50% 50%, circle, # f9f9f9, #cccccc 20px);
No hay mucha diferencia para el resto en el código, a excepción de la repetición de colores. A continuación se muestra una ilustración simple para describir cómo funciona esta repetición de color..
Aunque la imagen de arriba solo se ilustra para repetir gradientes lineales, la idea básica también se aplica a los gradientes radiales en los que los colores se repetirán infinitamente, en este caso, en cualquier dirección. Sigue el enlace de abajo para ver la demo..
- Ver demostración
En la siguiente sección, le mostraremos cómo podemos utilizar los gradientes de repetición de CSS3 en ejemplos reales..
Ejemplo: Creando patrones
La implementación más común de Gradientes de repetición Es crear patrones de fondo. En este ejemplo, vamos a crear patrones simples de rayas verticales.
.gradiente fondo: repetición lineal-gradiente (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);
Observe cómo definimos dos colores diferentes - # f9f9f9 y #cccccc - en el mismo lugar, 20px. Este ejemplo agudizará la diferencia entre estos dos colores y eliminará la borrosidad.
Para dirigir la orientación simplemente cambiamos el ángulo. - 90 grados lo dirigirá horizontalmente mientras 45 grados lo dirigirá en diagonal y así sucesivamente.
- Ver demostración
Ejemplo: Crear Paperline
En este segundo ejemplo, vamos a crear una línea de papel que a menudo se puede ver en un cuaderno. Para crear este efecto, solo necesitamos un div, no hay imágenes, solo CSS.
.gradiente ancho: auto; altura: 500px; margen: 0 50px; fondo: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fondo: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fondo: -o-repeat-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); fondo: repetición lineal-gradiente (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); tamaño de fondo: 100% 21px;
Note que también agregamos CSS3 tamaño de fondo propiedad para especificar los tamaños de imágenes de fondo para 100%, 20 px. Aunque los gradientes CSS3 muestran "colores", en realidad se clasifican como imágenes, no color.
A continuación, utilizaremos :antes de pseudo-elemento Para agregar una raya en el lado izquierdo del papel..
.gradiente: antes de contenido: ""; pantalla: bloque en línea; altura: 500px; ancho: 4px; borde izquierdo: 4px doble # FCA1A1; posición: relativa; izquierda: 30px;
Y hemos terminado, es muy simple ¿verdad? Ahora podemos verlos a todos en acción desde los enlaces a continuación..
- Ver demostración
- Descargar fuente
Recursos adicionales
- Webkit CSS3 Gradientes
- Gradientes CSS3 en Microsoft Developer Network
