ЦСС3 Линеар Градиентс [ЦСС3 Типс]
Градиент је одличан додатак бојама у ЦСС3. Уместо да додамо само једну боју, сада можемо да додамо више комбинација боја у један блок декларације без ослањања на слике, што би могло смањити ХТТП захтев на нашој веб локацији, омогућавајући брже учитавање веб сајта.
Ако сте се играли са градијентима у ЦСС3, вероватно сте упознати са ове две методе: радијалним и линеарним градијентом. Данашњи пост ће бити о другом.
Цреатинг Градиентс
Пошто спецификација каже да градијенти у ЦСС3 представљају слику, она нема посебну особину као што је други додатак новој функцији, тако да је декларисана помоћу позадинска слика уместо тога.
Ако погледамо комплетну синтаксу градијента, изгледа мало оверстуффед, што може довести до конфузије за неке људе.
див бацкгроунд-имаге: -вебкит-линеарни градијент (топ, # ФФ5А00 0%, # ФФАЕ00 100%); бацкгроунд-имаге: -моз-линеар-градиент (топ, # ФФ5А00 0%, # ФФАЕ00 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, # ФФ5А00 0%, # ФФАЕ00 100%); бацкгроунд-имаге: -о-линеарно-градијент (топ, # ФФ5А00 0%, # ФФАЕ00 100%); бацкгроунд-имаге: линеарно-градијент (топ, # ФФ5А00 0%, # ФФАЕ00 100%);
Зато хајде да проучимо сваки део синтаксе једну по једну како би ствари биле јасније.
Пре свега, линеарни градијент се декларише са линеар-градиент () функције. Функција има три примарне вриједности. Прва вредност одређује почетну позицију градијента. Можете користити описну кључну реч, као топ да започне градијент који тече из топ;
див бацкгроунд-имаге: линеар-градиент (топ, # ФФ5А00, # ФФАЕ00);
Сниппет изнад је званична верзија В3Ц за креирање градијента. То је заправо једноставније и сасвим разумљиво и такође ће створити следећи градијент.
Такође можете користити дно да уради супротно, или друго јел тако и лево.
Можемо такође користити и дијагонални градијент степен угла као почетну позицију градијента. Ево примера:
див бацкгроунд-имаге: линеар-градиент (45дег, # ФФ5А00, # ФФАЕ00);
Исјечак изнад ће створити следећи градијент боје:
Друга вредност функције ће рећи прва боја информације и њихове зауставити позицију који је наведен у процентима. Позиција заустављања је у ствари опционална; претраживач је довољно паметан да одреди правилну позицију, тако да када не наведемо заустављање прве боје, претраживач ће га узети 0% као подразумевано.
И следећа вредност је Друга боја комбинација. Функционише као претходна вредност, само ако је последња примењена боја, а ми нисмо специфицирали зауставити позицију, вредност 100% ће се сматрати подразумеваним. Сада, погледајмо пример испод:
див бацкгроунд-имаге: линеар-градиент (топ, # ФФ5А00 0%, # ФФАЕ00 100%);
Исјечак изнад ће створити градијент као што смо видјели раније (нема разлике), али сада специфицирамо позицију за заустављање боје;
Сада хајде да променимо цолор стоп, и овог пута ћемо навести 50% за прву боју и 51% за другу боју, и да видимо како се испоставља;
див бацкгроунд-имаге: линеар-градиент (топ, # ФФ5А00 50%, # ФФАЕ00 51%);
Транспарентност
Креирање транспарентност у градијенту је такође могуће. Да бисте створили ефекат, потребно је да преведете боју хек у ргба и смањите алфа канал.
див бацкгроунд-имаге: линеарно-градијент (топ, ргба (255,90,0,0,2), ргб (255,174,0,0.2));
Исјечак изнад ће смањити интензитет боје за 20%, и градијент ће се појавити овако:
Вишеструке боје
Ако желите да додате још боја, само додајте боје поред друге уз зарезивање и дозволите да прегледач одреди сваку позицију за заустављање боје.
див бацкгроунд-имаге: линеарни градијент (топ, црвена, наранџаста, жута, зелена, плава, индиго, љубичаста);
Исјечак изнад ће створити сљедећу дугу.
Компатибилност претраживача
Нажалост, у време писања овог текста, сви тренутни претраживачи још нису подржали стандардну синтаксу. Потребан им је префикс добављача (-вебкит-, -моз-, -Госпођа- и -о-). Зато се цела синтакса појављује овако:
див бацкгроунд-имаге: -вебкит-линеарни градијент (топ, # ФФ5А00 0%, # ФФАЕ00 100%); бацкгроунд-имаге: -моз-линеар-градиент (топ, # ФФ5А00 0%, # ФФАЕ00 100%); бацкгроунд-имаге: -мс-линеар-градиент (топ, # ФФ5А00 0%, # ФФАЕ00 100%); бацкгроунд-имаге: -о-линеарно-градијент (топ, # ФФ5А00 0%, # ФФАЕ00 100%); бацкгроунд-имаге: линеарно-градијент (топ, # ФФ5А00 0%, # ФФАЕ00 100%);
С друге стране, Интернет Екплорер, посебно верзија 9 и нижи, далеко је од стандарда. Градијент у ИЕ9 и испод је декларисано са филтер, тако да ако желимо да додамо градијент на тим претраживачима, морамо написати нешто слично;
див филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = # ФФ5А00, ендЦолорстр = # ФФАЕ00);
Тхе филтер има своја ограничења: прво, не дозвољава више од три додане боје, а креирање ефекта транспарентности је такође мало зезнуто - не дозвољава ргба, али ИЕ филтер користи #АРГБ;
див филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = # 33ФФ5А00, ендЦолорстр = # 33ФФАЕ00);
Овде је алатка која ће вам помоћи да конвертујете ргба до #АРГБ.
- Демо
- Довнлоад Соурце
Писање синтаксе Брже
Као што можете видети горе, да би се одржала компатибилност градијента међу претраживачима, потребно је додати још пет редова кодова који су неефикасни.
Постоји много начина на које можемо да поједноставимо задатак; као што је употреба Префик-фрее, Префикр, ЛЕСС или Сасс како би се компајлирали кодови, али изнад свега, препоручујемо да користите овај алат, ЦолорЗилла Градиент. Овај алат ће једноставно генерисати све потребне кодове за градијенте у свим претраживачима.
Финал Вордс
Данас смо доста дискутовали о стварању градијената, истраживали смо сваки дио синтаксе, стварали транспарентне ефекте и одржавали компатибилност прегледника. Дакле, у овом тренутку, надамо се да већ имате боље разумијевање о тој теми.
Има још много ствари које планирамо да истражимо ЦСС3 Градиентс на нашим будућим постовима, зато останите на Хонгкиат.цом. На крају, хвала што сте прочитали овај пост, надамо се да сте уживали.
Додатна литература
- Буллет Прооф Цросс Бровсер РГБА Позадине - Леа Вероу
- ЦСС3 Имаге - В3.орг
- Када могу користити ЦСС3 градијенте - ЦанИУсе.цом
