01 de 04
Creació de degradats lineals creuats amb CSS3
Gradients lineals
El tipus més comú de degradat que veureu és un gradient lineal de dos colors. Això vol dir que el gradient es mourà en línia recta canviant gradualment del primer color al segon al llarg d'aquesta línia. La imatge d'aquesta pàgina mostra un degradat simple d'esquerra a dreta de # 999 (gris fosc) a #fff (blanc).
Els gradients lineals són els més fàcils de definir, i tenen més suport als navegadors. Els gradients lineals CSS3 són compatibles amb Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ i Safari 4+. Internet Explorer pot afegir gradients usant un filtre i els recolza de nou a IE 5.5. Això no és CSS3, però és una opció per a la compatibilitat entre navegadors.
Quan definiu un degradat, heu de definir diverses coses diferents:
- Quin tipus de gradient és lineal o radial?
- On ha de començar el gradient
- On s'ha de parar el degradat
- Quins colors hi ha al gradient i on han de començar i parar
Per definir gradients lineals amb CSS3, escriviu:
gradient lineal ( angle o costat o cantonada , parada de color , parada de color )
- Primer definiu el tipus de degradat amb el nom lineal -gradient.
- A continuació, defineix els punts d'inici i de parada del gradient d'una de dues maneres: l'angle de la línia en graus de 0 a 359, amb 0 graus apuntant cap amunt. O amb la funció "lateral o cantonada", com a esquerra, dreta, inferior i superior. Aquests s'expliquen amb més detall a la pàgina següent. Si ho deixeu, el gradient fluirà des de la part superior fins a la part inferior de l'element.
- A continuació, defineix el color s'atura. Es defineix el color s'atura amb el codi de color i un percentatge opcional. El percentatge indica al navegador on es troba la línia per iniciar o finalitzar amb aquest color. El valor predeterminat és col · locar els colors uniformement al llarg de la línia. Aprendrà més sobre les parades de colors a la pàgina 3.
Per tant, per definir el gradient anterior amb CSS3, escriviu:
gradient lineal (esquerra, # 999999 0%, #ffffff 100%);
I per definir-lo com a fons d'un DIV escriviu:
div {
background-image: lineal-gradient (esquerra, # 999999 0%, #ffffff 100%;
}
Extensions del navegador per gradients lineals CSS3
Per aconseguir que el gradient funcioni amb el navegador creuat, cal utilitzar les extensions del navegador per a la majoria de navegadors i un filtre per a Internet Explorer 9 i més baix (en realitat 2 filtres). Tots ells prenen els mateixos elements per definir el degradat (excepte que només podeu definir gradients de 2 colors a IE).
Filtres i extensions de Microsoft: l'Explorador d'Internet és el suport més difícil, ja que necessiteu tres línies diferents per donar suport a les diferents versions del navegador. Per obtenir el degradat gris a blanc, escriviu:
/ * IE 5.5-7 * /
filtre: 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-lineal-gradient (esquerra, # 999999 0%, #ffffff 100%);
L'extensió de Mozilla -The -moz- funciona com la propietat CSS3, només amb l'extensió -moz-. Per obtenir el degradat anterior per a Firefox, escriviu:
-moz-lineal-gradient (esquerra, # 999999 0%, #ffffff 100%);
Extensió d'Opera : l'extensió -O afegeix degradats a Opera 11.1+. Per obtenir el pendent anterior, escriviu:
-o-lineal-gradient (a l'esquerra, # 999999 0%, #ffffff 100%);
Extensió de Webkit : l'extensió -webkit- funciona molt semblant a la propietat CSS3. Per definir el degradat anterior per a Safari 5.1+ o Chrome 10+ escriviu:
-webkit-lineal-gradient (esquerra, # 999999 0%, #ffffff 100%);
També hi ha una versió anterior de l'extensió de Webkit que funciona amb Chrome 2+ i Safari 4+. En ell, defineix el tipus de gradient com a valor, més que no pas al nom de la propietat. Per obtenir el degradat gris a blanc amb aquesta extensió, escriviu:
-webkit-gradient (lineal, superior esquerre, superior dret, color-stop (0%, # 999999), color-stop (100%, #ffffff));
Codi CSS de gradient lineal complet CSS3
Per obtenir un suport complet entre navegadors per obtenir el degradat gris a blanc anteriorment, primer haureu d'incloure un color sòlid per a navegadors que no admet gradients, i l'últim element hauria de ser l'estil CSS3 per a navegadors que compleixin plenament. Per tant, escriu:
antecedents: # 999999;
background: -moz-linear-gradient (esquerra, # 999999 0%, #ffffff 100%);
background: -webkit-gradient (lineal, superior esquerre, superior dret, color-stop (0%, # 999999), color-stop (100%, #ffffff));
background: -webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (esquerra, # 999999 0%, #ffffff 100%);
background: -ms-linear-gradient (left, # 999999 0%, #ffffff 100%);
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: lineal-gradient (esquerra, # 999999 0%, #ffffff 100%);
Les següents pàgines d'aquest tutorial expliquen les parts d'un degradat amb més detall, i l'última pàgina apunta a una eina que és una manera excel·lent de crear gradients CSS3 automàticament.
Vegeu aquest gradient lineal en acció amb només CSS.
02 de 04
Creació de degradats diagonals: l'angle del degradat
Els punts d'inici i de parada determinen l'angle del gradient. La majoria dels gradients lineals són de dalt a baix o d'esquerra a dreta. Però és possible construir un gradient que es mou en una línia diagonal. La imatge d'aquesta pàgina mostra un degradat simple que es mou en un angle de 45 graus a través de la imatge de dreta a esquerra.
Angles per definir la línia de degradat
L'angle és una línia en un cercle imaginari al centre de l'element. 0deg punts a dalt, 90deg punts a la dreta, 180deg punts a baix, i 270deg punts a l'esquerra. Podeu definir qualsevol angle de 0 a 359 graus.
Cal tenir en compte que, en un quadrat, un angle de 45 graus es mou des de l'extrem superior esquerre fins a la part inferior dreta, però en un rectangle els punts d'inici i de finalització estan lleugerament fora de la forma, com podeu veure a la imatge.
La forma més comú de definir un degradat diagonal és definir una cantonada, com ara la part superior dreta i el gradient es mou d'aquesta cantonada a la cantonada oposada. Podeu definir la publicació inicial amb les paraules clau següents:
- superior
- dret
- fons
- esquerra
- centre
I es poden combinar per ser més específics, com ara:
- dalt a la dreta
- a dalt a l'esquerra
- centre superior
- abaix a la dreta
- Baix a l 'esquerra
- centre inferior
- centre dret
- centre esquerre
Aquí teniu el CSS per a un degradat similar al que es mostra, vermell a blanc, que es mou des de l'extrem superior dret fins a la part inferior esquerra:
antecedents: ## 901A1C;
background-image: -moz-linear-gradient (superior dret, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (lineal, superior dret, fons esquerre, color-stop (0, # 901A1C), color-stop (1, #FFFFFF));
background: -webkit-linear-gradient (top right, # 901A1C 0%, #ffffff 100%);
background: -o-linear-gradient (top de la dreta, # 901A1C 0%, #ffffff 100%);
background: -ms-linear-gradient (superior dret, # 901A1C 0%, #ffffff 100%);
fons: gradient lineal (part superior dreta, # 901A1C 0%, #ffffff 100%);
És possible que hàgiu notat que no hi ha filtres IE en aquest exemple. Això és degut a que IE només permet dos tipus de filtres: de dalt a baix (el valor predeterminat) i d'esquerra a dreta (amb l'opció GradientType = 1).
Vegeu aquest gradient lineal diagonal en acció amb només CSS.
03 de 04
Color s'atura
Amb gradients lineals CSS3, podeu afegir diversos colors al gradient per crear fins i tot efectes més atractius. Per afegir aquests colors, afegiu colors addicionals al final de la vostra propietat, separats per comes. Heu d'incloure on a la línia els colors també s'han d'iniciar o acabar.
Els filtres d'Internet Explorer només admeten dues parades de color, de manera que quan construïu aquest degradat, només heu d'incloure els colors primer i segon que voleu que es mostrin.
Aquí teniu el CSS per al pendent anterior de 3 colors:
antecedents: #ffffff;
background: -moz-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (lineal, superior esquerre, superior dret, color-stop (0%, # ffffff), color-stop (51%, # 901A1C), color stop (100%, #ffffff));
background: -webkit-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -o-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -ms-linear-gradient (esquerra, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
background: gradient lineal (esquerra, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Vegeu aquest gradient lineal amb tres parades de color en acció utilitzant només CSS.
04 de 04
Feu que els gradients de construcció siguin més fàcils
Hi ha dos llocs que us recomano per ajudar-vos a crear gradients, cadascun té avantatges i inconvenients, no he trobat un constructor de degradats que ho faci tot.
Generador de gradient CSS final
Aquest generador de gradients és molt popular perquè funciona de manera similar als constructors de degradats en programes com Photoshop. També m'agrada perquè et dóna totes les extensions CSS, no només Webkit i Mozilla. El problema amb aquest generador és que només admet gradients horitzontals i verticals. Si voleu fer degradats diagonals, heu d'anar a l'altre generador que recomano.
Generador de gradients CSS3
Aquest generador em va portar una mica més d'entendre que el primer, però sí que fa que canviï la direcció cap a una diagonal.
Si coneixeu un altre generador de degradats CSS que més us agradi, feu-nos-ho saber .