Cómo usar degradados CSS3 - dummies

Un degradado CSS3 (que es una mezcla entre dos o más colores) puede ser un lindo fondo. Anteriormente, los desarrolladores creaban un gradiente construyendo una delgada tira de degradado en un editor de imágenes y luego usando las reglas repeat-x o repeat-y para hacer que esa imagen más pequeña se replicara en la página. Esta era una buena técnica, pero no era terriblemente flexible, y solo eran posibles degradados lineales relativamente simples.

CSS3 ha agregado una regla de gradiente notable que hace gradientes de forma nativa a través de CSS. Cuando se adopta completamente esta técnica, hace que los degradados sean mucho más fáciles de trabajar.

CSS3 admite dos tipos principales de gradientes: lineal y radial. Un degradado lineal cambia de color a lo largo de una línea recta, y un gradiente radial se irradia hacia afuera desde un punto central.

El mecanismo de degradado ha sido una de las partes más lentas de CSS para ser estandarizado y adoptado, por lo que todavía está cambiando, pero parece que los navegadores finalmente están estableciendo un estándar. Desafortunadamente, los prefijos específicos del proveedor son necesarios por el momento.

Cómo construir un gradiente simple

El gradiente más simple se muestra en el recuadro 1. Varía de izquierda a derecha, comenzando en rojo y terminando en blanco.

# box1 {background-image: linear-gradient (left, red, white); background-image: -moz-linear-gradient (izquierda, rojo, blanco); background-image: -webkit-linear-gradient (izquierda, roja, blanca);}

Así es como se construye un degradado lineal simple:

1. Definir el selector.

   Un degradado se define en CSS, y deberá usar cualquiera de sus selectores de CSS estándar para determinar a qué elemento va a agregar el degradado.

2. Usa la regla de la imagen de fondo.

   Un degradado es una forma especial de imagen. Puede usar la regla de la imagen de fondo para aplicar un degradado al fondo de cualquier elemento, incluido el cuerpo entero de la página.

3. Invoca la función de gradiente lineal.

   Algunos elementos CSS requieren paréntesis porque técnicamente son funciones. La distinción no importa ahora, pero necesita incorporar los paréntesis cuando usa este tipo de valor. La técnica de gradiente lineal es una función.

4. Determine la dirección en que fluirá el gradiente.

   Puede hacer un flujo de gradiente en la dirección que desee dentro del elemento. Al indicar a la izquierda, el elemento fluye de izquierda a derecha. Puede usar para fluir de arriba a abajo, o arriba a la izquierda para ir de arriba a la izquierda a abajo a la derecha. Use cualquier combinación de arriba, izquierda, abajo y derecha. También puede especificar un ángulo en grados, como se demuestra en el siguiente ejemplo.

5. Indique un color de inicio.

   Utilice cualquiera de las herramientas de color estándar (nombres de colores, colores hexadecimales, rgb () / rgba () o hsl ()) para determinar el color inicial.

6. Indique un color final.

   El último color indicado será el color final del degradado. El gradiente fluye desde el principio hasta el final del color de manera uniforme.

7. Repita con las extensiones del navegador.

   Tendrá que agregar variantes para los navegadores específicos. Tendrá que hacer una nueva versión de la regla de la imagen de fondo para cada proveedor principal.

Cómo hacer un degradado más interesante

Al mirar el cuadro 2, verá un degradado más complejo que muestra varios colores y un ángulo interesante.

# box2 {background-image: gradiente lineal (75deg, rojo, blanco 33%, blanco 66%, azul); background-image: -moz-linear-gradient (75deg, rojo, blanco 33%, blanco 66%, azul); background-image: -webkit-linear-gradient (75deg, rojo, blanco 33%, blanco 66%, azul);}

Aquí le mostramos cómo agregar más pizazz a sus degradados.

1. Usa un ángulo para la dirección.

   En lugar de especificar su dirección de gradiente con las palabras clave superior / izquierda estándar, puede especificar un ángulo de inicio. Los ángulos se miden matemáticamente en grados, con 0 que viene de la derecha y 90 que vienen de arriba hacia abajo. Debe especificar la medida del grado con grados, por lo que 75 grados se escribe como 75 grados.

2. Agregue tantos colores como desee.

   Un gradiente puede tener cualquier cantidad de colores. Cada cambio de color se llama parada de color . El ejemplo muestra tres colores diferentes.

3. Determine dónde se detiene el color.

   De manera predeterminada, los colores se distribuyen uniformemente a lo largo del degradado. Si lo desea, puede mover cualquier color para que aparezca en cualquier lugar del degradado que desee. Las ubicaciones de parada de color están indicadas por porcentajes. No es necesario agregar una ubicación para la primera y última parada de color, ya que se presume que son 0% y 100%.

4. Crea una banda de color proporcionando dos paradas del mismo color.

   El cuadro 2 presenta una banda de blanco. Para obtener este efecto, se produjeron dos paradas de color con blanco, una que aparece al 33% y la otra al 66%. Esto divide el gradiente aproximadamente en tres partes.

5. Coloque dos colores en la misma ubicación para un cambio abrupto de color.

   Si desea un cambio abrupto de color, simplemente coloque dos colores diferentes en el mismo porcentaje.

6. Repita para todos los navegadores.

   Nuevamente, deberá considerar los diferentes navegadores hasta que esta técnica se estandarice.

Cómo construir un degradado radial

CSS3 admite un segundo tipo de gradiente llamado gradiente radial . La idea básica es la misma, excepto que en lugar de seguir una línea recta como un degradado lineal, un gradiente radial parece fluir desde un punto central en el elemento e irradiar hacia afuera.

El degradado radial básico que se muestra en el recuadro 3 se crea con este código CSS:

# box3 {background-image: radial-gradient (white, blue); background-image: -moz-radial-gradient (blanco, azul); background-image: -webkit-radial-gradient (blanco, azul);}

Como puede ver, el degradado radial básico se crea de forma muy parecida a un degradado lineal, excepto que utiliza la función de gradiente radial en lugar del lineal. función de gradiente

Los degradados radiales tienen muchas opciones, lo que los hace bastante prometedores, pero el soporte del navegador para estos diversos estándares es bastante irregular. El cuadro 4 tiene un degradado radial con tres colores:

# box4 {background-image: radial-gradient (rojo, blanco, azul); background-image: -moz-radial-gradient (rojo, blanco, azul); background-image: -webkit-radial-gradient (rojo, blanco, azul);}

También es posible cambiar la forma del degradado de círculo a elipse, para cambiar el centro del degradado a un punto diferente dentro del elemento, y para especificar paradas de color. Deberá verificar las especificaciones actuales para ver cómo se hacen estas cosas, ya que todavía son bastante experimentales.