Създаване на линейни градиенти в Cross-Browser с CSS3
Линейни градиенти
Най-често срещаният тип градиент, който ще видите, е линеен градиент от два цвята. Това означава, че градиентът ще се движи по права линия, променяйки се постепенно от първия цвят към втория по тази линия. Изображението на тази страница показва прост отляво надясно градиент от # 999 (тъмно сиво) до #fff (бяло).
Линейните градиенти са най-лесни за дефиниране и имат най-голяма подкрепа в браузърите. Линейните градиенти CSS3 се поддържат в Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ и Safari 4+. Internet Explorer може да добавя градиенти с помощта на a филтър и ги поддържа обратно в 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-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-В -moz- разширение работи като CSS3 собственост, само с -moz- разширение. За да получите горния градиент за Firefox, напишете:
-moz-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
Opera Extension-В о- разширението добавя градиенти към Opera 11.1+. За да получите горния градиент, напишете:
-о-линеен градиент (вляво, # 999999 0%, #ffffff 100%);
Удължаване на Webkit-В -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, който ви харесва по-добре от тези, моля, уведомете ни.
