01 од 04
Креирање линеарни градиенти со крос-прелистувач со CSS3
Линеарни градиенти
Најчестиот тип на градиент што ќе го видите е линеарен градиент од две бои. Ова значи дека градиентот ќе се движи во права линија постепено се менува од првата боја до втората по таа линија. Сликата на оваа страница покажува едноставен летен-десен градиент од # 999 (темно сива) до #fff (бело).
Линеарни градиенти се најлесно да се дефинираат и да имаат најголема поддршка во прелистувачите. Линеарни граници на CSS3 се поддржани во Андроид 2.3 +, Chrome 1+, Firefox 3.6+, Opera 11.1+ и Safari 4+. Internet Explorer може да додаде градиенти со помош на филтер и да ги поддржува назад кон IE 5.5. Ова не е CSS3, но тоа е опција за компатибилност на прелистувачот.
Кога дефинирате градиент, треба да дефинирате неколку различни нешта:
- Каков вид градиент е линеарен или радијален
- Каде градиентот треба да започне
- Каде градиент треба да престане
- Кои бои се во градиент и каде треба да почнат и да застанат
За да дефинирате линеарни градиенти користејќи CSS3, пишувате:
линеарен градиент ( агол или странична или аголна , стоп за боја , колор станица )
- Прво го дефинирате типот на градиент со името линеарно- градиент.
- Потоа, ги дефинирате почетните и граничните точки на градиентот на еден од два начина: аголот на линијата во степени од 0 до 359, со 0 степени посочувајќи директно нагоре. Или со функцијата "страна или агол", како што се лево, десно, дното и врвот. Овие ќе бидат објаснети подетално на следната страница. Ако ги оставите овие надвор, градиент ќе тече од врвот до дното на елементот.
- Потоа дефинирате боја запира. Вие дефинирате боја запира со кодот на бојата и опционален процент. Процентот му кажува на прелистувачот каде што на линија да почне или завршува со таа боја. Стандардно е да се постават боите рамномерно по должината на линијата. Ќе дознаете повеќе за запирање на боја на страница 3.
Значи, за да го дефинирате горниот градиент со CSS3, пишувате:
линеарен градиент (лево, # 999999 0%, #ffffff 100%);
И да го поставите како позадина на DIV пишувате:
div {
позадина-слика: линеарен градиент (лево, # 999999 0%, #ffffff 100%;
}
Екстензии за прелистувачи за CSS3 Линеарни градиенти
За да добиете вашиот градиент да работи со крос-прелистувач, треба да користите екстензии на прелистувачи за повеќето прелистувачи и филтер за Internet Explorer 9 и пониски (всушност 2 филтри). Сите овие ги земаат истите елементи за да го дефинираат вашиот градиент (освен што можете само да ги дефинирате градиентите со 2 бои во IE).
Microsoft Filters и Extension- Internet Explorer е најтешко да се поддржат, бидејќи ви се потребни три различни линии за поддршка на различни верзии на прелистувачот. За да го добиете погоре сивото до бело градиент, напишете:
/ * IE 5.5-7 * /
филтер: проследен: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * ИЕ 8-9 * /
-ms-filter: "проследен: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-линеарен градиент (лево, # 999999 0%, #ffffff 100%);
Продолжување на Mozilla -Moz-продолжувањето функционира како својство CSS3, само со проширувањето -moz-. За да го добиете горниот градиент за Firefox, напишете:
-моз-линеарен градиент (лево, # 999999 0%, #ffffff 100%);
Opera Extension -The -o--extension додава градиенти во Opera 11.1+. За да го добиете горниот градиент, напишете:
-о-линеарен градиент (лево, # 999999 0%, #ffffff 100%);
Продолжување на Webkit -Webkit-продолжувањето работи многу слично на CSS3 имотот. За да го дефинирате горниот градиент за Safari 5.1+ или Хром 10 + пишувате:
-webkit-линеарен градиент (лево, # 999999 0%, #ffffff 100%);
Исто така постои и постара верзија на екстензија Webkit која работи со Chrome 2+ и Safari 4+. Во него ќе го дефинирате типот на градиент како вредност, наместо во името на имотот. За да го добиете сиво-белиот градиент со оваа екстензија, напишете:
-webkit-gradient (линеарен, лево, десно, боја-стоп (0%, # 999999), боја-стоп (100%, # ffffff));
Целосен CSS3 линеарен градиент CSS код
За целосна поддршка од по-прелистувачот за да се добие сиво-белиот градиент погоре, прво треба да вклучите цврста боја за резервите кои не поддржуваат градиенти, а последната ставка треба да биде стил на CSS3 за прелистувачи кои се во целосна согласност. Значи, пишуваш:
позадина: # 999999;
позадина: -моз-линеарен-градиент (лево, # 999999 0%, #ffffff 100%);
позадина: -webkit-gradient (линеарна, лева врвот, десен врв, боја-стоп (0%, # 999999), боја-стоп (100%, # ffffff));
позадина: -webkit-линеарен градиент (лево, # 999999 0%, #ffffff 100%);
позадина: -о-линеарен градиент (лево, # 999999 0%, #ffffff 100%);
позадина: -ms-линеарен градиент (лево, # 999999 0%, #ffffff 100%);
филтер: проследен: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
позадина: линеарен градиент (лево, # 999999 0%, #ffffff 100%);
Следните страници во ова упатство подетално ги објаснуваат деловите на градиентот, а последната страница ве посочува на алатка која е одличен начин за автоматски да креира граници на CSS3.
Погледнете го овој линеарен градиент во акција користејќи само CSS.
02 од 04
Создавање дијагонални градиенти - Агол на градиент
Почетните и граничните точки го одредуваат аголот на градиентот. Повеќето линеарни градиенти се од врвот до дното или од лево надесно. Но, можно е да се изгради градиент кој се движи на дијагонална линија. Сликата на оваа страница покажува едноставен градиент кој се движи во 45-часовен агол низ сликата од десно кон лево.
Агли за дефинирање на линијата на градиент
Аголот е линија на имагинарен круг во центарот на елементот. 0deg поени, 90deg поени десно, 180deg поени надолу, и 270deg поени лево. Можете да дефинирате кој било агол од 0 до 359 степени.
Треба да забележите дека на квадрат, аголот од 45 степени се движи од горниот лев агол до долниот десен, но во правоаголник, почетната и крајна точка се малку надвор од обликот, како што можете да видите на сликата.
Почестиот начин да се дефинира дијагонален градиент е да се дефинира агол, како што е горниот десен а градиентот ќе се движи од тој агол до спротивниот агол. Можете да го дефинирате стартниот резултат со следните клучни зборови:
- врв
- право
- дното
- лево
- центар
И тие можат да се комбинираат за да бидат поспецифични, како што се:
- горниот десен
- горе лево
- врвен центар
- долу десно
- долу лево
- долниот центар
- десен центар
- левиот центар
Тука е CSS за градиент сличен на оној на сликата, црвено-бело движење од горниот десен агол до долниот лев агол:
позадина: ## 901A1C;
позадина-слика: -моз-линеарен-градиент (десен врв, # 901A1C 0%, # FFFFFF 100%);
позадина-слика: -webkit-градиент (линеарен, десен, лев дното, боја-стоп (0, # 901A1C), боја-стоп (1, #FFFFFF));
позадина: -webkit-линеарен-градиент (десен врв, # 901A1C 0%, #ffffff 100%);
позадина: -о-линеарен градиент (десен врв, # 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-gradient (линеарен, лев врв, десен врв, боја-стоп (0%, # ffffff), боја-стоп (51%, # 901A1C), боја-стоп (100%, # ffffff);
позадина: -webkit-линеарен градиент (лево, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
позадина: -о-линеарен градиент (лево, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
позадина: -ms-линеарен градиент (лево, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
филтер: проследен: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
позадина: линеарен градиент (лево, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Погледнете го овој линеарен градиент со три застанувања во боја во акција со користење на само CSS.
04 од 04
Направи ја градиентската конструкција полесна
Постојат две локации што ги препорачувам за да ви помогнам да изградите наклони, тие имаат придобивки и недостатоци за нив, не сум нашол градиент градител кој сè уште прави сè.
Ultimate CSS градиент генератор
Овој градиент генератор е многу популарен поради тоа што врши на сличен начин на gradient градители во програми како Фотошоп. Исто така ми се допаѓа, бидејќи ви ги дава сите CSS екстензии, не само Webkit и Mozilla. Проблемот со овој генератор е тоа што поддржува само хоризонтални и вертикални градиенти. Ако сакате да направите дијагонални градиенти, мора да отидете на другиот генератор што го препорачувам.
CSS3 градиент генератор
Овој генератор ми требаше малку подолго за да разберам од првиот, но тоа го поддржува менувањето на насоката на дијагонала.
Ако знаете за друг CSS Gradient Generator кој ви се допаѓа подобро од овие, ве молиме да ги известите .