Fondo degradado CSS. Linear-gradient(): Degradado lineal en el fondo. Añadiendo más colores
Cuando hablamos de gradientes en CSS, estamos hablando de gradientes de color.
Hay dos tipos de degradados en CSS:
- lineal: los colores van de un punto a otro, a lo largo derecho líneas;
- radial: los colores van desde el centro del círculo hasta sus bordes, en todos direcciones.
El gradiente se considera imagen de fondo y debe usarse con la propiedad adecuada.
gradiente lineal
La sintaxis de los gradientes lineales es bastante compleja, pero la idea básica es la siguiente:
- determinar lo deseado colores;
- donde deberían aparecer estos colores a lo largo del eje(al principio, a la mitad, al final, etc.);
- en el cual dirección Debería haber un gradiente.
Comencemos con un degradado simple de dos colores:
Div (imagen de fondo: gradiente lineal (rojo, azul);)
Por defecto:
- dirección vertical, De arriba hacia abajo;
- primero colorear en comienzo(arriba);
- segundo colorear en fin(en el fondo).
Cambiando de dirección
Si la dirección de arriba hacia abajo no le conviene, puede cambiarla a una de las opciones:
- definir asignación de gradiente, utilizando palabras clave como arriba a la izquierda ;
- determinar especifico esquina en grados, como 45 grados.
Esta dirección debe establecerse antes color:
Div (imagen de fondo: gradiente lineal (abajo a la derecha, amarillo, morado); ancho: 200 px;)
Si quieres preguntar ángulo específico, entonces puedes usar el valor en grados:
- 0 grados - de abajo hacia arriba;
- 20 grados - ligeramente en diagonal, en el sentido de las agujas del reloj;
- 90 grados, como a las 15 en punto, de izquierda a derecha;
- 180 grados es el valor predeterminado, de arriba a abajo.
Div (imagen de fondo: gradiente lineal (20 grados, verde, azul); ancho: 150 px;)
Añadiendo más colores
Puedes insertar tantos colores como quieras. Ellos van a Distribuidos equitativamente a lo largo del eje:
- dos colores: 0% y 100%
- tres colores: 0%, 50% y 100%
- cuatro colores: 0%, 33%, 67% y 100%
Div (imagen de fondo: degradado lineal (naranja, gris, amarillo); ancho: 150 px;)
Definición de puntos de color específicos
Si no desea que el color se distribuya uniformemente, puede configurar ciertas posiciones de color usando porcentajes (%) o píxeles (px):
Div (imagen de fondo: degradado lineal (naranja, gris 10%, amarillo 50%); ancho: 150px;)
En estos parámetros:
- el naranja no tiene ninguna posición de color especificada, por lo que el valor predeterminado es 0%;
- el color gris está más cerca de la parte superior, en un 10% en lugar de un 50%;
- El color amarillo ocupa la mitad del degradado, desde el 50% hasta el final del 100%.
gradiente radial
Mientras que los gradientes lineales siguen un solo eje, gradientes radiales extenderse en todas direcciones. Su sintaxis es muy similar a la de los gradientes lineales, ya que ambos tienen puntos de color. Pero en lugar de especificar una dirección, es necesario especificar:
- forma: círculo o elipse;
- punto de partida: cuál será el centro de un círculo o elipse;
- punto final: donde estará el borde del círculo o elipse.
Div (imagen de fondo: gradiente radial (rojo, amarillo); relleno: 1rem; ancho: 300px;)
Por defecto:
- gradiente es elipse;
- El primer color comienza en centro;
- el último color termina en el rincón más lejano.
Posición inicial
Posición inicial funciona como posición de fondo. Puede configurarlo mediante la palabra clave at.
Div (imagen de fondo: gradiente radial (en la parte superior derecha, negro, gris claro); relleno: 1rem; ancho: 300px;)
Posición final
Por defecto, el formulario termina en el rincón más lejano. Tu puedes elegir:
- lado más cercano
- esquina más cercana
- lado más lejano
- esquina más alejada
Div (imagen de fondo: gradiente radial (esquina más cercana a 20 px 20 px, verde, azul); relleno: 1rem; ancho: 300 px;) div: hover (imagen de fondo: gradiente radial (lado más lejano a 20 px 20 px, verde azul)
Tamaño fijo
En lugar de configurar las posiciones inicial y final, simplemente puede configurar tamaños específicos:
Div (imagen de fondo: gradiente radial (20px 10px al 75% 50%, violeta oscuro, rosa); relleno: 1rem; ancho: 300px;)
Los degradados en CSS son una herramienta poderosa, considerando número infinito opciones.
Los degradados CSS te permiten crear un fondo de dos o más colores que pasan suavemente de uno a otro. Han estado con nosotros durante bastante tiempo y tienen un soporte de navegador bastante bueno. La mayoría de los navegadores modernos los entienden sin prefijos, para IE9 y versiones anteriores hay un filtro de degradado y para IE9 puede usar SVG.
Los degradados se pueden usar en cualquier lugar donde se usen imágenes: en fondos, como viñetas de lista, se pueden especificar en contenido o imagen de borde.
Gradiente lineal
Los degradados lineales son bastante fáciles de usar. Para el degradado más básico, simplemente configura los colores inicial y final:
Fondo: degradado lineal (naranja, dorado);
Puede haber cualquier número de colores más de dos. También puedes controlar la dirección del degradado y los límites (puntos de parada) de los colores.
La dirección se puede especificar en grados o palabras clave.
Palabras clave: hacia arriba = 0 grados; a la derecha = 90 grados; hacia abajo = 180 grados - valor predeterminado; hacia la izquierda = 270 grados.
Palabras clave se pueden combinar para crear un degradado diagonal, por ejemplo en la parte superior izquierda.
A continuación puedes ver cómo funcionan. direcciones diferentes estirado de lila a amarillo:
Aquí está el código para el primer cuadrado, por ejemplo:
Arriba a la izquierda (fondo: degradado lineal (arriba a la izquierda, morado, carmesí, rojo anaranjado, dorado);)
Una cosa para recordar es que arriba a la derecha no es lo mismo que 45 grados. Los colores del degradado son perpendiculares a la línea de dirección del degradado. Desde arriba a la derecha, la línea va desde la esquina inferior izquierda hasta la esquina superior derecha, desde 45 grados; se ubica estrictamente en este ángulo, independientemente del tamaño de la figura.
La diferencia es claramente visible en figuras rectangulares:
También puedes establecer puntos de parada para colores degradados; los valores se especifican en unidades o porcentajes y pueden ser mayores que 100% y menores que 0%.
Ejemplos de configuración de valores en %, en em y valores que van más allá de los límites del elemento:
Cuanto más cerca estén los puntos de parada de los colores vecinos, más claro será el límite entre ellos. De esta manera puedes hacer fácilmente fondos rayados:
Así es como puede crear, por ejemplo, un fondo para una columna lateral, estirado hasta toda la altura del elemento principal:
Las rayas en el fondo de la barra lateral son otro degradado que consiste en alternar transparencia total y blanco con un 30% de transparencia. Degradados con flores translucidas Son convenientes porque se pueden colocar sobre un fondo de cualquier color.
El degradado en el ejemplo se establece en un código largo y complejo porque las franjas solo deben colocarse encima del fondo de la barra lateral. Si no intentas hacer que todo sea el fondo de un bloque, puedes resolver el problema usando un pseudoelemento.
Si no hay restricciones, el código puede ser mucho más corto:
Claro (fondo: melocotónpuff lineal-gradiente(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) centro centro / 2em; ) .dark (fondo: azul acero gradiente lineal (rgba (0, 0, 0, 0) 50%, rgba (0, 0, 0, .2) 50%) centro centro / 100% 1em)
En la primera línea establecemos color de fondo elemento, tipo y dirección (se pueden omitir el color y la dirección), en el segundo, determinamos los colores del degradado y el borde entre ellos, en el tercero, establecemos la posición y el tamaño de la imagen resultante. La parte más importante es el tamaño. De forma predeterminada, el fondo se repite, por lo que el patrón resultante llenará el fondo del elemento. Muy fácil y comprensible :)
La entrada completa se puede escribir en una línea, pero para facilitar la lectura es más conveniente escribir en varias, especialmente para gradientes complejos.
También es importante saber que la palabra clave transparente significa negro transparente, no blanco transparente, por lo que si la usas en Firefox podrías terminar con algo como esto:
Para evitar esto, utilice completamente colores transparentes el tono deseado, por ejemplo, blanco: rgba(255, 255, 255, 0) o negro rgba(0, 0, 0, 0) . Acerca de diferentes caminos Puede leer los colores para configurar.
Para aprender la notación rgb color específico, puedes usar CSS.coloratum, un instrumento de Lea Verou.
Además del gradiente lineal habitual, puede hacer un gradiente lineal repetido: un gradiente repetido
Código de muestra:
Fondo: gradiente lineal repetido (verde, verde 0,5 em, transparente 0,5 em, transparente 1 em);
Desafortunadamente, los gradientes repetidos se comportan de manera desordenada y solo son adecuados para patrones a los que no les importa la precisión. Si necesita precisión, utilice gradiente lineal en combinación con tamaño de fondo y repetición de fondo.
Los degradados tienen la misma limitación que el cuadro de sombra: no se les puede dar colores ni direcciones individuales. Esto conduce a la duplicación de código y a una necesidad urgente de utilizar preprocesadores al crear gradientes complejos.
Otra limitación es que los degradados no están animados, lo que, sin embargo, se puede solucionar hasta cierto punto.
Para creación rápida hay muchos gradientes entre navegadores herramienta útil: colorzilla.com/gradient-editor/. Además del código para navegadores modernos, ofrecerá código para IE y SVG más antiguos para el noveno.
En combinación con capacidades básicas gestión imágenes de fondo los gradientes dan las oportunidades más amplias para crear fondos de diversos grados de complejidad sin utilizar imágenes en absoluto. Puedes usar degradados para crear patrones complejos e interesantes, pero ese es un tema completamente diferente.
- Traducción
El trabajo de traducción del proyecto singlediv.com demostró que algunos herramientas CSS ten mas aplicación amplia de lo que solía pensar. Pero para poder encontrar esta aplicación, es necesario entender claramente las características de la propiedad. Un ejemplo sorprendente fue el gradiente lineal, que Lynn Fisher utilizó magistralmente en sus obras.
quiero hacerlo lindo fondo degradado¿en tu sitio web? imagen de fondo: gradiente lineal (rojo, azul); ¡listo! Sí, es un poco aburrido. Entonces, si quieres algo más, te recomiendo esta página con consejos de CSS y MDN. ¿Estás aquí ahora? Luego, veamos algunas cosas sobre cómo funcionan realmente los gradientes lineales. Primero, revisemos la sintaxis que se puede usar en la función de gradiente lineal:
gradiente lineal ([de<угла>| antes<стороны-или-угла>]?,
La función toma un primer argumento opcional que especifica el ángulo del gradiente, que se puede expresar usando una unidad de medida (grado, radio, grado, revolución) o como una palabra clave (lado o ángulo).
Luego, la función acepta una lista de colores.
Campo degradado
La imagen degradada no tiene dimensiones, es infinita a diferencia de otras imágenes de fondo. Las dimensiones visibles le vienen dadas por el campo de gradiente, es decir el área en la que se muestra.Normalmente, cuando aplica una imagen de fondo con degradado lineal a elemento DOM, esta área es el marco del borde del elemento (que es el área misma en la que se muestra el color de fondo).
Además, si también usa la propiedad CSS background-size (tamaño de fondo) y la establece, digamos, en 200px * 200px, entonces el campo de degradado tendrá este tamaño y, de forma predeterminada, se colocará a la izquierda. esquina superior Elemento DOM, a menos que también establezca la posición de fondo.
Entonces, mientras lees las siguientes secciones, recuerda que el cuadro de degradado no siempre está en la misma posición o en el mismo tamaño que el elemento DOM al que estás aplicando el degradado.
Línea de gradiente
En un campo degradado, la línea que pasa por el centro y a lo largo de la cual se distribuyen los colores se llama línea de degradado. Esta línea se puede describir de manera más simple explicando el ángulo de gradiente, por lo que esto se discutirá con más detalle en la siguiente sección.Ángulo de gradiente
Obviamente, el ángulo de un gradiente lineal se utiliza para determinar en qué dirección irá el gradiente. Pero veamos este aspecto con más detalle.Si C es el punto central del campo de gradiente, entonces A es el ángulo entre linea vertical, que pasa por C, y una línea de degradado, que también pasa por C, y a lo largo de la cual se distribuyen los colores finales del degradado.
Este ángulo se puede determinar de dos maneras:
Usando una de las palabras clave: arriba (arriba), abajo (abajo), izquierda (izquierda), derecha (derecha), arriba derecha (arriba derecha), arriba izquierda (arriba izquierda), abajo derecha ( abajo a la derecha), hacia abajo a la izquierda (abajo a la izquierda);
O definiendo un ángulo con un número y una unidad de medida, por ejemplo 45deg (45 grados), 1turn (1 vuelta);
Si no se especifica el ángulo, de forma predeterminada se dirige hacia abajo (es decir, es de 180 grados o 0,5 vueltas):
En esta imagen y en las siguientes, el cuadro de degradado está delimitado por un rectángulo y la línea de degradado es la línea gris gruesa que pasa por el centro a lo largo del cual aparecen los colores.
En el ejemplo anterior, no se especifica ningún ángulo, por lo que el degradado de blanco a rojo se mueve de arriba a abajo, correspondiente a la palabra clave to bottom, como se muestra a continuación:
Y, como se muestra en las siguientes 2 imágenes, arriba corresponde a un ángulo de cero grados:
Otro punto importante Algo que vale la pena considerar al usar palabras clave de ángulo: arriba a la derecha, por ejemplo (o cualquier otra palabra clave de ángulo) depende de las dimensiones del cuadro de degradado.
La lógica es que si quisieras hacer un degradado de rojo a azul hacia la esquina superior derecha de un elemento, entonces ese elemento debería ser exactamente azul en la esquina superior derecha, y púrpura en el medio del degradado se debe formar alrededor de una línea que va desde la esquina superior izquierda hasta la esquina inferior derecha. Así es como se ve en la imagen:
Entonces, estar arriba a la derecha no significa que la línea de gradiente pase por la esquina superior derecha, ¡y ni siquiera significa que el ángulo de gradiente sea de 45 grados!
Echemos un vistazo a cómo se mueve la línea de degradado a medida que cambia el ángulo con la siguiente animación:
En esta animación, el ángulo se inclina de 0 a 360 grados en incrementos de 10 grados. Baja resolucion El GIF incluso te permite ver mejor cómo varios colores se muestran como “líneas” que siempre son perpendiculares a la línea de gradiente.
Recordemos lo que sabemos sobre los ángulos de gradiente:
El ángulo se mide entre la línea de gradiente y la línea que sale del centro del campo de gradiente y se mueve hacia arriba.
Por lo tanto 0 grados significa arriba.
El valor del ángulo estándar, si no se especifica, es hacia abajo, que es de 180 grados.
Las palabras clave de ángulo dependen del tamaño del campo de degradado.
Longitud de la línea de degradado
Antes de que podamos ver cómo se distribuyen los colores a lo largo de una línea de degradado, debemos explicar una cosa. Es posible que hayas notado en la animación anterior que los colores a veces se colocan fuera del cuadro de degradado, lo que puede parecer un poco extraño a primera vista, pero tiene sentido si conoces el motivo.Mira el ejemplo:
Queremos un degradado de rojo a azul en un ángulo de 45 grados y, debido a la relación de aspecto del campo de degradado, la línea de degradado no puede pasar por la esquina superior derecha.
Pero el navegador quiere (es decir, las especificaciones lo obligan) hacer que la esquina superior derecha sea de color azul puro. Si hicimos que la línea de gradiente comenzara y terminara en los bordes del campo, entonces Color azul tomó mayoría campos, y el degradado no se difuminaría tanto.
Entonces, para hacer esto, la línea de degradado a veces debe extenderse más allá del cuadro de degradado. Al mismo tiempo, es bastante fácil saber dónde comienza y dónde termina. Simplemente dibuje una línea que pase por la esquina más cercana y sea perpendicular a la línea de gradiente. El punto donde esta línea cruza la línea de gradiente es la ubicación inicial/final.
De hecho, si especifica el ancho del campo de degradado W, la altura H y el ángulo del degradado, entonces la longitud de la línea de degradado es:
Abs(W * pecado(A)) + abs(H * cos(A))
Colores
Los colores representan una lista separada por comas en la que cada elemento se puede definir de la siguiente manera:<цвет> [<процентное соотношение> | <длина>]?
Por lo tanto, no es necesario especificar dónde se deben colocar los colores a lo largo de la línea de degradado. Por ejemplo:
Ninguno de los colores tiene su propia posición, por lo que el propio navegador determina sus posiciones.
De hecho ejemplo sencillo con solo 2 colores, el color 1 se colocará al 0% (al comienzo de la línea de degradado) y el color 2 se colocará al 100% (al final de la línea de degradado).
Luego, si agrega un tercer color, todavía tendrá el color 1 al 0%, el color 2 al 50% y el color 3 al 100%, y así sucesivamente.
En el ejemplo anterior, se proporcionaron 5 colores de parada y el navegador calculó su posición relativa como 0%, 25%, 50%, 75%, 100%. La razón de esto es la distribución uniforme a lo largo del campo de gradiente.
La posición de un color se puede expresar mediante porcentaje(en relación con el tamaño de la línea de gradiente) o como Longitudes CSS(donde cualquier unidad es válida Dimensiones CSS).
He aquí un ejemplo:
Como puede ver, cada uno de los 5 colores de parada tiene su propia posición, especificada en píxeles. Estas posiciones se calculan desde el comienzo de la línea de gradiente.
Usando tales posiciones, puedes obtener varias efectos interesantes. Por ejemplo, puedes usar un degradado para no dibujar el degradado en sí, sino dejar algunos colores:
Hay 7 colores en la imagen de arriba y están configurados para que el siguiente color comience exactamente en la misma posición que el último, lo que significa que el navegador no tiene que llenar el espacio entre los dos colores de parada con un degradado.
Claro, todo eso es lindo y divertido, pero ¿qué sucede cuando mezclas colores posicionados con colores no posicionados? Luego obligarás al navegador a trabajar más duro y le pedirás que distribuya automáticamente los colores para los que no has especificado una posición:
En este sencillo ejemplo, el segundo color (naranja) no tiene posición, por lo que el navegador lo determina y encuentra un lugar adecuado entre el color especificado anteriormente y el siguiente color. Aquí es muy sencillo, ya que los vecinos inmediatos del segundo color tienen su propia posición, pero si solo algunos colores tienen posición, o si los colores anteriores o siguientes no tienen posición, la cosa se complica más.
Veamos algunos ejemplos:
En el ejemplo anterior, sólo el tercer color (amarillo) se sitúa al 30%. Así que para distribuir mejor todos los demás, el primero se coloca al 0%, el último al 100%, y el resto de colores se distribuyen entre medio (de modo que el naranja acaba directamente entre el 0% y el 30%, y el rojo entre el 30% y el 30%). 100%).
En el ejemplo anterior, el primer y el último color están colocados, por lo que el resto se distribuye uniformemente entre estos dos.
Por supuesto, sería demasiado simple si el 0% y el 100% fueran límites rígidos que no se puedan exceder. Pero como puede ver en el ejemplo anterior, el último color se encuentra al 120% y, por lo tanto, todos los demás colores deben distribuirse en consecuencia en relación con esta posición (el punto de partida predeterminado en este caso sigue siendo 0%).
Y si quieres que tu navegador funcione aún más, ¿por qué no especificar el orden de las posiciones?
De hecho, los colores deben estar en orden, pero nada te lo impide y no sucederá nada terrible si no lo haces. Su navegador simplemente arreglará todo como se muestra a continuación:
Empecemos por el primer color (rojo), situado al 30%. Luego el segundo color se ubica al 10%, lo cual ya es incorrecto, ya que como se indicó anteriormente los colores deben indicarse en orden ascendente. Entonces aquí el navegador corrige la posición del segundo color y lo establece en la misma posición que el color anterior (30%). Luego viene el tercer color (amarillo) al 60%, lo cual es correcto, pero le sigue un cuarto (azul) al 40%. Nuevamente la posición se ajusta y se establece en el mismo valor que el color colocado anteriormente.
En última instancia, como se muestra en el ejemplo anterior, el último color (azul) se coloca incorrectamente y el navegador hace que su posición sea la misma que la del color anterior, lo que en en este caso no es su vecino inmediato (amarillo) ni el vecino del color anterior (naranja), por lo que debe volver al primer color (rojo). De esta manera, todos los colores entre rojo y azul se ajustan al 30% y, por tanto, son invisibles.
Herramientas
Todas las capturas de pantalla de este artículo provienen de una herramienta simple que creé en codepen que le permite ingresar una función de degradado lineal y ver el cuadro de degradado, la línea de degradado, el ángulo y la información de color en la parte superior del elemento.La herramienta tiene todo tipo de errores y limitaciones (ver comentarios de JavaScript), así que no esperes mucho de ella.
Etiquetas:
- CSS
- gradiente lineal
¡a! El degradado es una excelente herramienta para manipular el color en CSS3. En lugar de utilizar una imagen para crear un efecto de degradado en una página web, sería más beneficioso utilizar gradiente CSS3 y así “aligerar” el sitio. Dado que el usuario no necesitará perder tiempo ni tráfico descargando imagen de fondo. Hay dos tipos principales de gradiente: radial y lineal. El post de hoy será sobre ellos.
Gradiente lineal
Como dice la clasificación, gradientes en CSS3 son imágenes. No existen propiedades especiales para ellos. Y el anuncio utiliza la propiedad de imagen de fondo.
EN caso general La sintaxis de gradiente (lineal) se ve así:
1 | div( |
Entonces, hablemos de todo en orden.
En primer lugar, la función linear-gradient() declara un gradiente lineal. La función tiene tres significados principales. El primer valor define posición inicial. El ejemplo indica arriba, es decir. posición inicial desde arriba. También puedes usar abajo, izquierda y derecha;
Si el ángulo es negativo, la posición cambiará desde la esquina inferior izquierda a la superior izquierda.
El segundo valor de la función es el color inicial y su posición final, que se indica como porcentaje. No es necesario declarar esta posición; el navegador establecerá de forma predeterminada 0% para el primer color.
El último valor es el segundo color y su posición de parada. El valor predeterminado es 100%. Estos valores extremos significan que el primer color comienza inmediatamente a pasar al segundo. Sin embargo, si configuramos el primer color al 50%, solo comenzará a pasar al segundo desde la mitad de la altura disponible. Así es como se ve el código:
Obtenemos tiras de igual altura. Con un borde claro, no habrá transición de color. Para comprender mejor cómo funciona esto, experimente con los valores.
Un gradiente radial, al igual que uno lineal, se declara como una función, solo radial-gradient() . También hay valores básicos: esta es la forma del degradado radial (círculo - círculo o elipse - elipse), el color inicial y final. La sintaxis es la siguiente:
div( |
Si no especifica una forma, el valor predeterminado será una elipse.
Además, la posición central del degradado está establecida de forma predeterminada y se puede cambiar. La posición se puede especificar mediante comandos (arriba, abajo, izquierda, derecha y centro), así como sus combinaciones, o especificarse en porcentajes o píxeles.
Combinaciones de comandos:
- Centro en la parte superior - arriba - 50% 0%;
- En la esquina superior izquierda - arriba a la izquierda - 0% 0%;
- En la esquina superior derecha - arriba a la derecha - 100% 0%;
- En el centro - centro - 50% 50%;
- Centro izquierda - centro izquierda - 0% 50%;
- Centro derecha - centro derecha - 100% 50%;
- Centro inferior - inferior - 50% 100%;
- En la esquina inferior izquierda - abajo a la izquierda - 0% 100%;
- En la esquina inferior derecha - abajo a la derecha - 100% 100%.
A continuación se muestra un ejemplo con porcentajes:
div( |
Valor del primer eje X segundo en Ud..
También gradiente radial puedes configurar el tamaño. El tamaño se indica con un espacio después de la forma del degradado. Aplicar por defecto esquina más alejada(hasta la esquina más alejada). El cálculo se realiza desde el punto central de la pendiente hasta:
Para entender mejor esto, veamos un ejemplo. Un degradado de forma elíptica con un color inicial blanco y un final azul:
div( |
El tamaño se calcula a partir de la distancia a los lados cercanos, es obvio que la parte superior está más cerca a lo largo del eje. Y y a la izquierda a lo largo del eje X.
Y ahora a los lados lejanos:
div( |
El resultado, como suele decirse, es evidente. El tamaño se calcula a partir de la distancia a los lados lejanos.
Tanto en degradados radiales como lineales, se pueden utilizar posiciones de parada para el color. También me gustaría señalar que si necesita lograr transparencia de color, debe usar rgba.
div( |
El canal alfa, el último e igual a 0,2, indica que sólo se utiliza el 20% del 100% del color.
En ambos tipos gradiente CSS3 Puedes usar no dos, sino varios colores.
div( |
Para ambos tipos, se pueden utilizar colores repetidos. Es decir, a partir de estos valores se forma un ciclo. Funciones de gradiente repetido, gradiente lineal repetido () para lineal y gradiente radial repetido () para radial.
div( |
0%, #FFAE00 100%); /* para Firefox */
imagen de fondo: -ms-linear-gradient(arriba, #FF5A00 0%, #FFAE00 100%); /* para IE 10+ */
imagen de fondo: -o-linear-gradient(arriba, #FF5A00 0%, #FFAE00 100%); /* para Ópera */
imagen de fondo: gradiente lineal (arriba, #FF5A00 0%, #FFAE00 100%); /* sintaxis estándar */
}
div(
filtro: progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00, endColorstr= #33FFAE00);
}
Donde 33 justo después del hash es el porcentaje de saturación de color.
Espero que el artículo te haya resultado útil y que el tema tratado haya quedado completamente cubierto.
Para mantenerse actualizado con los últimos artículos y lecciones, suscríbase a
Pronto, muy pronto, los sitios web serán más fáciles de cargar y será posible crearlos sin necesidad de imágenes.
Ya ahora en navegadores modernos puedes hacer un fondo degradado de cualquier complejidad con ayuda CSS, y al mismo tiempo completamente sin imágenes.
Crear degradados CSS sin imágenes
Digamos que queremos hacer una transición de degradado en el fondo de gris a negro. Para lograr esto, W3 Corporation propuso utilizar una directiva especial de gradiente lineal en CSS3.
Entonces, según la versión W3, para hacer un fondo degradado, simplemente escriba en el selector de bloques:
Fondo: gradiente lineal (inicio, color1 posición1, color2 posición2,...,colorN posiciónN);
Y el navegador dibujará automáticamente un fondo degradado en el bloque.
Obviamente, flores y puntos de control puede haber mucho en el gradiente. Parámetro comenzar especifica en qué dirección debe propagarse el gradiente; puede ser arriba para un gradiente direccional vertical o izquierda para direccional horizontalmente.
No todos los navegadores admiten esta función, por lo que por ahora existen una serie de trucos. Para navegadores muy antiguos, debe especificar un color de fondo promedio (no habrá ningún degradado, pero el fondo no será blanco) o especificar una imagen con un degradado (sin embargo, si el propósito de usar degradado lineal en CSS es reducir la cantidad de imágenes cargadas, entonces esto es inútil, porque en todos los navegadores la imagen aún se cargará, aunque luego será reemplazada por gradiente lineal).
Para navegadores tipo IE, puedes usar gradientes basados en filtros, y para navegadores webkit (Safari, Chrome) y gecko (Mozilla), como siempre, hay una alternativa: -webkit-gradient y -moz-linear-gradient, que aceptar parámetros similares. Consulte el siguiente bloque de código para saber cómo debería funcionar todo esto:
Antecedentes: #999; filtro: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); fondo: -webkit-gradient(lineal, arriba a la izquierda, abajo a la izquierda, desde(#ccc), hasta(#000)); fondo: -moz-linear-gradient(arriba, #ccc, #000);
Después de renderizar, se ve así.
