Gradientes lineales CSS3 [Consejos CSS3]
Gradiente Es una gran adición de características de color en CSS3. En lugar de solo agregar un solo color, ahora podemos agregar múltiples combinaciones de colores en un bloque de declaración sin depender de las imágenes, lo que podría disminuir la solicitud HTTP en nuestro sitio web permitiendo que el sitio web se cargue más rápido.
Si ha jugado con gradientes en CSS3, probablemente esté familiarizado con los dos métodos: gradiente radial y lineal. El post de hoy será sobre este último..
Creando Gradientes
Como la especificación dice que los gradientes en CSS3 son una imagen, no tiene propiedades especiales como la adición de otras características nuevas, por lo que se declara usando la imagen de fondo propiedad en cambio.
Si echamos un vistazo a la sintaxis completa para gradiente, se ve un poco sobrecargado, lo que podría llevar a confusión para algunas personas.
div imagen de fondo: -webkit-linear-gradient (arriba, # FF5A00 0%, # FFAE00 100%); imagen de fondo: -moz-lineal-gradiente (arriba, # FF5A00 0%, # FFAE00 100%); imagen de fondo: -ms-lineal-gradiente (arriba, # FF5A00 0%, # FFAE00 100%); imagen de fondo: -o-lineal-gradiente (arriba, # FF5A00 0%, # FFAE00 100%); imagen de fondo: gradiente lineal (arriba, # FF5A00 0%, # FFAE00 100%);
Así que vamos a profundizar en cada parte de la sintaxis una por una para aclarar las cosas.
En primer lugar, el gradiente lineal se declara con la gradiente lineal() función. La función tiene tres valores primarios. El primer valor define la posición de inicio del gradiente. Puede utilizar una palabra clave descriptiva, como parte superior para iniciar el gradiente que fluye desde el parte superior;
div imagen de fondo: gradiente lineal (arriba, # FF5A00, # FFAE00);
El fragmento anterior es la versión oficial de W3C para crear gradientes. En realidad, es más simple y se explica por sí mismo, y también creará el siguiente gradiente.
También puedes usar fondo hacer lo contrario, o bien Correcto y izquierda.
También podemos crear un gradiente diagonal usando grado del ángulo como la posición inicial del gradiente. Aquí hay un ejemplo:
div imagen de fondo: gradiente lineal (45 grados, # FF5A00, # FFAE00);
El fragmento anterior creará el siguiente gradiente de color:
El segundo valor de la función le dirá al primer color información y su posición de parada que se expresa en porcentaje. La posición de parada en realidad es opcional; el navegador es lo suficientemente inteligente como para determinar la posición correcta, por lo que cuando no especifiquemos el primer color, el navegador tomará 0% como el predeterminado.
Y, el siguiente valor es el segundo color combinación. Funciona como el valor anterior, solo que si es el último color aplicado, y no especificamos el posición de parada, un valor de 100% será tomado como el predeterminado. Ahora, veamos el siguiente ejemplo:
div imagen de fondo: gradiente lineal (arriba, # FF5A00 0%, # FFAE00 100%);
El fragmento anterior creará un degradado como el que vimos anteriormente (sin diferencias), pero ahora especificamos la posición de detención del color;
Ahora vamos a cambiar el parada de color, y esta vez vamos a especificar 50% para el primer color y 51% para el segundo color, y veamos cómo resulta;
div imagen de fondo: gradiente lineal (arriba, # FF5A00 50%, # FFAE00 51%);
Transparencia
Creando transparencia en gradiente también es posible. Para crear el efecto necesitamos traducir el color. maleficio dentro rgba modo y bajar el canal alfa.
div imagen de fondo: gradiente lineal (arriba, rgba (255,90,0,0.2), rgb (255,174,0,0.2));
El fragmento anterior disminuirá la intensidad del color en 20%, y el gradiente resultará así:
Múltiples colores
Si desea agregar más colores, simplemente agregue los colores uno al lado del otro con un delimitador de coma y deje que el navegador determine cada posición de parada de color.
div imagen de fondo: gradiente lineal (superior, rojo, naranja, amarillo, verde, azul, índigo, violeta);
El fragmento anterior creará el siguiente arco iris.
Compatibilidad del navegador
Desafortunadamente, en el momento de escribir este artículo, todos los navegadores actuales aún tienen que soportar la sintaxis estándar. Todavía necesitan el prefijo del vendedor (-webkit-, -moz-, -Sra- y -o-). Entonces, es por eso que la sintaxis completa aparece así:
div imagen de fondo: -webkit-linear-gradient (arriba, # FF5A00 0%, # FFAE00 100%); imagen de fondo: -moz-lineal-gradiente (arriba, # FF5A00 0%, # FFAE00 100%); imagen de fondo: -ms-lineal-gradiente (arriba, # FF5A00 0%, # FFAE00 100%); imagen de fondo: -o-lineal-gradiente (arriba, # FF5A00 0%, # FFAE00 100%); imagen de fondo: gradiente lineal (arriba, # FF5A00 0%, # FFAE00 100%);
Por otro lado, Internet Explorer, específicamente la versión 9 e inferior, está lejos del estándar. El gradiente en IE9 y abajo se declara con filtrar, así que si queremos agregar gradiente en esos navegadores, tenemos que escribir algo como esto;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
los filtrar tiene sus limitaciones: primero, no permite agregar más de tres colores, y crear el efecto de transparencia también es un poco complicado, no permite rgba, pero el IE filtrar usos #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Aquí hay una herramienta para ayudarte a convertir rgba a #ARGB.
- Manifestación
- Descargar fuente
Escribir la sintaxis más rápido
Como puede ver arriba, para poder mantener la compatibilidad del gradiente en los navegadores, necesitamos agregar cinco líneas más de códigos, lo cual es ineficiente..
Hay muchas formas en que podemos hacer para simplificar la tarea; como el uso de Prefix-free, Prefixr, LESS o Sass para ayudar a compilar los códigos, pero sobre todo, recomendamos usar esta herramienta, ColorZilla Gradient. Esta herramienta simplemente generará todos los códigos necesarios para que los gradientes funcionen en todos los navegadores.
Ultimas palabras
Hoy hemos discutido bastante sobre la creación de gradientes, hemos examinado cada parte de la sintaxis, creando efectos transparentes y manteniendo la compatibilidad del navegador. Entonces, en este punto, esperamos que ya tenga un mejor entendimiento sobre el tema.
Todavía hay muchas cosas que planeamos explorar en Gradientes CSS3 en nuestras publicaciones futuras, así que estad atentos a Hongkiat.com. Por último, gracias por leer este post, esperamos que lo hayan disfrutado..
Otras lecturas
- Fondos de RGBA de navegador cruzado a prueba de balas - Lea Verou
- Imagen CSS3 - W3.org
- ¿Cuándo puedo usar los gradientes de CSS3 - CanIUse.com
