градиенти CSS

Наклоните обикновено са съставени от един цвят, подвижен в другата, но в CSS можете да контролирате всеки аспект на процеса, от начина му на цветовете (толкова много) и преди, където няма да има промяна в тези цветове. Нека да разгледаме всички от тях.

Наклоните - фоново изображение

линеен градиент

Може би най-познатото и желания тип на градиент - линеен градиент (). координатна ос може да се движи от ляво на дясно, отгоре надолу, или от всеки ъгъл по ваш избор. Ако не претендира ъгъла, той ще бъде подразбира от горе до долу:

HTML5 и CSS3 практика от нула до резултата!

Разделени със запетая цветен дисплей-често използваните от вас цвят: Hex, наречени цветове. RGBA. hsla т.н. За да направи градиента от ляво на дясно, минава допълнителни параметри в началото на функцията, започва с думите на линейно-градиент (), се отнася до посоката, например на дясно:

Синтаксис да работят и в корнер. Например, ако имате нужда от ос градиент, като се започне от долния ляв ъгъл и ще горния десен, може да се каже до горе вдясно:

Ако блокът е квадратна, ъгълът на наклона ще бъде 45 °, но това не е така. Ако искате да се гарантира, че 45 °, е възможно да се каже:

Също така можете да се ограничава до само два цвята. Всъщност, можете да получите колкото се може повече цветове, разделени със запетаи, ако е необходимо. Ето четири:

Можете също така да се каже, когато трябва да започне всеки от отделните цветове. Това се нарича "цвят стоп". Например, ако имате нужда да жълто заемат най-много място, а червеният - доста в началото, можете да си направите цветно спре жълт доста рано:

Ние сме склонни да мислим за градиенти избледняват цветовете, но ако имате две от един и същи цвят спирка, можете да направите незабавна промяна на един цвят с друг плътен плътен цвят. Това е полезно, когато на фона на приложение в цялата височина на имитирайки високоговорителите.

Поддръжка на браузъри / префикси

Досега са се считат само новия синтаксис, но CSS градиенти доста време pobyli използвани. Те имат добра подкрепа браузър. Те стават ненадеждни в синтаксиса и представки. Browser поддържа три различни синтаксис. Официално, те не се обади, но можете да ги наричаме:

Стари: оригиналния метод, който се прилага само по отношение на WebKit, такова нещо като от () и цвят-стоп ()

Юношеството: старата система на ъгли, например, наляво

Young: прясно изпечен система на ъгли, например, на дясно

Както и представки. Да направим списък:

1-9: Стара, но с индекс

3: Подкрепа не

3.2-4.3: Teen с префикс

5.0-6.1: Young, с представката

7.0: Един млад, без префикс

Има леко се припокриват. Например, когато браузърът поддържа "най-младата" синтаксис, той може да поддържа и по-старата синтаксис, включително префикса. Най-добре е да се направи така: ако се поддържа от "млад", и неговата употреба. Така че, ако имате нужда от абсолютно най-дълбоката подкрепата на браузъра, линеен градиент ще изглежда така:

След това ужасно много код. Напиши го на ръка - това е възможни грешки и много труд. Справяне с това помага Autoprefixer. позволява да се намали броя на код, когато се реши кои браузъри, за да подкрепят. Prima техни подобни Compass е в състояние да направи URI SVG данни за IE 9, ако го направите, това е важно.

IE филтри

Internet Explorer (IE) 6-9, въпреки че той не поддържа синтаксис CSS градиент, предвижда програмен метод за създаване на фонови градиенти

Ето някои пасажи по този въпрос, за да ги прилагат или не:

филтър обикновено се смята за лош за изпълнение,

фон изображение отменя филтър, така че ако трябва да го прилага по отношение на едно алтернативно изпълнение на филтрите ще останат зад себе си. Ако, като алтернативно решение на плътен цвят (фон-цвят), можете да приложите филтър

Макар филтри работят само с шестнадесетични стойности, тя все още е възможно да се получи алфа-прозрачността чрез поставяне на префикс за прозрачността на шестнадесетична стойност с размера на 00 (0%) до FF (100%). например:

радиални градиенти

Радиални градиенти се различават от линеен, които започват в една точка и "Продължете" навън. Наклоните често се използват за симулиране на осветление, което, както знаем, не винаги се насочва, така че те могат да бъдат използвани, за да се направи още по-естествен наклон.

По подразбиране, първия цвят започва в (сърцето) на елемента и се разпада към ръба на елемента. Затихване случва в равни количества, без значение в коя посока.

Човек може да се види как това създава форма градиент-елипса като елементът не е квадрат. Това е градиента по подразбиране (с елипсата като първи параметър), но ако ние казваме, че искаме кръг, ще може да го направите:

Имайте предвид, че градиент кръг, но избледнява в цялата дължина до края на цвета до далечната страна. Ако искате този кръг е напълно вътре в клетката, един ще осигури това от какво имаме нужда от отслабване приключва до най-близката страна на най-близкото-страна, разделени със запетаи като стойността на фигурата, като този:

Тук са възможни стойности: най-близкото-кът, най-близката страна, Най-далечният ъгъл, най-отдалечената от страната. На тях можете да мислите: "Аз трябва да получите този радиален градиент избледнели от централната точка на __________, адаптира и напълни всички наоколо."

Радиални градиенти, не са по подразбиране трябва да започне в средата, може да се определи конкретна точка, като се използва най-______ като първи параметър, като този:

Аз съм тук, за да се изясни всичко, давайки пример на площада и да коригира спирката на цвят:

подкрепа браузър

По принцип същата като в линейно-градиент (), с изключение на това, когато започна подкрепа градиенти, в версия на Opera един много стар били само линейно, а не радиален. Тъй като линейна, радиално-градиент () синтаксис претърпя някои промени. И пак тук: "Old", "Юношеството" и "млади".

Стари: префикс -webkit-, неща като от () и цвят-стоп ()

Юношеството: първият вариант - място центъра. Сега напълно разбити в браузъри, които поддържат новия синтаксис не префикс, така че се уверете, че има синтаксис Teenage префикс.

Young: многословно първи параметър, тип кръг най-близо-ъгъл в горния десен ъгъл

Отново ще си позволя да се справят с него Autoprefixer. Ти си в напълно нов синтаксис, това прави алтернативи. Радиални градиенти, са по-неясни от линейно, така че аз ви съветвам да се задоволи с последната версия на синтаксиса и да продължи да работи с него (и ако е необходимо, забравете всичко, което знаете за стария синтаксис).

повтарящи се наклони

Ние повтаряща се наклони леко по-малко подкрепа браузър. Те имат линейни, така и радиални вариации.

По отношение на не-риентри градиентите има начин да ги създаде, така че той е бил малък правоъгълник, и в привеждането в съответствие с останалата част от малките правоъгълни версии на себе си не създава повтарящ се модел. Така че първо се уверете, градиент и да зададете фон-размер, за да получите такъв малък правоъгълник. Сега лесно създаването на ленти, които след това можете да се въртят и да направим всичко, което искате.

Използването на повтаряне-линеен наклон (), че не е необходимо да се прибягва до такива трикове. градиент размер, определен от последния цвят спирка. Ако се случи да 20px, тогава размерът на градиент (който след това се повтаря) - това 20px да 20px квадрат.

Същото е и с радиално:

Неуместен алтернатива за сваляне

Както казахме, някои наистина стари браузъри не поддържат CSS синтаксиса градиент. Ако имате нужда от алтернатива, която е градиент, след това да създадете такова чудо (.jpg / .png) да изображение. Най-лошото нещо, което малко по-малко, отколкото в някои по-стари браузъри, които вече започнаха да подкрепят CSS градиенти, изтеглете алтернативен образ. Ако е така, да направи заявка за HTTP към изображението, дори и да показва CSS градиента. Това е, което прави Firefox 3.5.8 (виж снимки) и Chrome 5 и Safari 5.0.1. Виж:

Safari 5.0.1 неправилно зарежда алтернативи

Добрата новина - това вече не е проблем. Единственият проблем беше браузърите Chrome и Safari и Chrome вече прави това с версия 6 и Safari - 5.1, и оттогава са изминали три години.

допълнителни ресурси

Вижте CSS блок, който обяснява всичко представки / синтаксис за CSS3 Моля!

Gradient галерия (на градиенти можете да направите зашеметяващи модели)