Cómo utilizar gradientes css3
Un gradiente de CSS3 (que es una mezcla entre dos o más colores) puede ser un buen fondo. Anteriormente, los desarrolladores podrían crear un degradado mediante la construcción de una tira delgada de gradiente en un editor de imágenes, y luego usar la repetición-x o repeat-y reglas para hacer que la imagen más pequeña replica a través de la página. Esta fue una buena técnica, pero no era muy flexible y sólo gradientes lineales relativamente simples fuera posible.
CSS3 ha añadido una regla gradiente notable que hace que los gradientes de forma nativa a través de CSS. Cuando esta técnica se adopten en su totalidad, tiene gradientes mucho más fácil trabajar con ellos.
CSS3 soporta dos tipos principales de gradientes: lineal y radial. Un gradiente lineal cambia de color a lo largo de una línea recta, y un gradiente radial irradia hacia fuera desde un punto central.
El mecanismo de gradiente ha sido una de las partes más lentas de CSS para ser estandarizados y adoptados, por lo que todavía está cambiando, pero parece que los navegadores son finalmente estableciendo un estándar. Por desgracia, los prefijos específicos del proveedor son necesarios por el momento.
¿Cómo construir un simple gradiente
El gradiente más simple se demuestra en la caja 1. Se varía de izquierda a derecha, comenzando en rojo y terminando con blanco.
# Box1 {Imagen de fondo: lineal gradiente (izquierda, rojo, blanco) -Antecedentes imagen: -moz-linear-gradiente (izquierda, rojo, blanco) -Antecedentes imagen: -webkit-lineal-gradiente (izquierda, de color rojo , blanco) -}Así es como se construye un gradiente lineal simple:
Definir el selector.
Video: Background com gradient - CSS3
Un gradiente se define en el CSS, y usted tendrá que utilizar cualquiera de sus selectores CSS estándar para determinar qué elemento se le añade el gradiente a.
Use la regla Imagen de fondo.
Un gradiente es una forma especial de imagen. Puede utilizar la regla Imagen de fondo para aplicar un degradado a los antecedentes de cualquier elemento, incluyendo todo el cuerpo de la página.
invocar la gradiente lineal función.
Unos elementos CSS requieren paréntesis, porque técnicamente son funciones. La distinción no importa en este momento, pero hay que incorporar los paréntesis cuando se utiliza este tipo de valor. los gradiente lineal técnica es una función.
Determine la dirección fluirá el gradiente.
Puede hacer un gradiente de flujo en cualquier dirección que desee dentro del elemento. lo que indica izquierda hace que el elemento a fluir de izquierda a derecha. Se puede utilizar para fluir de arriba hacia abajo, o arriba a la izquierda para pasar de la parte superior izquierda a la inferior derecha. Utilizar cualquier combinación de arriba, izquierda, abajo y derecho. También puede especificar un ángulo en grados, como se demuestra en el siguiente ejemplo.
Indicar un color inicial.
Utilizar cualquiera de las herramientas de color estándar (nombres de los colores, colores hexagonales, rgb () / RGBA (), o hsl ()) Para determinar el color de comenzar.
Indicar un color final.
El último color indicado será el color final del gradiente. El gradiente fluye desde el principio hasta terminar color uniformemente.
Repita con las extensiones del navegador.
Video: CSS3 Tutorials #6 - Linear Gradients In CSS3
Usted tendrá que añadir variantes para los navegadores específicos. Tendrá que hacer una nueva versión de la imagen de fondo gobernar para cada proveedor importante.
Como hacer un gradiente más interesante
Como te ves en la casilla 2, verá un gradiente más compleja que muestra múltiples colores y un ángulo interesante.
# Box2 {Imagen de fondo: lineal gradiente (a 75 grados, rojo, blanco 33%, blanco 66%, azul) -Antecedentes-image: lineal-gradiente -moz (a 75 grados, rojo, blanco 33%, blanco 66%, azul ) -Antecedentes-image: -webkit-lineal-gradiente (a 75 grados, rojo, blanco 33%, blanco 66%, azul) -}He aquí cómo usted agrega más dinamismo a sus gradientes.
Utilice un ángulo de dirección.
En lugar de especificar su dirección del gradiente con la norma parte superior/izquierda palabras clave, puede especificar un ángulo inicial. Los ángulos se miden matemáticamente en grados, con 0 viene de la derecha y 90 que viene de arriba hacia abajo. Debe especificar la medición con el grado deg, por lo que 75 grados se escribe como a 75 grados.
Añadir tantos colores como desee.
Un gradiente puede tener cualquier número de colores en el mismo. Cada cambio de colores se llama parada de color. El ejemplo muestra tres colores diferentes.
Determinar dónde ocurren las etapas de color.
Por defecto, los colores se distribuyen uniformemente a lo largo del gradiente. Si lo desea, puede pasar cualquier color a aparecer en cualquier parte del gradiente desea. Las ubicaciones de las paradas de color se indican mediante porcentajes. No es necesario añadir una ubicación para la primera y última parada de color, ya que se supone que son 0% y 100%.
Crear una banda del color, proporcionando dos paradas del mismo color.
Recuadro 2 cuenta con una banda de color blanco. Para conseguir este efecto, dos paradas de color fueron producidos con blanco, que aparece en el 33%, y el otro a 66%. Esto rompe el gradiente más o menos en tres partes.
Poner dos colores en la misma ubicación para un cambio abrupto de color.
Si quieres un cambio abrupto de color, basta con poner dos colores diferentes en el mismo porcentaje.
Repita este procedimiento para todos los navegadores.
Una vez más, tendrá que tener en cuenta los diferentes navegadores hasta que esta técnica se hace más estandarizado.
¿Cómo construir un degradado radial
CSS3 soporta un segundo tipo de degradado llamado el gradiente radial. La idea básica es la misma, excepto en lugar de seguir una línea recta como un gradiente lineal, un gradiente radial parece fluir desde un punto central en el elemento e irradiar hacia el exterior.
El gradiente radial básica mostrada en la caja 3 se crea con este código CSS:
# Box3 {Imagen de fondo: radial gradiente (blanco, azul) -Antecedentes imagen: radial gradiente -moz (blanco, azul) -Antecedentes imagen: -webkit-radial gradiente (blanco, azul) -}Como se puede ver, el gradiente radial básica se crea mucho como un gradiente lineal, excepto que utiliza la radial-gradiente función en lugar de la gradiente lineal función.
gradientes radiales tienen muchas opciones, lo que los hace muy prometedor, pero el soporte del navegador para estas diversas normas es bastante irregular. Cuadro 4 presenta un gradiente radial con tres colores:
# Box4 {Imagen de fondo: radial-gradiente (rojo, blanco, azul) -Antecedentes-image: -moz-radial-gradiente (rojo, blanco, azul) -Antecedentes-image:-radial-gradiente -webkit (rojo, blanco , azul) -}También es posible cambiar la forma del gradiente de círculo en elipse, para cambiar el centro de la pendiente a un punto diferente dentro del elemento, y para especificar paradas de color. Usted tendrá que comprobar las especificaciones actuales para ver cómo se hacen estas cosas, ya que todavía son bastante experimental.