Creando gradientes lineales de navegador cruzado con CSS3
Gradientes lineales
El tipo más común de degradado que verá es un degradado lineal de dos colores. Esto significa que el degradado se moverá en una línea recta cambiando gradualmente desde el primer color al segundo a lo largo de esa línea. La imagen en esta página muestra un gradiente simple de izquierda a derecha de # 999 (gris oscuro) a #fff (blanco).
Los gradientes lineales son los más fáciles de definir y tienen la mayor compatibilidad en los navegadores. Los gradientes lineales de CSS3 son compatibles con Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ y Safari 4+. Internet Explorer puede agregar gradientes usando una filtrar y los apoya de nuevo a IE 5.5. Esto no es CSS3, pero es una opción para la compatibilidad entre navegadores.
Cuando definas un gradiente necesitas definir varias cosas diferentes:
- ¿Qué tipo de gradiente es?
linealoradial - Donde debe comenzar el gradiente
- Donde debe detenerse el gradiente
- ¿Qué colores hay en el degradado y dónde deberían comenzar y detenerse?
Para definir gradientes lineales usando CSS3, escribe:
gradiente lineal(ángulo o lado o esquina, parada de color, parada de color)
- Primero se define el tipo de gradiente con el nombre.
lineal -gradiente. - A continuación, define los puntos de inicio y parada del degradado de una de las dos maneras siguientes:
ángulode la línea en grados de 0 a 359, con 0 grados apuntando hacia arriba. O con la función de "lado o esquina", comoizquierda,Correcto,fondoyparte superior. Estos se explicarán con más detalle en la página siguiente. Si deja esto, el gradiente fluirá desde la parte superior a la parte inferior del elemento. - A continuación, se definen las paradas de color. Usted define las paradas de color con el código de color y un porcentaje opcional. El porcentaje le dice al navegador dónde está la línea para comenzar o terminar con ese color. El valor predeterminado es colocar los colores uniformemente a lo largo de la línea. Aprenderá más sobre las paradas de color en la página 3.
Entonces, para definir el gradiente anterior con CSS3, escribes:
gradiente lineal (izquierda, # 999999 0%, #ffffff 100%);
Y para ponerlo como fondo de una Div usted escribe:
div {imagen de fondo: gradiente lineal (izquierda, # 999999 0%, #ffffff 100%;} Extensiones de navegador para gradientes lineales CSS3
Para que su gradiente funcione en varios navegadores, necesita usar las extensiones del navegador para la mayoría de los navegadores y una filtrar para Internet Explorer 9 y versiones inferiores (en realidad 2 filtros). Todos estos toman los mismos elementos para definir su gradiente (excepto que solo puede definir gradientes de 2 colores en IE).
Filtros y extensiones de Microsoft-El Internet Explorer es el soporte más desafiante, porque necesita tres líneas diferentes para las diferentes versiones del navegador. Para obtener el gradiente de gris a blanco anterior, debe escribir:
/ * IE 5.5–7 * /filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8–9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-gradiente lineal (izquierda, # 999999 0%, #ffffff 100%);
Extensión de Mozilla-Los -mez- La extensión funciona como la propiedad CSS3, solo con la -mez- extensión. Para obtener el gradiente anterior para Firefox, escriba:
-moz-lineal-gradiente (izquierda, # 999999 0%, #ffffff 100%);
Extensión de la ópera-Los -o- extensión agrega gradientes a Opera 11.1+. Para obtener el gradiente anterior, escriba:
-o-gradiente lineal (izquierda, # 999999 0%, #ffffff 100%);
Extensión webkit-Los -webkit- La extensión funciona mucho como la propiedad CSS3. Para definir el gradiente anterior para Safari 5.1+ o Chrome 10+, escriba:
-webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
También hay una versión anterior de la extensión Webkit que funciona con Chrome 2+ y Safari 4+. En ella se define el tipo de gradiente como un valor, en lugar de en el nombre de la propiedad. Para obtener el degradado de gris a blanco con esta extensión, escriba:
-webkit-gradient (lineal, superior izquierdo, superior derecho, tope de color (0%, # 999999), tope de color (100%, # ffffff)); Código CSS completo de gradiente lineal CSS3
Para que la compatibilidad con múltiples navegadores obtenga el degradado de gris a blanco arriba, primero debe incluir un color sólido de respaldo para los navegadores que no admiten gradientes, y el último elemento debe ser el estilo CSS3 para los navegadores que sean totalmente compatibles. Entonces, usted escribe:
fondo: # 999999;fondo: -moz-lineal-gradiente (izquierda, # 999999 0%, #ffffff 100%);fondo: -webkit-gradiente (lineal, superior izquierdo, superior derecho, tope de color (0%, # 999999), tope de color (100%, # ffffff));fondo: -webkit-linear-gradient (izquierda, # 999999 0%, #ffffff 100%);fondo: -o-lineal-gradiente (izquierda, # 999999 0%, #ffffff 100%);fondo: -ms-lineal-gradiente (izquierda, # 999999 0%, #ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);fondo: gradiente lineal (izquierda, # 999999 0%, #ffffff 100%);
Las siguientes páginas de este tutorial explican las partes de un gradiente con más detalle, y la última página le señala una herramienta que es una excelente manera de crear gradientes CSS3 automáticamente.
Vea este gradiente lineal en acción usando solo CSS.
02 de 04Creación de degradados diagonales: el ángulo del degradado
Los puntos de inicio y parada determinan el ángulo del degradado. La mayoría de los gradientes lineales son de arriba a abajo o de izquierda a derecha. Pero es posible construir un gradiente que se mueve en una línea diagonal. La imagen de esta página muestra un gradiente simple que se mueve en un ángulo de 45 grados a través de la imagen de derecha a izquierda.
Ángulos para definir la línea de degradado
El ángulo es una línea en un círculo imaginario en el centro del elemento. 0deg señala hacia arriba, 90 grados señala a la derecha, 180 grados señala hacia abajo, y 270 grados puntos a la izquierda. Puede definir cualquier ángulo de 0 a 359 grados.
Debe tener en cuenta que en un cuadrado, un ángulo de 45 grados se mueve desde la esquina superior izquierda hasta la inferior derecha, pero en un rectángulo los puntos de inicio y final están ligeramente fuera de la forma, como puede ver en la imagen.
La forma más común de definir un gradiente diagonal es definir una esquina, como parte superior derecha y el gradiente se moverá desde esa esquina a la esquina opuesta. Puede definir la posición inicial con las siguientes palabras clave:
- parte superior
- Correcto
- fondo
- izquierda
- centrar
Y se pueden combinar para ser más específicos, tales como:
- parte superior derecha
- arriba a la izquierda
- centro Superior
- abajo a la derecha
- abajo a la izquierda
- parte inferior central
- centro derecho
- centro izquierdo
Aquí está el CSS para un gradiente similar al que se muestra, de rojo a blanco, que se mueve desde la esquina superior derecha a la inferior izquierda:
fondo: ## 901A1C;imagen de fondo: -moz-lineal-gradiente (arriba a la derecha, # 901A1C 0%, # FFFFFF 100%);imagen de fondo: -webkit-gradient (lineal, superior derecha, inferior izquierda, stop de color (0, # 901A1C), stop de color (1, #FFFFFF));fondo: -webkit-linear-gradient (parte superior derecha, # 901A1C 0%, #ffffff 100%);fondo: -o-lineal-gradiente (arriba a la derecha, # 901A1C 0%, #ffffff 100%);fondo: -ms-lineal-gradiente (arriba a la derecha, # 901A1C 0%, #ffffff 100%);fondo: gradiente lineal (arriba a la derecha, # 901A1C 0%, #ffffff 100%);
Es posible que haya notado que no hay filtros de IE en este ejemplo. Esto se debe a que IE solo permite dos tipos de filtros: de arriba a abajo (el predeterminado) y de izquierda a derecha (con la GradientType = 1 cambiar).
Vea este gradiente lineal diagonal en acción usando solo CSS.
03 de 04Paradas de color
Con los gradientes lineales de CSS3, puede agregar múltiples colores a su gradiente para crear efectos aún más sofisticados. Para agregar estos colores, agregue colores adicionales al final de su propiedad, separados por comas. Debe incluir dónde en la línea los colores deben comenzar o terminar también.
Los filtros de Internet Explorer solo admiten dos paradas de color, por lo que al crear este gradiente, solo debe incluir el primer y el segundo colores que desea mostrar.
Aquí está el CSS para el gradiente de 3 colores anterior:
fondo: #ffffff;fondo: -moz-lineal-gradiente (izquierda, #ffffff 0%, # 901A1C 51%, #ffffff 100%);fondo: -webkit-gradiente (lineal, superior izquierda, superior derecha, límite de color (0%, # ffffff), límite de color (51%, # 901A1C), límite de color (100%, # ffffff));fondo: -webkit-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);fondo: -o-lineal-gradiente (izquierda, #ffffff 0%, # 901A1C 51%, # ffffff 100%);fondo: -ms-lineal-gradiente (izquierda, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);fondo: gradiente lineal (izquierda, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Vea este gradiente lineal con tres paradas de color en acción usando solo CSS.
04 de 04Hacer que los gradientes de edificios sean más fáciles
Hay dos sitios que recomiendo para ayudarlo a construir gradientes, cada uno tiene ventajas y desventajas, no he encontrado un generador de gradientes que lo haga todo todavía.
Ultimate CSS Gradient GeneratorEste generador de gradiente es muy popular porque se realiza de manera similar a los constructores de gradiente en programas como Photoshop. También me gusta porque te da todas las extensiones CSS, no solo Webkit y Mozilla. El problema con este generador es que solo admite gradientes horizontales y verticales. Si quieres hacer gradientes diagonales, tienes que ir al otro generador que recomiendo. Generador de gradientes CSS3Este generador me llevó un poco más de tiempo que el primero, pero sí permite cambiar la dirección a una diagonal. Si conoce otro generador de gradiente de CSS que le guste más que estos, háganoslo saber.
