Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS gradientes


Fondo del gradiente

gradientes CSS3 permiten mostrar transiciones suaves entre los dos o más colores.

Anteriormente, se tenía que utilizar las imágenes para estos efectos. Sin embargo, mediante el uso de gradientes CSS3 puede reducir el tiempo de descarga y el uso de ancho de banda. Además, los elementos con gradientes se ven mejor cuando se hace zoom, debido a que el gradiente es generado por el navegador.

CSS3 define dos tipos de gradientes:

  • Los gradientes lineales (va hacia arriba / abajo / izquierda / derecha / diagonal)
  • Los gradientes radiales (definido por su centro)

Soporte para el navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Los números seguidos por -webkit-, -moz- , o -o- especifican la primera versión que funcionaba con un prefijo.

Propiedad
linear-gradient 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
radial-gradient 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient 26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

Los gradientes lineales de CSS3

Para crear un gradiente lineal debe definir al menos dos etapas de color. paradas de color son los colores que desee para hacer transiciones suaves entre. También puede establecer un punto de partida y una dirección (o ángulo) junto con el efecto de degradado.

Sintaxis

background: linear-gradient( direction , color-stop1 , color-stop2, ... );

Gradiente Lineal - De arriba a abajo (esto es por defecto)

El siguiente ejemplo muestra un gradiente lineal que comienza en la parte superior. Se inicia rojo, la transición a amarillo:

Ejemplo

#grad {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow); /* Standard syntax */
}
Inténtalo tú mismo "

Gradiente Lineal - De izquierda a derecha

El siguiente ejemplo muestra un gradiente lineal que empieza desde la izquierda. Se inicia rojo, la transición a amarillo:

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , yellow); /* Standard syntax */
}
Inténtalo tú mismo "

Gradiente Lineal - Diagonal

Usted puede hacer un gradiente diagonal especificando tanto las posiciones de salida horizontal y vertical.

El siguiente ejemplo muestra un gradiente lineal que comienza en la parte superior izquierda (y va a la parte inferior derecha). Se inicia rojo, la transición a amarillo:

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}
Inténtalo tú mismo "

El uso de ángulos

Si desea más control sobre la dirección del gradiente, se puede definir un ángulo, en lugar de las direcciones predefinidas (a abajo, arriba, a la derecha, a la izquierda, a la derecha abajo, etc.).

Sintaxis

background: linear-gradient( angle , color-stop1 , color-stop2 );

El ángulo se especifica como un ángulo entre una línea horizontal y la línea de gradiente.

El siguiente ejemplo muestra cómo usar ángulos en gradientes lineales:

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}
Inténtalo tú mismo "

El uso de múltiples etapas de color

El siguiente ejemplo muestra un gradiente lineal (de arriba a abajo) con múltiples etapas de color:

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, yellow, green); /* Standard syntax */
}
Inténtalo tú mismo "

El siguiente ejemplo muestra cómo crear un gradiente lineal (de izquierda a derecha) con el color del arco iris y un poco de texto:

Fondo del gradiente

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* Standard syntax */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Inténtalo tú mismo "

El uso de Transparencia

gradientes CSS3 también apoyan la transparencia, que puede utilizarse para crear efectos de desvanecimiento.

Para aumentar la transparencia, se utiliza el rgba() función para definir las etapas de color. El último parámetro en el rgba() la función puede ser un valor de 0 a 1, y se define la transparencia del color: 0 indica una total transparencia, 1 indica todo color (sin transparencia).

El siguiente ejemplo muestra un gradiente lineal que empieza desde la izquierda. Comienza totalmente transparente, la transición a la plena color rojo:

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
Inténtalo tú mismo "

Repetición de un gradiente lineal

La repeating-linear-gradient() función se utiliza para repetir gradientes lineales:

Ejemplo

Un gradiente lineal repitiendo:

#grad {
  background: red; /* For browsers that do not support gradients */
  /* Safari 5.1 to 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 to 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 to 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Standard syntax */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Inténtalo tú mismo "

Los gradientes radiales CSS3

Un degradado radial se define por su centro.

Para crear un degradado radial también debe definir al menos dos etapas de color.

Sintaxis

background: radial-gradient( shape size at position, start-color, ..., last-color );

Por defecto, es la forma de elipse, el tamaño es más lejana esquina, y la posición es central.

Degradado radial - espaciados uniformemente etapas de color (esto es por defecto)

El siguiente ejemplo muestra un gradiente radial con paradas de color uniformemente espaciadas:

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
  background: radial-gradient(red, yellow, green); /* Standard syntax */
}
Inténtalo tú mismo "

Degradado radial - A diferencia etapas de color Spaced

El siguiente ejemplo muestra un gradiente radial con paradas de color diferente espaciados:

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */
  background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
}
Inténtalo tú mismo "

Forma conjunto

El parámetro de forma define la forma. Se puede tomar el círculo o una elipse valor. El valor por defecto es elipse.

El siguiente ejemplo muestra un degradado radial con la forma de un círculo:

Ejemplo

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}
Inténtalo tú mismo "

El uso de diversa talla Palabras clave

El parámetro de tamaño define el tamaño del gradiente. Se puede tomar cuatro valores:

  • más cerca del lado de
  • más alejada del lado de
  • más cercano esquina
  • más alejado de esquinas

Ejemplo

Un gradiente radial con diferentes palabras clave tamaño:

#grad1 {
  background: red; /* For browsers that do not support gradients */
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black);
  /* For Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black);
  /* Standard syntax */
  background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black);
  /* Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
  /* Standard syntax */
  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
Inténtalo tú mismo "

Repetición de un gradiente radial

La repeating-radial-gradient() función se utiliza para repetir gradientes radiales:

Ejemplo

Un degradado radial repitiendo:

#grad {
  background: red; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Inténtalo tú mismo "

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6» Ejercicio 7 »