01 от 04
Създаване на линейни градиенти в Cross-Browser с CSS3
Линейни градиенти
Най-често срещаният тип градиент, който ще видите, е линеен градиент от два цвята. Това означава, че градиентът ще се движи по права линия, променяйки се постепенно от първия цвят към втория по тази линия. Изображението на тази страница показва прост отляво надясно градиент от # 999 (тъмно сиво) до #fff (бяло).
Линейните градиенти са най-лесни за дефиниране и имат най-голяма подкрепа в браузърите. Линейните градиенти CSS3 се поддържат в Android 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 * /
филтър: progid: DXImageTransform.Microsoft.gradient (началоColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-филтър: "progid: DXImageTransform.Microsoft.gradient (началоColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz-extension работи като собственост CSS3, само с -moz-extension. За да получите горния градиент за Firefox, напишете:
-moz-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
Opera Extension -The -o extension удължава градиентите на Opera 11.1+. За да получите горния градиент, напишете:
-о-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
Разширение за Webkit - Разширението в уеб базата работи много като собствеността на CSS3. За да определите горния градиент за Safari 5.1+ или Chrome 10+, напишете:
-webkit-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
Съществува и по-стара версия на разширението Webkit, която работи с Chrome 2+ и Safari 4+. В нея определите типа градиент като стойност, а не в името на свойството. За да получите градиента сив до бял с това разширение, напишете:
-webkit-градиент (линеен, ляв връх, десен връх, цветен стоп (0%, # 999999), цветен стоп (100%, # ffffff));
Пълен CSS3 линеен градиент CSS код
За пълна подкрепа от кръстосан браузър, за да получите градиент от сиво към бяло, първо трябва да включите резервен цвят за браузъри, които не поддържат градиенти, а последният елемент трябва да бъде CSS3 стил за браузъри, които са напълно съвместими. Така че, вие пишете:
фон: # 999999;
фон: -moz-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
фон: -webkit-градиент (линеен, ляв връх, десен връх, цветен стоп (0%, # 999999), цветен стоп (100%, # ffffff));
фон: -webkit-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
фон: -о-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
фон: -ms-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
филтър: progid: DXImageTransform.Microsoft.gradient (началоColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-филтър: progid: DXImageTransform.Microsoft.gradient (началоColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
фон: линеен градиент (вляво, # 999999 0%, #ffffff 100%);
Следващите страници в този наръчник обясняват по-подробно частите на градиента и последната страница ви насочва към инструмент, който е отличен начин за автоматично създаване на градиенти на CSS3.
Вижте този линеен градиент в действие, използвайки само CSS.
02 от 04
Създаване на диагонални градиенти - ъгълът на градиента
Началните и стоп точки определят ъгъла на градиента. Повечето линейни градиенти са от горе до долу или отляво надясно. Но е възможно да се изгради градиент, който се движи по диагонална линия. Изображението на тази страница показва прост градиент, който се движи в ъгъл от 45 градуса в изображението от дясно на ляво.
Ъгли за дефиниране на линията на градиента
Ъгълът е линията на въображаем кръг в центъра на елемента. 0deg точки, 90deg точки в дясно, 180deg точки надолу и 270deg точки вляво. Можете да дефинирате всеки ъгъл от 0 до 359 градуса.
Трябва да отбележите, че на квадрат 45 градусов ъгъл се движи от горния ляв ъгъл до долу вдясно, но в правоъгълник началните и крайните точки са малко извън формата, както можете да видите на изображението.
По-честият начин за дефиниране на диагонален градиент е да дефинирате ъгъл, като горния десен ъгъл, а градиентът ще се премести от този ъгъл в противоположния ъгъл. Можете да определите стартовата позиция със следните ключови думи:
- връх
- прав
- дъно
- наляво
- център
И те могат да бъдат комбинирани, за да бъдат по-конкретни, като например:
- горе в дясно
- горе вляво
- горе център
- долу вдясно
- долу вляво
- долу
- отдясно
- ляв център
Тук е CSS за градиент, подобен на този на снимката, червено до бяло се движи от горния десен ъгъл до долния ляв ъгъл:
background: ## 901A1C;
фон-изображение: -moz-линеен градиент (вдясно отгоре, # 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-градиент (линеен, ляв връх, десен връх, цветен стоп (0%, # ffffff), цветен стоп (51%, # 901A1C), цветен стоп (100%;
фон: -webkit-линеен градиент (ляво, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
фон: -о-линеен градиент (ляво, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
фон: -ms-линеен градиент (ляво, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
филтър: progid: DXImageTransform.Microsoft.gradient (началоColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
фон: линеен градиент (вляво, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Вижте този линеен градиент с три цветни спирки в действие, като използвате само CSS.
04 от 04
Направете градиентите на сгради по-лесни
Има два сайта, които препоръчвам да ви помагат да изграждате наклон, всеки от тях има ползи и недостатъци за тях, не съм намерил градиент строител, който прави всичко още.
Крайният генератор на градиента за CSS
Този градиент генератор е много популярен, защото изпълнява по подобен начин на градиенти строители в програми като Photoshop. Харесвам също така, защото ви дава всички разширения на CSS, а не само Webkit и Mozilla. Проблемът с този генератор е, че поддържа само хоризонтални и вертикални градиенти. Ако искате да направите диагонални наклони, трябва да отидете до другия генератор, който препоръчвам.
Графичен генератор на CSS3
Този генератор ми отне малко по-дълго, за да го разбера, отколкото първия, но подкрепя промяната на посоката към диагонал.
Ако знаете за друг генератор на градиента на CSS, който ви харесва по-добре от тези, моля, уведомете ни .