CSS3 линейни градиенти [CSS3 Съвети]
градиент е страхотно допълнение към цветовете в CSS3. Вместо да добавяме само един цвят, сега можем да добавим няколко цветови комбинации в един блок за деклариране, без да разчитаме на изображения, които биха могли да намалят HTTP заявката в нашия уебсайт, позволявайки по-бързо зареждане на сайта..
Ако сте играли с градиенти в CSS3, вероятно сте запознати с двата метода: радиален и линеен градиент. Днешният пост ще бъде за последния.
Създаване на градиенти
Тъй като спецификацията казва градиентите в CSS3 е изображение, то няма специален имот, подобно на друго ново допълнение, така че е декларирано, че използва фон изображение вместо това.
Ако погледнем пълния синтаксис за градиента, той изглежда малко претрупан, което може да доведе до объркване за някои хора.
div background-image: -webkit-линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%); background-image: -moz-линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%); background-image: -ms-линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%); background-image: -о-линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%); background-image: линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%);
Така че нека да копаем във всяка част от синтаксиса един по един, за да направим нещата по-ясни.
На първо място, линейният градиент се декларира с линеен градиент () функция. Функцията има три основни стойности. Първата стойност определя началната позиция на градиента. Можете да използвате описателна ключова дума, като връх за да започне градиента, който тече от връх;
div background-image: линеен градиент (отгоре, # FF5A00, # FFAE00);
Фрагментът по-горе е официалната версия от W3C за създаване на градиенти. Това всъщност е по-просто и доста очевидно и също така ще създаде следния градиент.
Можете също да използвате дъно да направим обратното, или иначе прав и наляво.
Можем също така да използваме диагонален градиент ъгъл като начална позиция на градиента. Ето един пример:
div background-image: линеен градиент (45deg, # FF5A00, # FFAE00);
Отрязъкът по-горе ще създаде следния градиент на цветовете:
Втората стойност на функцията ще покаже първи цвят информация и нейната стоп позиция което е посочено в проценти. Позицията на спиране всъщност е по избор; браузърът е достатъчно умен, за да определи правилната позиция, така че когато не определим първия цвят, браузърът ще отнеме 0% по подразбиране.
И следващата стойност е втори цвят комбинация. Работи като предишната стойност, само ако е последният прилаган цвят и не сме посочили стоп позиция, стойност от 100% ще се приема като стандартно. Сега, да видим примера по-долу:
div background-image: линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%);
Фрагментът по-горе ще създаде градиент като това, което видяхме по-рано (няма разлика), но сега определяме позицията за спиране на цвета;
Сега да променим цветно спиране, и този път ще уточним 50% за първия цвят и 51% за втория цвят и да видим как се оказва;
div background-image: линеен градиент (отгоре, # FF5A00 50%, # FFAE00 51%);
прозрачност
Създаване прозрачност в градиент също е възможно. За да създадете ефекта, трябва да преведем цвета магия в RGBA режим и понижете алфа канала.
div background-image: линеен градиент (отгоре, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Фрагментът по-горе ще намали интензитета на цвета с 20%, и наклонът ще се получи така:
Множество цветове
Ако искате да добавите още цветове, просто добавете цветовете до други с разделител със запетая и оставете браузъра да определи всяка позиция за спиране на цветовете.
div background-image: линеен градиент (отгоре, червено, оранжево, жълто, зелено, синьо, индиго, виолетово);
Фрагментът по-горе ще създаде следната дъга.
Съвместимост на браузъра
За съжаление към момента на писане всички настоящи браузъри все още не са поддържали стандартния синтаксис. Те все още се нуждаят от префикс на доставчика (-WebKit-, -Моз-, -Госпожица- и -о-). Ето защо пълният синтаксис изглежда така:
div background-image: -webkit-линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%); background-image: -moz-линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%); background-image: -ms-линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%); background-image: -о-линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%); background-image: линеен градиент (отгоре, # FF5A00 0%, # FFAE00 100%);
От друга страна, Internet Explorer, по-специално версия 9 и по-ниска, е далеч от стандарта. Градиентът в IE9 и по-долу е декларирано с филтър, така че ако искаме да добавим градиент към тези браузъри, трябва да напишем нещо подобно;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
Най- филтър има своите ограничения: първо, не позволява добавяне на повече от три цвята, а създаването на ефект на прозрачност също е малко трудно - не позволява RGBA, но IE филтър употреби #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Тук е инструмент, който ви помага да конвертирате RGBA да се #ARGB.
- Демонстрация
- Изтеглете Източник
Писане на синтаксиса по-бързо
Както можете да видите по-горе, за да се запази градиентната съвместимост между браузърите, трябва да добавим още пет реда кодове, които са неефективни.
Има много начини да направим това, за да опростим задачата; като използвате Prefix-free, Prefixr, LESS или Sass, за да компилирате кодовете, но преди всичко, препоръчваме да използвате този инструмент, ColorZilla Gradient. Този инструмент просто ще генерира всички необходими кодове за работа на градиентите във всички браузъри.
Заключителни думи
Днес обсъдихме доста при създаването на градиенти, разглеждахме всяка част от синтаксиса, създавахме прозрачни ефекти и поддържахме съвместимост с браузъра. Така че на този етап се надяваме, че вече имате по-добро разбиране по темата.
Все още има много неща, които планираме да изследваме CSS3 градиенти в бъдещите ни длъжности, така че останете на Hongkiat.com. Накрая, благодаря ви, че прочетете този пост, надяваме се, че ви хареса.
Допълнителна информация
- Bullet Proof Cross Browser RGBA фонове - Леа Веру
- CSS3 Image - W3.org
- Кога мога да използвам CSS3 Gradients - CanIUse.com
