01 од 04
Креирање Цросс-Бровсер линеарних градијента са ЦСС3
Линеарни нагиби
Најчешћи тип градијента који ћете видети је линеарни градијент две боје. То значи да се градијент креће у праву линију која се постепено мења од прве боје до друге дуж те линије. Слика на овој страници показује једноставан градјевент од # 999 (тамно сива) до #ффф (бела).
Линијски градијенти најлакше се дефинишу и имају највећу подршку у претраживачима. Линијски градијенти ЦСС3 подржани су у Андроид 2.3+, Цхроме 1+, Фирефок 3.6+, Опера 11.1+ и Сафари 4+. Интернет Екплорер може додати градијенте помоћу филтера и подржава их назад на ИЕ 5.5. Ово није ЦСС3, али то је опција за компатибилност унакрсног претраживача.
Када дефинишете градијент, потребно је дефинисати неколико различитих ствари:
- Какав тип градијента је линеарни или радијални
- Тамо где би градијент требао започети
- Где би градијент требао престати
- Које боје су у градијенту и где би требало да започну и зауставе
Да бисте дефинисали линеарне градијенте користећи ЦСС3, пишете:
линеарни градијент ( угао или бочни или угао , заустављање боје, заустављање боје )
- Прво дефинишете врсту градијента са називом линеарно- градијент.
- Затим дефинишете почетну и зауставном тачку градијента на један од два начина: угао линије у степенима од 0 до 359, са 0 ступњева који показују право нагоре. Или са функцијом "бочни или угао", као што су леви, десни, доњи и горњи. Ово ће бити детаљније објашњено на следећој страници. Ако ово напустите, градијент ће проћи од врха до дна елемента.
- Затим дефинишете прекид боје. Дефинишете прекид боје с кодом боје и опционим процентом. Проценат говори прегледачу где је на линији да почне или завршава са том бојом. Подразумевано је да се боје постављају једнако дуж линије. Више ћете сазнати о заустављању боја на страници 3.
Дакле, да бисте дефинисали горњи градијент са ЦСС3, пишете:
линеарни градијент (лево, # 999999 0%, #фффффф 100%);
И да га поставите као позадину ДИВ-а, пишете:
див {
бацкгроунд-имаге: линеар-градиент (лево, # 999999 0%, #фффффф 100%;
}
Бровсер Ектенсионс за ЦСС3 Линеарне нагибе
Да би ваш градијент функционисао у унакрсном претраживачу, потребно је да користите проширења претраживача за већину прегледача и филтер за Интернет Екплорер 9 и нижу (заправо 2 филтера). Све ово узима исте елементе да дефинишу свој градијент (осим што можете дефинисати само градове са 2 боје у ИЕ-у).
Мицрософт Филтерс и Ектенсион-Интернет Екплорер су највећи изазов за подршку, јер су вам потребне три различите линије за подршку различитим верзијама претраживача. Да бисте добили изнад сивог на бијели градијент, писали бисте:
/ * ИЕ 5.5-7 * /
филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# 999999', ендЦолорстр = '# фффффф', ГрадиентТипе = 1);
/ * ИЕ 8-9 * /
-мс-филтер: "прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# 999999', ендЦолорстр = '# фффффф', ГрадиентТипе = 1)";
/ * ИЕ 10 * /
-мс-линеарни градијент (лево, # 999999 0%, #фффффф 100%);
Мозилла Ектенсион -Тхе -моз- продужетак функционише као ЦСС3 својство, само код -моз- продужетка. Да бисте добили горњи градијент за Фирефок, напишите:
-моз-линеар-градијент (лево, # 999999 0%, #фффффф 100%);
Опера Ектенсион -Тхе -о- екстензија додаје градијенте у Опера 11.1+. Да бисте добили горњи градијент, напишите:
-о-линеарни градијент (лево, # 999999 0%, #фффффф 100%);
Вебкит Ектенсион- Тхе -вебкит-ектенсионс функционише много слично као ЦСС3 својство. Да бисте дефинисали горњи градијент за Сафари 5.1+ или Цхроме 10+, упишите:
-вебкит-линеар-градиент (лево, # 999999 0%, #фффффф 100%);
Постоји и старија верзија Вебкит екстензије која ради са Цхроме 2+ и Сафари 4+. У њему дефинишете врсту градијента као вриједност, а не у имену својства. Да бисте добили сивог до бијелог градијента са овим екстензијом, напишите:
-вебкит-градијент (линеарно, лево, десно, бар-стоп (0%, # 999999), боја стоп (100%, # фффффф));
Пуни ЦСС код ЦСС3 Линеар Градиент
За потпуну подршку преко унакрсног претраживача да бисте добили сиву до бијелу градијенту изнад најпре треба прво укључити солидну боју за прегледаче који не подржавају градијенте, а последња ставка би требала бити ЦСС3 стил за прегледаче који су у потпуности усклађени. Дакле, ви пишете:
позадина: # 999999;
бацкгроунд: -моз-линеар-градиент (лево, # 999999 0%, #фффффф 100%);
бацкгроунд: -вебкит-градиент (линеарно, лево, десно, бар-стоп (0%, # 999999), боја-стоп (100%, # фффффф));
бацкгроунд: -вебкит-линеар-градиент (лево, # 999999 0%, #фффффф 100%);
позадина: -о-линеарни-градијент (лево, # 999999 0%, #фффффф 100%);
позадина: -мс-линеарни градијент (лево, # 999999 0%, #фффффф 100%);
филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# 999999', ендЦолорстр = '# фффффф', ГрадиентТипе = 1);
-мс-филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# 999999', ендЦолорстр = '# фффффф', ГрадиентТипе = 1);
позадина: линеарни градијент (лево, # 999999 0%, #фффффф 100%);
Наредне странице овог водича детаљније објашњавају делове градијента, а последња страница вас упућује на алат који је одличан начин стварања градијента ЦСС3 аутоматски.
Погледајте овај линеарни градијент у акцији користећи само ЦСС.
02 од 04
Стварање дијагоналних нагиба - Угао градијента
Тачке старта и стопа одређују угао нагиба. Већина линеарних градијентова је одозго према доље или одоздо на десно. Али могуће је направити градијент који се креће на дијагоналној линији. Слика на овој страници показује једноставан градијент који се помера у 45дегрее угао преко слике с десне на лево.
Углови за дефинисање линије градијента
Угао је линија на имагинарном кругу у центру елемента. 0дег поена, 90дег поена десно, 180дег поена и 270дег поена на лево. Можете дефинирати било који угао од 0 до 359 степени.
Треба да запамтите да се на квадрату угао од 45 степени помера од горњег левог угла до доње десне стране, али у правоугаонику почетне и крајње тачке су незнатно изван облика, као што видите на слици.
Најчешћи начин дефинисања дијагоналног градијента је дефинисање угла, као што је горњи десни, а градијент ће се померити из тог угла у супротан угао. Почетни положај можете дефинисати са следећим кључним ријечима:
- врх
- јел тако
- дно
- лево
- центар
И могу се комбиновати да буду специфичнији, као што су:
- Горе десно
- горе лево
- врх центра
- доле десно
- Доњи леви
- доњи центар
- центар
- леви центар
Ево ЦСС-а за градијент сличан оном на слици, црвено-бело креће се од горњем десном углу до доње лево:
позадина: ## 901А1Ц;
бацкгроунд-имаге: -моз-линеар-градиент (десно горе, # 901А1Ц 0%, # ФФФФФФ 100%);
бацкгроунд-имаге: -вебкит-градиент (линеарни, десни врх, лево дно, боја-стоп (0, # 901А1Ц), боја-стоп (1, #ФФФФФФ));
бацкгроунд: -вебкит-линеар-градиент (десно, # 901А1Ц 0%, #фффффф 100%);
позадина: -о-линеарни-градијент (десни врх, # 901А1Ц 0%, #фффффф 100%);
позадина: -мс-линеарни градијент (десни врх, # 901А1Ц 0%, #фффффф 100%);
позадина: линеарни градијент (десни врх, # 901А1Ц 0%, #фффффф 100%);
Можда сте приметили да у овом примеру нема филтера ИЕ. То је зато што ИЕ дозвољава само двије врсте филтера: одоздо на дно (подразумевано) и одоздо према десно (са преклопником ГрадиентТипе = 1).
Погледајте овај дијагонални линеарни градијент у акцији користећи само ЦСС.
03 од 04
Цолор Стопс
Са линеарним градијентима ЦСС3, можете додати више боја вашем градијенту како бисте створили чак и радије ефекте. Да бисте додали ове боје, додате додатне боје до краја своје имовине, раздвојене заповијима. Требали бисте укључити гдје би се на линији требале почети и завршити боје.
Филтери Интернет Екплорера подржавају само две боје, тако да када направите овај градијент, требало би да укључите само прву и другу боју коју желите да прикажете.
Ево ЦСС-а за горњи тродимензионални градијент:
бацкгроунд: #фффффф;
бацкгроунд: -моз-линеар-градиент (лево, #фффффф 0%, # 901А1Ц 51%, #фффффф 100%);
бацкгроунд: -вебкит-градиент (линеарно, лево, десно, бар-стоп (0%, # фффффф), боја-стоп (51%, # 901А1Ц), боја стоп (100%, # фффффф));
бацкгроунд: -вебкит-линеар-градиент (лево, #фффффф 0%, # 901А1Ц 51%, # фффффф 100%);
позадина: -о-линеарни-градијент (лево, #фффффф 0%, # 901А1Ц 51%, # фффффф 100%);
позадина: -мс-линеарни градијент (лево, #фффффф 0%, # 901А1Ц 51%, # фффффф 100%);
филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = '# фффффф', ендЦолорстр = '# фффффф', ГрадиентТипе = 1);
позадина: линеарни градијент (лево, #фффффф 0%, # 901А1Ц 51%, # фффффф 100%);
Погледајте овај линеарни градијент са три боје заустављања у раду помоћу само ЦСС-а.
04 од 04
Изградите градијенте лакше
Постоје две локације које вам препоручујем да вам помогну да градите градијент, сваки од њих има користи и недостатке за њих, нисам нашао градитеља градитеља који све чини све.
Ултимате ЦСС Градијент Генератор
Овај градијент генератор је веома популаран јер на сличан начин врши градитеље градитеља у програмима као што је Пхотосхоп. Такође ми се свиђа јер вам пружа све ЦСС проширења, не само Вебкит и Мозилла. Проблем са овим генератором је то што подржава само хоризонталне и вертикалне градијенте. Ако желите да направите дијагоналне нагибе, морате ићи на други генератор који препоручујем.
ЦСС3 Градијент Генератор
Овај генератор ми је требао мало више да разумем од првог, али подржава промену смера на дијагоналу.
Ако знате други ЦСС градијент генератор који вам се допада боље од овога, молимо вас да нас обавијестите .