01an de 04
Kreante Kruc-Foliumilo Linearaj Gradientoj kun CSS3
Linearaj Gradientoj
La plej ofta speco de gradiento vi vidos estas linea gradiento de du koloroj. Ĉi tio signifas, ke la gradiento moviĝos en rekta linio ŝanĝante laŭgrade de la unua koloro al la dua laŭ tiu linio. La bildo sur ĉi tiu paĝo montras simplan maldekstran dekstran gradienton de # 999 (malhelgriza) al #fff (blanka).
Linearaj gradientoj estas la plej facilaj por difini, kaj havas la plej subtenon en retumiloj. CSS3 linearaj gradientoj estas subtenataj en Android 2.3+, Chrome 1+, Firefox 3.6 +, Opero 11.1 +, kaj Safaro 4+. Internet Explorer povas aldoni gradientojn uzante filtrilon kaj subtenas ilin reen al IE 5.5. Ĉi tio ne estas CSS3, sed ĝi estas eblo por kruc-retumilo kongruo.
Kiam vi difinas gradienton vi devas difini plurajn malsamajn aferojn:
- Kiu tipo de gradiento estas lineara aŭ radial
- Kie la gradiento komenciĝu
- Kie la gradiento devus halti
- Kiuj koloroj estas en la gradiento kaj kie ili devas komenci kaj halti
Difini linearajn gradientojn uzante CSS3, vi skribas:
lineara-gradiente ( angulo aŭ flanko aŭ angulo , kolora halto , kolora halto )
- Unue vi difinas la tipon de gradiento kun la nomo lineara -gradient.
- Tiam vi difinas la komencon kaj haltigas punktojn de la gradiento en unu el du manieroj: la angulo de la linio en gradoj de 0 ĝis 359, kun 0 gradoj montrante rekte supren. Aŭ kun la "flanko aŭ angulo" funkcio, kiel maldekstre, dekstra, malsupre kaj supre. Ĉi tiuj estos klarigitaj pli detale pri la sekva paĝo. Se vi foriras ĉi tiujn, la gradiento fluos de supre ĝis la fundo de la elemento.
- Tiam vi difinas la koloron ĉesas. Vi difinas la koloron ĉesas kun la kolora kodo kaj laŭvola procento. La procento diras al la retumilo, kie sur la linio komenci aŭ fini kun tiu koloro. La defaŭlto estas meti la kolorojn egale laŭ la linio. Vi lernos pli pri koloraj haltigoj sur paĝo 3.
Do, por difini la supre gradienton kun CSS3, vi skribas:
lineara-gradiente (maldekstre, # 999999 0%, #ffffff 100%);
Kaj starigi ĝin kiel fonon de DIV vi skribas:
div {
fono-bildo: lineara-gradiente (maldekstre, # 999999 0%, #ffffff 100%;
}
Foliumilo Etendoj por CSS3 Linearaj Gradientoj
Por ke via gradiento funkciu transversa retumilo, vi devas uzi retumilojn por plej multaj foliumiloj kaj filtrilo por Interreto Explorer 9 kaj pli malalta (efektive 2 filtriloj). Ĉiuj ĉi tiuj prenas la samajn elementojn por difini vian gradienton (krom ke vi povas nur difini 2-kolorajn gradientojn en IE).
Microsoft Filtriloj kaj Etendo -Internet Explorer estas la plej malfacila subteno, ĉar vi bezonas tri malsamajn liniojn por subteni la malsamajn retumilojn. Por akiri la supre grizan al blanka gradiento vi skribus:
/ * IE 5.5-7 * /
filtrilo: 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-lineara-gradiente (maldekstre, # 999999 0%, #ffffff 100%);
Mozilla Etendo- La -moz- etendo funkcias kiel la CSS3-posedaĵo, nur kun la -moz-etendo. Por ricevi la supran gradienton por Firefox, skribu:
-moz-lineara-gradiente (maldekstre, # 999999 0%, #ffffff 100%);
Opero-Etendo- La -o-etendo aldonas gradientojn al Opero 11.1 +. Por akiri la supre gradienton, skribu:
-o-lineara-gradiente (maldekstre, nombro 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit- etendo funkcias multe kiel la CSS3-proprieto. Por difini la supre gradienton por Safaro 5.1 + aŭ Chrome 10+ vi skribas:
-vola-linio-gradiente (maldekstre, nombro 999999 0%, #ffffff 100%);
Ankaŭ ekzistas pli malnova versio de la etendo de Webkit, kiu funkcias kun Chrome 2+ kaj Safari 4+. En ĝi vi difinas la tipon de gradiento kiel valoro, anstataŭ en la propra nomo. Por akiri la grizan blankan gradienton kun ĉi tiu etendo, skribu:
-kvanto-gradiento (lineara, maldekstra supro, dekstra supro, kolor-haltigo (0%, nombro 999999), kolor-haltigo (100%, # ffffff));
Plena CSS3 Lineara Gradienta CSS-Kodo
Por kompleta kruc-retumila subteno akiri la grizan blankan gradienton super vi devus unue inkluzivi flankan solidan koloron por retumiloj, kiuj ne subtenas gradientojn, kaj la lasta ero devus esti la CSS3-stilo por retumiloj, kiuj plene konsentas. Do vi skribas:
fono: # 999999;
fono: -moz-lineara-gradiente (maldekstre, # 999999 0%, #ffffff 100%);
fono: -webkit-gradient (lineara, maldekstra supro, dekstra supro, koloro-haltigo (0%, nombro 999999), kolor-haltigo (100%, # ffffff));
fono: -webkit-linear-gradient (maldekstre, # 999999 0%, #ffffff 100%);
fono: -o-lineara-gradiente (maldekstre, # 999999 0%, #ffffff 100%);
fono: -ms-lineara-gradiento (maldekstre, # 999999 0%, #ffffff 100%);
filtrilo: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
fono: lineara-gradiente (maldekstre, # 999999 0%, #ffffff 100%);
La sekvantaj paĝoj en ĉi tiu lernilo klarigas la partojn de gradiento pli detale, kaj la lasta paĝo montras al vi ilon, kiu estas bonega maniero por krei CSS3-gradientojn aŭtomate.
Vidu ĉi tiun linean gradienton en agado uzante nur CSS.
02 de 04
Kreante Diagonalaj Gradientoj - La Angulo de la Gradiento
La punktoj de komenco kaj halto determinas la angulon de la gradiento. Plej linearaj gradientoj estas de supre al sube aŭ maldekstre dekstren. Sed eblas konstrui gradienton, kiu moviĝas sur diagonala linio. La bildo en ĉi tiu paĝo montras simplan gradienton, kiu moviĝas en 45-a angulo tra la bildo de dekstra al maldekstra.
Anguloj por difini la gradientan linion
La angulo estas linio sur imagiga rondo en la centro de la elemento. 0deg aliĝu, 90deg punktoj dekstre, 180deg punktoj malsupren, kaj 270deg punktoj maldekstre. Vi povas difini ajnan angulon de 0 ĝis 359 gradoj.
Vi devas noti, ke en kvadrato, 45 grada angulo moviĝas de la supro maldekstra angulo al la malsupra dekstra, sed en rektangulo la komenco kaj finaj punktoj estas iomete ekster la formo, kiel vi povas vidi en la bildo.
La pli komuna maniero por difini diagonala gradiento estas difini angulon, kiel supre dekstre kaj la gradiento moviĝos de tiu angulo al la kontraŭa angulo. Vi povas difini la komencan pozicion kun la jenaj ŝlosilvortoj:
- supro
- dekstre
- fundo
- maldekstra
- centro
Kaj ili povas esti kombinitaj por esti pli specifaj, kiel ekzemple:
- supre dekstre
- supro maldekstre
- supro centro
- fundo dekstre
- malsupro maldekstre
- fundo centro
- dekstra centro
- maldekstra centro
Jen la CSS por gradiente simila al la unu bildo, ruĝa al blanka movado de la supro dekstra angulo al la malsupro maldekstre:
fono: ## 901A1C;
fono-bildo: -moz-lineara-gradiente (dekstra supro, # 901A1C 0%, # FFFFFF 100%);
fono-bildo: -webkit-gradient (lineara, dekstra supro, maldekstra fundo, koloro-haltigo (0, # 901A1C), kolor-halto (1, #FFFFFF));
fono: -webkit-linear-gradient (dekstra supro, # 901A1C 0%, #ffffff 100%);
fono: -o-lineara-gradiente (dekstra supro, # 901A1C 0%, #ffffff 100%);
fono: -ms-lineara-gradiento (dekstra supro, # 901A1C 0%, #ffffff 100%);
fono: lineara-gradiente (dekstra supro, # 901A1C 0%, #ffffff 100%);
Vi eble rimarkis, ke ne ekzistas IE-filtriloj en ĉi tiu ekzemplo. Tio estas, ĉar IE nur permesas du tipojn de filtriloj: supre al sube (la defaŭlta) kaj maldekstre dekstren (kun la GradientType = 1 ŝaltilo).
Vidu ĉi diagonala lineara gradiento en ago uzante nur CSS.
03 de 04
Koloro Altaj
Kun CSS3 linearaj gradientoj, vi povas aldoni multoblajn kolorojn al via gradiento por krei eĉ pli fajnajn efikojn. Por aldoni ĉi tiujn kolorojn, vi aldonas pliajn kolorojn al la fino de via propraĵo, apartigita per komoj. Vi devus inkluzivi, kie sur la linio la koloroj devas komenciĝi aŭ fini ankaŭ.
Interretaj filtrilaj esploriloj nur subtenas du kolorojn, do kiam vi konstruas ĉi tiun gradienton, vi nur devas inkludi la unuan kaj duan koloron, kiun vi volas montri.
Jen la CSS por la supre 3-kolora gradiento:
fono: #ffffff;
fono: -moz-lineara-gradiento (maldekstre, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
fono: -webkit-gradient (lineara, maldekstra supro, dekstra supro, koloro-haltigo (0%, # ffffff), kolor-haltigo (51%, # 901A1C), kolor-halto (100%, # ffffff));
fono: -webkit-linear-gradient (maldekstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fono: -o-lineara-gradiente (maldekstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fono: -ms-lineara-gradiento (maldekstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filtrilo: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
fono: lineara-gradiente (maldekstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Vidu ĉi tiun linean gradienton kun tri koloroj en agado uzante nur CSS.
04 de 04
Faru Konstruanta Gradienton Pli Facila
Estas du lokoj, kiujn mi rekomendas por helpi vin por konstrui gradientojn, ili havas al ili profitojn kaj malfacilaĵojn, mi ne trovis gradantan konstruanton, kiu faras ĉion ankoraŭ.
Ultimate CSS Gradient Generator
Ĉi tiu gradiente generatoro estas tre populara ĉar ĝi agas simile al gradientaj konstruistoj en programoj kiel Photoshop. Mi ankaŭ ŝatas ĝin ĉar ĝi donas al vi ĉiujn CSS-etendojn, ne nur Webkit kaj Mozilla. La problemo kun ĉi tiu generatoro estas, ke ĝi nur subtenas horizontalajn kaj vertikalajn gradientojn. Se vi volas fari diagonalajn gradojn, vi devas iri al la alia generatoro, kiun mi rekomendas.
CSS3 Gradienta Generatoro
Ĉi tiu generatoro prenis min iom pli longa ol kompreni ol la unua, sed ĝi subtenas ŝanĝi la direkton al diagonalo.
Se vi scias pri alia CSS Gradient Generator, ke vi ŝatas pli bonan ol ĉi tiuj, bonvolu sciigi nin .