01 з 04
Стварэнне крос-браузерный Лінейныя шматспынавыя CSS3
лінейныя градыент
Найбольш распаўсюджаны тып градыенту вы ўбачыце лінейны градыент з двух колераў. Гэта азначае, што градыент будзе рухацца па прамой лініі паступова змяняецца ад першага колеру да другога ўздоўж гэтай лініі. Малюнак на гэтай старонцы паказвае просты левы направа градыент # 999 (цёмна-шэры) да #fff (белы).
Лінейныя градыенты прасцей за ўсё вызначыць, і маюць найбольшую падтрымку ў браўзэрах. CSS3 лінейныя градыенты падтрымліваюцца ў Android 2.3+, Chrome 1+, Firefox 3.6 +, Opera 11.1+ і Safari 4 +. Internet Explorer можна дадаць градыенты, выкарыстоўваючы фільтр і падтрымлівае іх у IE 5.5. Гэта не CSS3, але гэта варыянт для крос-браузерной сумяшчальнасці.
Пры вызначэнні градыенту неабходна вызначыць некалькі розных рэчаў:
- Які тып градыенту гэта лінейны або гэта- радыяльную
- Там, дзе градыент павінен пачаць
- Там, дзе градыент павінен спыніцца
- Якія колеру ў градыент і дзе яны павінны пачаць і спыніць
Для таго, каб вызначыць лінейныя градыенты з дапамогай CSS3, вы пішаце:
лінейны градыент (кут або бакавыя або кутняй, колер прыпынак, колер прыпынак)
- Спачатку вызначаецца тып градыенту з імем лінейнай -gradient.
- Затым неабходна вызначыць пачатковую і канчатковую кропкі градыенту ў адным з двух спосабаў: кут лініі ў градусах ад 0 да 359, пры 0 градусаў, паказваючы прама ўверх. Або праз функцыю "бакавы або кутняй», такія, як злева, справа, знізу і зверху. Гэта будзе растлумачана больш падрабязна на наступнай старонцы. Калі пакінуць гэтыя па-за, градыент будзе цячы ад верхняй часткі да ніжняй частцы элемента.
- Затым вы вызначаеце колер ступні. Вы вызначаеце колер спыняецца з кодам колеру і дадатковым адсоткам. Працэнт паведамляе браўзэру, дзе на лініі, каб пачаць або скончыць з гэтым колерам. Па змаўчанні, каб раўнамерна размясціць колеру ўздоўж лініі. Вы даведаецеся больш аб колеры спыняецца на старонцы 3.
Такім чынам, каб вызначыць вышэй градыент з дапамогай CSS3, вы пішаце:
лінейны градыент (злева, # 999999 0%, #ffffff 100%);
І усталяваць яго ў якасці фону ў DIV вы пішаце:
DIV {
Фонавы малюнак: лінейны градиент- (злева, # 999999 0%, #ffffff 100%;
}
Пашырэння браўзэра для CSS3 лінейных градыент
Каб атрымаць градыент для працы кроса-браўзэра, вам трэба выкарыстоўваць пашырэнне браўзэра для большасці браўзэраў і фільтр для Internet Explorer 9 і больш нізкага (фактычна 2 фільтра). Усе яны прымаюць адны і тыя ж элементы, каб вызначыць ваш градыент (акрамя таго, што можна вызначыць толькі 2-каляровыя градыенты ў IE).
Microsoft Фільтры і пашырэнне -Інтэрнэт Explorer , з'яўляецца найбольш складанай для падтрымкі, таму што вам патрэбныя тры розныя лініі для падтрымкі розных версій браўзэра. Для таго, каб атрымаць вышэй шэрага да белага градыенту можна было б напісаць:
/ * IE 5.5-7 * /
Фільтр: ProgID: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# FFFFFF', GradientType = 1);
/ * IE 8-9 * /
-MS-фільтр: "ProgID: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# FFFFFF', GradientType = 1)";
/ * IE 10 * /
-MS-лінейны градыент (злева, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- пашырэнне працуе як ўласцівасці CSS3, толькі з -moz- пашырэннем. Для таго, каб атрымаць вышэй градыент для Firefox, напісаць:
-moz-лінейны градыент (злева, # 999999 0%, #ffffff 100%);
Opera Extension -The -O- пашырэнне дадае градыенты Opera 11.1+. Каб атрымаць градыент вышэй, напісаць:
-o-лінейны градыент (злева, # 999999 0%, #ffffff 100%);
WebKit Extension -The -webkit- пашырэнне працуе шмат як ўласцівасці CSS3. Для таго, каб вызначыць вышэй градыент для Safari або Chrome 5.1 + 10+ Вы пішаце:
-webkit-лінейны градыент (злева, # 999999 0%, #ffffff 100%);
Існуе таксама старая версія пашырэння Webkit, які працуе з Chrome 2 + і Safari 4 +. У ім можна вызначыць тып градыенту ў якасці значэння, а не ў імя ўласцівасці. Для таго, каб атрымаць ад шэрага да белага градыенту з гэтым пашырэннем, напісаць:
-webkit-градыент (лінейны, левы верхні, правы верхні, колер-стоп (0%, # 999999), колер-стоп (100%, # FFFFFF));
Поўны CSS3 Linear Gradient CSS код
Для поўнай падтрымкі крос-браўзэр, каб атрымаць шэры колер на белы градыент вышэй варта спачатку ўключыць аднакаляровы рэзервовы для браўзэраў, якія не падтрымліваюць градыенты, а апошні павінен быць стыль CSS3 для браўзэраў, якія цалкам сумяшчальныя. Такім чынам, вы пішаце:
фон: # 999999;
фон: -moz-лінейны градыент (злева, # 999999 0%, #ffffff 100%);
фон: -webkit-градыент (лінейны, левы верхні, правы верхні, колер-стоп (0%, # 999999), колер-стоп (100%, # FFFFFF));
фон: -webkit-лінейны градыент (злева, # 999999 0%, #ffffff 100%);
фон: -o-лінейны градыент (злева, # 999999 0%, #ffffff 100%);
фон: -MS-лінейны градыент (злева, # 999999 0%, #ffffff 100%);
Фільтр: ProgID: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# FFFFFF', GradientType = 1);
-MS-фільтр: ProgID: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# FFFFFF', GradientType = 1);
фон: лінейны градиент- (злева, # 999999 0%, #ffffff 100%);
Старонкі, у дадзеным кіраўніцтве растлумачыць часткі градыенту больш падрабязна, а апошняя старонка ўказвае вам інструмент, які з'яўляецца выдатным спосабам для стварэння CSS3 градыентаў аўтаматычна.
Глядзіце гэты лінейны градыент у дзеянні, выкарыстоўваючы толькі CSS.
02 з 04
Стварэнне дыяганальныя градыент-Кут градыенту
Пункту пачатку і прыпынку вызначыць кут градыенту. Большасць лінейных градыентаў з'яўляюцца зверху ўніз або злева направа. Але можна пабудаваць градыент, які рухаецца па дыяганалі. Малюнак на гэтай старонцы паказвае просты градыент, які рухаецца ў 45degree кут на малюнку справа налева.
Куткі для вызначэння градыенту лініі
Кут лініі на ўяўнай акружнасці ў цэнтры элемента. 0deg паказвае ўверх, 90deg пункту направа, 180deg паказвае ўніз, і 270deg паказвае налева. Вы можаце задаць любы кут ад 0 да 359 градусаў.
Варта адзначыць, што ў квадраце, кут 45 градусаў перамяшчаецца з верхняга левага кута ў ніжні правы кут, але ў прамавугольніку пачатковыя і канчатковыя кропкі трохі за межамі формы, як вы можаце бачыць на малюнку.
Больш распаўсюджаны спосаб вызначыць Дыяганальны градыент, каб вызначыць кут, напрыклад, у правым верхнім куце і градыент будзе рухацца ад гэтага кута да супрацьлеглага кута. Вы можаце вызначыць пачатковую постион з наступнымі ключавымі словамі:
- топ
- права
- дно
- злева
- цэнтр
І яны могуць быць аб'яднаныя, каб быць больш канкрэтным, такія як:
- верхні правы
- верхні левы
- верхняя кропка
- унізе справа
- унізе злева
- ніжні цэнтр
- правы цэнтральны
- левы цэнтральны
Вось CSS для градыенту падобны на намаляванага на малюнку, чырвоны белы пераход ад верхняга правага кута ў ніжні левы:
фон: ## 901A1C;
Фонавы малюнак: -moz-лінейны градыент (правая верхнія, # 901A1C 0%, # FFFFFF 100%);
Фонавы малюнак: -webkit-градыент (лінейны, правы верхні, левы знізу, колер-стоп (0, # 901A1C), колер-стоп (1, #FFFFFF));
фон: -webkit-лінейнага градыенту (правы верхні, # 901A1C 0%, #ffffff 100%);
фон: -o-лінейнага градыенту (правы верхні, # 901A1C 0%, #ffffff 100%);
фон: -MS-лінейны градыент (правая верхнія, # 901A1C 0%, #ffffff 100%);
фон: лінейны градиент- (правы верхні, # 901A1C 0%, #ffffff 100%);
Вы, магчыма, заўважылі, што няма ніякіх фільтраў IE у гэтым прыкладзе. Гэта адбываецца таму, што IE дапускае толькі два тыпу фільтраў: зверху ўніз (па змаўчанні) і злева направа (з перамыкачом GradientType = 1).
Глядзіце гэты Дыяганальны лінейны градыент у дзеянні, выкарыстоўваючы толькі CSS.
03 з 04
колер Прыпынак
З CSS3 лінейных градыентаў, вы можаце дадаць некалькі кветак у градыент, каб стварыць яшчэ больш мудрагелістыя эфекты. Для таго, каб дадаць гэтыя колеры, можна дадаць дадатковыя колеры на канцы вашай уласнасці, падзеленых коскамі. Вы павінны ўключаць, калі на лініі колер павінен пачынацца ці скончвацца, а таксама.
Internet Explorer фільтры падтрымліваюць толькі два колеры спыняецца, таму, калі вы будуеце гэты градыент, вы павінны ўключаць у сябе толькі першы і другі колеру, якія вы хочаце адлюстраваць.
Вось CSS для прыведзенага вышэй 3-каляровага градыенту:
фон: #ffffff;
фон: -moz-лінейны градыент (злева, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
фон: -webkit-градыент (лінейны, левы верхні, правы верхні, колер-стоп (0%, # FFFFFF), колер-стоп (51%, # 901A1C), колер-стоп (100%, # FFFFFF));
фон: -webkit-лінейны градыент (злева, #ffffff 0%, # 901A1C 51%, # FFFFFF 100%);
фон: -o-лінейны градыент (злева, #ffffff 0%, # 901A1C 51%, # FFFFFF 100%);
фон: -MS-лінейны градыент (злева, #ffffff 0%, # 901A1C 51%, # FFFFFF 100%);
Фільтр: ProgID: DXImageTransform.Microsoft.gradient (startColorstr = '# FFFFFF', endColorstr = '# FFFFFF', GradientType = 1);
фон: лінейны градиент- (злева, #ffffff 0%, # 901A1C 51%, # FFFFFF 100%);
Глядзіце гэты лінейны градыент з трыма каляровымі прыпынкамі ў дзеянні, выкарыстоўваючы толькі CSS.
04 з 04
Зрабіць Будаўніцтва градыент Лягчэй
Ёсць два месцы, якія я рэкамендую, каб дапамагчы Вам пабудаваць градыенты, кожны з іх мае свае перавагі і недахопы ў іх, я не знайшоў градыент будаўніка, які робіць усё яшчэ.
Канчатковы Gradient Generator CSS
Гэты градыент генератар вельмі папулярны, паколькі ён выконвае такім жа чынам, каб градыент будаўнікоў у праграмах, як Photoshop. Мне таксама падабаецца гэта, таму што гэта дае вам усё пашырэння CSS, а не толькі Webkit і Mozilla. Праблема з гэтым генератарам з'яўляецца тое, што ён падтрымлівае толькі гарызантальныя і вертыкальныя градыенты. Калі вы хочаце зрабіць дыяганальныя градыенты, вы павінны пайсці ў іншы генератар рэкамендую.
Градыент генератар CSS3
Гэты генератар узяў мяне крыху больш часу, каб зразумець, чым першы, але ён падтрымлівае змены кірунку на дыяганаль.
Калі вы ведаеце іншы CSS Gradient Generator , які вам падабаецца лепш , чым гэта, калі ласка , паведаміце нам аб гэтым .