01 de 04
Creación de gradientes lineais cruzados con CSS3
Gradientes lineais
O tipo máis común de gradiente que verá é un gradiente lineal de dúas cores. Isto significa que o gradiente moverase nunha liña recta cambiando gradualmente desde a primeira cor ata a segunda por esa liña. A imaxe nesta páxina mostra un sinxelo gradiente de esquerda a dereita do # 999 (gris escuro) a #fff (branco).
Os gradientes lineares son os máis sinxelos de definir e teñen máis soporte nos navegadores. Os gradientes lineares CSS3 son compatibles con Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ e Safari 4+. Internet Explorer pode engadir degradados usando un filtro e os soporta de novo a IE 5.5. Este non é CSS3, pero é unha opción para a compatibilidade entre navegadores.
Cando defina un gradiente necesitará definir varias cousas distintas:
- Que tipo de gradiente é lineal ou radial
- Onde o gradiente debe comezar
- Onde o gradiente debe parar
- Que cores están no gradiente e onde deberían comezar e deter
Para definir gradientes lineares usando CSS3, escribe:
gradiente linear ( ángulo ou lado ou canto , parada de cor, parada de cor )
- Primeiro defina o tipo de gradiente co nome linear -gradient.
- A continuación, defina os puntos de inicio e de parada do gradiente dunha das dúas formas: o ángulo da liña en graos de 0 a 359, con 0 grados apuntando cara arriba. Ou coa función "lado ou canto", como esquerda, dereita, inferior e superior. Estes serán explicados con máis detalle na seguinte páxina. Se deixas isto, o gradiente fluirá desde a parte superior ata a parte inferior do elemento.
- A continuación, defina a cor para. Define a cor para con o código de cor e unha porcentaxe opcional. A porcentaxe indica ao navegador onde na liña para iniciar ou rematar con esa cor. O valor predeterminado é colocar as cores uniformemente ao longo da liña. Aprenderás máis sobre as paradas de cor na páxina 3.
Así, para definir o gradiente anterior con CSS3, escribe:
gradiente linear (esquerda, # 999999 0%, #ffffff 100%);
E para configuralo como fondo dun DIV escribes:
div {
background-image: linear-gradient (esquerda, # 999999 0%, #ffffff 100%;
}
Extensións do navegador para gradientes lineares CSS3
Para que o seu gradiente funcione co navegador cruzado, cómpre usar extensións de navegador para a maioría dos navegadores e un filtro para Internet Explorer 9 e inferior (en realidade, dous filtros). Todos estes teñen os mesmos elementos para definir o seu gradiente (agás que só pode definir gradientes de 2 cores en IE).
Filtros e extensión de Microsoft: o Explorador de Internet é o máis desafiante para soportar, porque precisa de tres liñas diferentes para soportar as diferentes versións do navegador. Para obter o gris en branco ao gradiente anterior escrebes:
/ * IE 5.5-7 * /
filtro: 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-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);
Extensión de Mozilla: a extensión -moz- funciona como a propiedade CSS3, só coa extensión -moz-. Para obter o gradiente anterior para Firefox, escriba:
-moz-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);
Extensión de Opera: a extensión -O engade gradientes a Opera 11.1+. Para obter o gradiente anterior, escriba:
-o-linear-gradiente (esquerda, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit- extensión funciona moi parecido á propiedade CSS3. Para definir o gradiente anterior para Safari 5.1 ou Chrome 10, escríbenos:
-webkit-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);
Tamén hai unha versión antiga da extensión de Webkit que funciona con Chrome 2+ e Safari 4+. Nela define o tipo de gradiente como un valor, no canto do nome da propiedade. Para obter o gradiente gris a branco con esta extensión, escriba:
-webkit-gradient (lineal, superior esquerdo, superior dereito, color-stop (0%, # 999999), color-stop (100%, #ffffff));
Código CSS completo de gradiente lineal CSS3
Para obter un soporte completo entre navegadores para obter o gradiente gris a branco anterior, primeiro debe incluír unha cor sólida para os navegadores que non admiten gradientes e o último elemento debe ser o estilo CSS3 para navegadores que sexan compatibles. Entón, escribe:
fondo: # 999999;
fondo: -moz-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);
fondo: -webkit-gradient (lineal, superior esquerdo, superior dereito, parada de cor (0%, # 999999), color stop (100%, #ffffff));
fondo: -webkit-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);
fondo: -o-linear-gradiente (esquerda, # 999999 0%, #ffffff 100%);
fondo: -ms-linear-gradient (esquerda, # 999999 0%, #ffffff 100%);
filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
fondo: lineal-gradiente (á esquerda, # 999999 0%, #ffffff 100%);
As seguintes páxinas deste tutorial explican máis detalladamente as partes dun gradiente e a última páxina apórtache a unha ferramenta que é unha excelente forma de crear gradientes CSS3 automaticamente.
Vexa este gradiente linear en acción usando só CSS.
02 de 04
Creación de gradientes diagonales: o ángulo do gradiente
Os puntos de inicio e de parada determinan o ángulo do gradiente. A maioría dos gradientes lineares son de arriba a abaixo ou de esquerda a dereita. Pero é posible construír un gradiente que se move nunha liña diagonal. A imaxe nesta páxina mostra un gradiente sinxelo que se move nun ángulo de 45 graos na imaxe de dereita a esquerda.
Ángulos para definir a liña de degradado
O ángulo é unha liña nun círculo imaxinario no centro do elemento. 0deg puntos arriba, 90deg puntos á dereita, 180deg puntos abaixo, e 270deg puntos á esquerda. Pode definir calquera ángulo de 0 a 359 graos.
Debe notar que nun cadrado, un ángulo de 45 grados móvese da esquina superior esquerda á parte inferior dereita, pero nun rectángulo os puntos de partida e de remate están ligeramente afastados da forma, como se pode ver na imaxe.
A forma máis común de definir un gradiente diagonal é definir un canto, como o de arriba á dereita eo gradiente moverase desde ese canto ata o outro lado. Pode definir a publicación inicial coas seguintes palabras clave:
- arriba
- ben
- fondo
- esquerda
- centro
E poden combinarse para ser máis específicos, como:
- arriba á dereita
- arriba á esquerda
- centro superior
- á dereita inferior
- á esquerda inferior
- centro inferior
- centro dereito
- centro esquerdo
Aquí está o CSS para un gradiente similar ao que se mostra, vermello a branco que se move dende a esquina superior dereita ata a parte inferior esquerda:
fondo: ## 901A1C;
background-image: -moz-linear-gradient (arriba da dereita, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (lineal, superior dereito, fondo esquerdo, color-stop (0, # 901A1C), color-stop (1, #FFFFFF));
fondo: -webkit-linear-gradient (parte superior dereita, # 901A1C 0%, #ffffff 100%);
fondo: -o-linear-gradiente (parte superior dereita, # 901A1C 0%, #ffffff 100%);
fondo: -ms-linear-gradient (arriba dereita, # 901A1C 0%, #ffffff 100%);
fondo: lineal-gradiente (parte superior dereita, # 901A1C 0%, #ffffff 100%);
Pode ter notado que non hai filtros de IE neste exemplo. Isto é porque IE só permite dous tipos de filtros: de arriba a abaixo (o predeterminado) e de esquerda a dereita (co selector GradientType = 1).
Vexa este gradiente diagonal linear en acción usando só CSS.
03 de 04
A cor detense
Con gradientes lineares CSS3, pode engadir varias cores ao seu gradiente para crear efectos aínda máis atractivos. Para engadir estas cores, engade cores adicionais ao final da súa propiedade, separadas por comas. Debes incluír onde na liña as cores deberían comezar ou finalizar tamén.
Os filtros de Internet Explorer só admiten dous pares de cores, polo tanto, cando constrúe este gradiente, só debería incluír a primeira e segunda cores que quere amosar.
Aquí está o CSS para o anterior gradiente de 3 cores:
fondo: #ffffff;
fondo: -moz-linear-gradient (esquerda, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
fondo: -webkit-gradient (lineal, superior esquerdo, superior dereito, parada de cor (0%, #ffffff), parada de cor (51%, # 901A1C), parada de cor (100%, #ffffff));
background: -webkit-linear-gradient (esquerda, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
fondo: -o-linear-gradiente (esquerda, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
fondo: -ms-linear-gradient (esquerda, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
fondo: lineal-gradiente (esquerda, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Vexa este gradiente lineal con tres pares de cores en acción usando só CSS.
04 de 04
Fai máis fáciles os gradientes de construción
Hai dous sitios que eu recomendo para axudarche a construír gradientes, cada un deles ten vantaxes e inconvenientes, non atopei un constructor de gradacións que faga todo aínda.
Último xerador de gradiente CSS
Este xerador de gradientes é moi popular porque funciona de forma similar aos constructores de gradientes en programas como Photoshop. Tamén me gusta porque lle dá todas as extensións CSS, non só Webkit e Mozilla. O problema con este xerador é que só soporta gradientes horizontais e verticais. Se queres facer gradientes diagonales, debes ir ao outro xerador que eu recomendo.
Xerador de gradientes CSS3
Este xerador me levou un pouco máis de comprensión que o primeiro, pero si apoia a cambiar a dirección a unha diagonal.
Se sabes doutro Xerador de Gradiente CSS que máis me gustan, por favor avísanos .