Как реализовать многострочный линейный градиент CSS некоторые хитрости


Содержание материала:

CSS3 градиент — браузеры показывают линии

Добрый день!
Вопрос по CSS градиент.
Пробую сделать «простой» градиент, брал примеры на разных сайтах, проверял разными браузерами, но все показывают одно и тоже. На картинках «простые» примеры.
Первая картинка: linear-gradient(blue, whtie);
Вот такие полосы во всех браузерах. Почему браузеры показывают полосы?
Применял -moz,-webkit,-ms,-o. Пробывал background: background-image:

Вторая картинка: linear-gradient(to left, blue, white);
«to left» и «to right» работает как и в премерах,но если делаю «to top» или «to bottom» то тоже показывает полосы.
Ещё раз, почему браузеры,когда цвет идёт с верху вниз, показывают полосы?
Спасибо.

17.03.2014, 16:27

все браузеры, кроме Chrom не показывают картинку
Добрый день! Все браузеры, кроме Google Chrome не показывают картинку. Код такой:

Mozilla и IE не показывают кнопки выпадающих списков. Chrome и Opera показывают
Прописал стандартный HTML календарь, а кнопка выбора выпадающих не видна. Кто нить в курсе в чем.

Два разных adsl модема показывают разная скорость интернета на одной линии
не могу понять причину почему два разных adsl модема показывают разная скорость интернета на одной.

Форма делится на сектора. Курсором мыши можно рисовать линии. Цвет линии зависит
Народ спасайте. Задача такова » Форма делится на сектора (их количество задает пользователь).

Блог Vaden Pro

В статье раскрывается понятие градиента, а также рассказывается, как с помощью приемов CSS установить фоновый градиентн. В статье будет представлен старый и новый метод решения этой задачи, а также будет проведен их сравнительный анализ, с указанием слабых и сильных сторон.

В первую очередь необходимо разобраться с понятием градиента. Что же это такое?

Градиент – особый фон который состоит из двух и более цветов или оттенков, переход которых от одного к другому осуществляется плавно.

Технически градиент определяется двумя основными точками, для которых четко определяется цвет и прозрачность. Цвета промежуточных точек между ключевыми определяются математическими приемами.

Градиент делится на несколько разновидностей:

  1. Линейный – градиентный переход цветов осуществляется вдоль прямой линии.
  2. Круговой – цветовые преобразования осуществляется по кругу, от центра до дальних точек.
  3. Угловой – переход осуществляется по периметру окружности.
  4. Отраженный – является комплексом линейного градиента и зеркального отображения.
  5. Алмазный – эффект свечения драгоценного камня.

Ниже представлены примеры градиентов. Номер на рисунке соответствует номеру типа в списке выше.

Как выглядит градиент на сайте?

Очень часто градиент применяется в меню или кнопках. Это придает эффект объемности и формирует особый стиль, который можно увидеть на примере ниже

А вот на этой картинке видно, каким образом применяют градиент в блоках. В данном случае это футер

Вполне логично, что применение картинки градиента в таком случае является не рациональным решением, так как такая картинка будет очень большой и будет занимать много памяти. В следствие этого загрузка страницы будет производится с задержкой. Это нас не устраивает.

Отцовский метод: градиент на CSS + картинка

В те времена, когда верстальщики могли положиться только на CSS2, градиент устанавливался по следующему принципу

  1. Создается картинка шириной в 1 пиксель (или высотой – это зависит от направления градиента), которая представляет из себя образец требуемого градиента.
  2. Размножаем картинку по требуемой оси.

Ниже показано, как это прописывается в файле CSS:

В этой записи цвет фона, записанного в background, должен совпадать с цветом последнего пикселя картинки. Был рассмотрен вариант, когда градиент позиционируется вверху. Теперь рассмотрим, как его позиционировать внизу:

В этом случае самый верхний пиксель картинки должен совпадать с цветом заднего фона. Результат записанного кода представлен на картинке

Также стоит отметить, что если градиент направлен не вдоль вертикальной оси, а горизонтальной, то repeat-x нужно заменить на repeat-y.

Кроме того, хотелось бы отметить положительные стороны этого метода:

  • легкость использования и минимальная запись в коде в виде одной команды;
  • высокий показатель кроссбраузерности.

Не стоит забывать, что не существует идеальных решений, у каждого есть свои недостатки:

  • фоновая картинка, которая представляет дополнительную нагрузку на сервер, не смотря на то, что ее размер максимально минимизирован;
  • в дополнение к первому недостатку, до загрузки фонового изображения пользователь будет видеть блок со сплошной окраской;
  • таким способом можно реализовать только линейный градиент, для других разновидностей нужно будет создавать большие картинки на весь фон, так как для них нельзя будет применить цикличность (repeat);

Напоследок необходимо отметить еще одну особенность метода. При изменении высоты блока картинка не будет масштабировать, поэтому верх или низ блока будет залит сплошным цветом.

Продвинутый метод: градиент только на CSS

С выходом новой спецификации CSS3 появились новые функции, посредством которых можно устанавливать градиентный фон блока. Первая функция — linear-gradient();, которая формирует линейный градиент, и вторая — radial-gradient();, которая отвечает за радиальный градиент. Этот тандем позволит создавать любой существующий вид градиента. Также стоит отметить широкий спектр возможностей функций, в который входит возможность установки многоцветного градиента, а также устанавливать свое местоположение через background-position. Ниже в таблицах представлен полный потенциал возможностей этих функций

Перечень параметров функции linear-gradient()

Параметр Краткое пояснение Пример использования
bg-position Определяет местоположение начала градиента. Изначально градиент фиксируется в верхнем левом углу контейнера .grad
angle Определяет угол распространения градиента. Если значение этого параметра не выставлено, то угол составляет 0deg. .grad
color-stop Устанавливает цвет основных точек, между которыми производится цветовой переход. Обязательный параметр для указания. Допускается применить 2 значения и более. .grad

Перечень параметров функции radial-gradient()

Параметр Краткое пояснение Пример использования
bg-position Устанавливает центр градиента относительно периметра блока. Изначально системой выбирается положение center center. .grad
angle Определяет угол распространения градиента. Если значение этого параметра не выставлено, то угол составляет 0deg. .grad
shape Определяет форму распространения градиента. Доступны два возможных варианта — круглая (по умолчанию) и эллиптическая. .grad
size Определяет местоположение начала градиента. не считая пиксельных значений, допускается использовать такие команды: closest-side (contain) — ближайшая граница контейнера, closest-corner — ближайший угол контейнера, farthest-side — дальнейшая граница контейнера, farthest-corner(cover) — дальнейший угол. .grad
color-stop Устанавливает цвет основных точек, между которыми производится цветовой переход. Обязательный параметр для указания. Допускается применить 2 значения и более. .grad

На первый взгляд кажется, что новые функции просто идеальны и в них все продумано, но вот браузеры не ожидали выхода такого свойства, поэтому каждый из них реагирует на градиент по своему. Ниже описываются особенности взаимодействия некоторых популярных браузеров с градиентом.

Поддержка браузерами

Mozzila Firefox

С 2010 года разработчики «огненной лисички» выпустили новую версию браузера Firefox 3.6., которая освоила применение вендорных свойств -moz-linear-gradient() и -moz-radial-gradient(). Эти свойства позволили производить линейные и радиальные градиенты соответственно.

Эти функции по своему назначению и функционалу полностью соответствуют оригиналу. Ниже представлена правильная запись свойства для таблицы стилей:

Важно помнить, что указанный код корректно отработает только в версиях, которые вышли не раньше, чем Firefox 3.6.

Chrome и Safari

Браузеры на движке webkit тоже выпустили свои вендоры для оптимизации работы своих продуктов с градиентами. Таким образом, Safari может работать с градиентами после выхода версии 4.0, а Chrome – с версии 2.0. смотрим пример кода ниже:

Интересен тот факт, что последние версии Chrome легко распознают свойства, написанные по синтаксису Firefox:

Вторая характерная особенность браузеров webkit заключается в возможности установки радиального повторяющегося градиента. Чтобы понять, как это сделать – просто опустите глаза ниже:

Internet Explorer

Наш самый переборчивый ветеран среди браузеров — Internet Explorer работает с градиентами только через посредничество специальных фильтров. Эти фильтры стали доступны для IE после версии 5.5. «Какой фильтр?» – спросите вы. «А вот такой», — отвечу я, указывая на строку, пониже этой

Эта запись соответствует только линейному не повторяющемуся градиенту. Направление перехода цветов определяются следующими командами:

  • GradientType=1 – вдоль горизонтальной оси.
  • GradientType=0 – вдоль вертикальной оси.

С выходом в свет версии 8.0 IE стал поддерживать еще одну запись градиентного фона:

Однако первоначальная форма записи новыми версиями тоже отлично распознается.

Также не стоит забывать про плагин PIE. Он оптимизирует работу самых проблемных версий IE – от 6.0 до 8.0.

Opera

Этот браузер дольше всего сопротивлялся применению градиента в своей среде. Однако с выходом версии 11.1 поддался влиянию большинства своих коллег. С этого момента браузер может работать с вендорными свойствами -o-linear-gradient и -o-repeating-linear-gradient для применения в background:

Преимущества и недостатки применения нового метода

В качестве сильных сторон новых функций спецификаций CSS3 отметим следующее:

  • можно не использовать картинки, что повышает показатель быстродействия ресурса;
  • исключается проявление однотонной заливки при загрузке веб-страницы;
  • гибкость и богатый функционал в управлении градиента.

Единственный недостаток этого свойства – кроссбраузерность. Именно из-за низкого показателя этого параметра одна строчка кода превращается, как минимум, в 4, чтобы каждому браузеру разъяснить, как работать с градиентом и как его корректно вывести на странице.

Исключительным и принципиальным отличием продвинутого способа от отцовского метода заключается в резиновых свойствах первого. Другими словами, если блок будет растягиваться по высоте, то градиент автоматически растянется вместе с ним. Для случая использования картинки – это непозволительная роскошь.

Выводы

Идея реализации способа, описанного в спецификации CSS3, имеет очень благоприятные перспективы. Однако, в тоже время существует ряд проблем при отображении свойства в разных браузерах, однако с течением времени разработчики придумывают выход из этой ситуации. Думаю, со временем это свойство будет работать во всех браузерах без использования вендорных свойств и фильтров.

Именно из-за наличия этих проблем первый способ еще держится на плаву.

Линейный градиент CSS

Линейный градиент CSS — это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background .

Синтаксис CSS linear-gradient

  • позиция — указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
    • to top — переход снизу вверх (0deg)
    • to left — переход справа налево (270deg)
    • to bottom — переход сверху вниз (180deg)
    • to right — переход слева направо (90deg)
    • to top left — переход правого нижнего угла к левому верхнему
    • to top right — переход от левого нижнего угла к правому верхнему
    • to bottom left — переход от правого верхнего угла к левому нижнему
    • to bottom right — переход от левого верхнего угла к правому нижнему

    Помимо точных значений можно указать угол наклона в deg

  • цвет1 — начальный цвет
  • цвет2 — конечный цвет

Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).

Можно задавать переход нескольких цветов через запятую.

Как сделать нелинейное изменение градиента

Синтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например

Для браузеров нужно задавать это свойство с вендорными префиксами: -moz-,-webkit-, -ms-, -o

Накладываем градиент на текст с помощью CSS3

В свое время на одном из моих сайтов было необходимо нанести градиент на некоторые участки текста. Первое, что приходит в голову – это просто наложить градиент на текст в каком-нибудь текстовом редакторе, например, в Photoshop, сохранить как картинку и разместить на сайте.

Минусы: это картинка (то есть лишний вес страницы, отсутствие возможности индексирования контента; если вы допустили ошибку или захотели изменить содержимое текста – необходимо проделать всю работу с графикой вновь).

Есть еще один популярный способ реализации градиента на тексте, где одним из важных параметров является наличие однотонного фона, что в некоторых случаях не подходит.

Поэтому я покажу вам, как с помощью CSS3 и небольшой «магии» добиться лучшего решения этой задачи.

Все, что вам необходимо – это нужному блоку с текстом присвоить следующие стили:

это необходимый вам градиент, а «#fff» и «#000» его цвета.

Обратите внимание, что последовательность этих стилей имеет значение. Итоговый вариант будет выглядеть следующим образом:

О том, какие типы градиента и возможности их настройки существуют, вы можете почитать в этой статье.

Реализация корректно работает в браузерах Opera, браузерах на движке Chromium (Google Chrome, Яндекс.Браузер, Амиго и других), FireFox и Microsoft Edge.

Internet Explorer, к сожалению, не радует в этом вопросе, но тут решать вам. Удачных вам разработок.

Linear-gradient(): линейный градиент в фоне

Цветовой градиент — это плавный переход от одного заданного цвета к другому через промежуточные цвета. В линейном градиенте переход происходит по прямой, от точки A к точке B. Градиент может иметь и более двух опорных точек — тогда переход совершается от точки A к точке B, затем от точки B к точке C и так далее.

Как сделать фоновый линейный градиент в CSS

В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.

Например, давайте сделаем фоновый линейный градиент с переходом от фиолетового цвета к красному. При этом мы хотим, чтобы начальная точка с фиолетовым цветом была с правой стороны, а вектор градиента направлялся влево. Запишем код:

Фоновый градиент на блоке

Цвета точек градиента можно записывать в любом формате, доступном в CSS, будь-то шестнадцатеричный код, формат RGB или другой. Направление градиента задается с помощью приставки to и затем ключевых слов left , right , top и bottom , которые можно комбинировать для изменения наклона. Например:

Кроме этого, можно прямо указать угол наклона, использовав положительное либо отрицательное число с приставкой deg (без пробела). При заданном угле 0º либо 360º градиентная линия будет идти снизу вверх. При увеличении угла наклона движение вектора происходит по часовой стрелке (при использовании отрицательного значения движение меняется на противоположное). Пример записи кода:

Чтобы лучше понять поведение линейных градиентов, необходимо видеть их. Поэтому рекомендуем вам самостоятельно попрактиковаться после прочтения данного урока.

Несколько опорных точек

Как мы уже сказали, у градиента может быть более двух опорных точек. При этом фон будет плавно переходить от первого цвета ко второму, от второго к третьему, от третьего к четвертому и так далее, пока не достигнет финальной опорной точки. Если вы хотите увеличить количество данных точек в градиенте, просто допишите их через запятую. Например:

В нашем примере указаны четыре опорных цветовых точки, но их можно добавлять сколько угодно и в каких угодно доступных цветовых форматах.

Длина переходов

По умолчанию браузер размещает точки на равном расстоянии, поэтому и градация получается равномерной. Но этим расстоянием можно управлять, используя единицы измерения CSS. Давайте разберем следующий пример:

В нашем коде после цвета #92009b указано значение 20% . Поскольку оно стоит возле первой опорной точки, это означает, что указанным цветом будет закрашено 20% длины элемента. После чего уже начинается градиент: значение 90% говорит браузеру, что нужно достичь цвета #f5e944 к 90% длины элемента (начав на уровне 20%). После чего в оставшемся пространстве начинается переход к третьему цвету — #00ffa2 .

Эта тема также требует практики. Попробуйте создать градиентный фон с несколькими опорными точками (более двух), поиграться со значениями расстояний и понаблюдать за изменениями градиента в браузере.

Вендорные префиксы

Для обеспечения кроссбраузерности к некоторым поздним CSS-свойствам нужно дописывать вендорные префиксы — специальные приставки, которые добавляют разработчики браузеров:

  • -webkit- — префикс для Chrome, Safari, Android;
  • -moz- — префикс для Firefox;
  • -o- — префикс для Opera.

Градиентный фон тоже требует использования данных префиксов, если есть необходимость в поддержке максимального количества браузеров. Для этого адаптируйте код следующим образом:

Для добавления префикса требуется создавать отдельное объявление. Кроме того, как вы могли заметить, свойства с вендорными префиксами не требуют использования приставки to при указании направления градиента.

Поддержка Internet Explorer

К сожалению, градиентный фон работает только в IE10+. Предыдущие версии не понимают его и будут игнорировать. Чтобы обеспечить хотя бы обычный фон в старых браузерах, можно создать т. н. «заглушку»: выберите подходящий оттенок и запишите свойство background-color над свойством с градиентом. Таким образом, старый браузер применит «резервный» фоновый цвет, а неизвестные ему свойства пропустит, тогда как в более современном браузере градиентный фон наложится на сплошной фон и перекроет его.

Если же у вас установлен полупрозрачный градиент (например, с использованием цветового формата RGBA) и вы не хотите, чтобы сквозь него просвечивался резервный фон-заглушка, задавайте градиент через сокращенное свойство background вместо background-image . Тогда значение background-color будет перезаписано на transparent .

Далее в учебнике: repeating-linear-gradient() — повторяющийся линейный градиент.

Линейный градиент , как делаются чёткий градиент по схеме?

Вопрос с mail.ru но меня заинтересовало именно реализация !

Каким образом можно реализовать такой градиент :

я пытался так но получается размытый градиент:

Как это реализовать правильно согласно схеме ?

3 ответа 3

Чтобы краница была чёткой, надо одну и ту же позицию указать дважды подряд:

Чтобы чуть улучшить сглаживание для произвольных углов, можно добавить 1px:

А чтобы эта штука повторялась, надо использовать repeating-linear-gradient :

В вашем случае вы тянете градиент под углом 45 градусов, до 20% красный, от 20% до 30% желто красный(вот тут как раз перелив) от 30% желтый. А вам надо например: под углом 45 градусов, красный до 25%, желтый от 25%, желтый до 50%, красный от 50%, красный до 75%, желтый от 75%, понимаете?) вот так:

То есть цвет должен быть как бы встык, участок от желтого к желтому, потом в тот же период от красного к красному, нельзя на разных размерах ставить разный цвет — от этого получается перелив. Это если полоски хотите получить.

Как задать градиент для border в CSS?

Приветствую вас, дорогие друзья!

Рассмотрим как задать в CSS border gradient, это позволит вам создать на своём сайте красивый эффект градиентной рамки. В одной из предыдущих статей я подробно рассматривала как задать градиент в качестве фона.

Так вот, CSS 3 позволяет нам это сделать не только для фона, но и для рамки.

Навигация по статье:

Линейный градиент

Для примера рассмотрим такой блок:

Чтобы задать ему размеры, отступы и так далее я допишу следующие CSS свойства:

Теперь нам нужно задать толщину рамки и её тип:

Для задания градиента допишем свойство border-image в css файле:

Здесь мы в скобках задаём значения цветов, которые будут идти сверху вниз.
Чтобы наше CSS свойство работало во всех браузерах допишем кроссбраузерные префиксы:

И последнее зададим CSS свойство:

Чтобы заданный градиент сместился или растянулся по всей границе.
В итоге весь CSS код задания border gradient будет выглядеть так:

Вот результат работы кода:

Особенности border gradient в CSS

  1. 1 В скобках мы можем задать не обязательно 2 цвета, их может быть больше. Для этого просто указываем значения цветов через запятую:

2 Можно регулировать соотношение цветов в процентах задав число % рядом с цветом:

  • 3 Данное CSS на работает в паре со свойством border-radius, отвечающее за скругление углов.
  • Направление градиента border gradient

    Чтобы наш градиент для рамки шел не сверху вниз, а например, слева направо или по диагонали мы можем задать для него направление при помощи дополнительных параметров.

    При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.

    В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
    Пример для border gradient слева направо:

    Как реализовать две различные границы линейного градиента для элемента?

    Я действительно новичок в CSS, и у меня есть задача создать 2 линейных градиента как границу div, как на рисунке ниже.

    Я использовал border-image для внутреннего, но я не знаю, как создать другую границу.

    Использование дополнительного псевдоэлемента:

    Я не думаю, что это возможно сделать только с одним элементом (то есть без дополнительных псевдо/реальных элементов) с использованием border-image но вы можете сделать это, используя псевдоэлемент, установив одну границу для родителя, а другую на псевдоэлементе, как в приведенном ниже фрагменте.

    Использование одного элемента:

    Только с одним элементом (без псевдо/реальных элементов) мы можем добиться этого * используя background-image но не с border-image . Это намного сложнее, потому что мы должны создать градиентную полосу для каждой из 8 (4 внешних + 4 внутренних) границы, а затем разместить их соответственно.

    * — Это не дает точного результата, что и изображение границы, но достаточно близко.

    Website-create.ru

    Волна CSS3 все больше охватывает мир веб-дизайна. И это не удивительно, ведь CSS3 открывает перед нами множество возможностей, которые были недоступны раньше. Сегодня я расскажу Вам, как создавать разнообразные линейные градиенты посредствам CSS3.

    Вопрос придания градиентной заливки для разных элементов веб-страниц всегда решался созданием этой заливки в программе Adobe Photoshop и последующем использовании этого изображения в качестве фонового цвета.

    С CSS3 у нас появляется возможность создавать градиенты при помощи кода в таблице стилей.

    Одним из преимуществ такого подхода является то, что мы можем создавать разнообразные градиенты с достаточно большой гибкостью. Здесь я имею в виду, что мы можем регулировать множество параметров, таких как: угол наклона градиента, количество цветов в градиенте, его повторяемость, и даже то, откуда градиент будет начинаться.

    Если Вы интересуетесь новыми возможностями CSS3, то, я думаю, этот урок будет Вам интересен и полезен.

    Сразу скажем о поддержке.

    Все современные браузеры поддерживают линейные градиенты и отображают их достаточно корректно. Для некоторых браузеров мы будем использовать синтаксис с префиксами. А для совсем старых браузеров вполне можно сделать обходное решение при помощи создания однопиксельной градиентной картинки в Photoshop и прописывать это в таблице стилей в качестве альтернативного решения.

    Давайте начнем создавать линейные градиенты с CSS3

    1. Первое, что нам нужно сделать – это создать немного кода html. Нам нужны элементы, к которым мы будем применять наши линейные градиенты.

    Я предлагаю создать очень простой документ, в котором будет 4 кнопки. Эти кнопки будут представлять из себя теги div, каждый из которых будет иметь свое имя класса. Это нужно для того, чтобы присваивать им различные градиентные заливки.

    Кроме того, мы сразу пропишем в фале подключение файла таблицы стилей, который мы создадим уже очень скоро.

    Итак, наш html-код будет выглядеть следующим образом:

    А если мы откроем наш файл в браузере, то пока что увидим следующее.

    2. Сейчас мы создадим файл таблицы стилей и пропишем основные стили, прежде чем перейти к созданию градиентов.

    Создайте файл с именем «style.css» и сохраните его в том же каталоге, что и наш основной файл.

    Этот файл уже подключен, так что все, что остается сделать – это открыть его и прописать стили.

    Для начала мы пропишем основные стили, которые придадут нашей странице ширину и выравнивание по центру.

    Также мы оформим кнопки, задав им высоту, ширину, отступы, рамку, скругление для рамки, обтекание по левому краю.

    Мы сразу же применим обходное решение для очень старых браузеров, присвоив для свойства «background-image» заливку из однопиксельного градиентного изображения. Ваши градиенты в последствии прекрасно отобразятся и без него, однако, я советую применять это обходное решение, ведь вполне возможно, что Вашу страницу решит просмотреть человек с очень старым браузером (хотя с каждым днем эта вероятность все больше уменьшается, но все же…), тогда, по крайней мере блок кнопки не будет пустым. Это однопиксельное изображение Вы также можете найти в исходниках (или создать свое).

    Также мы придадим необходимые стили для надписей на кнопках.

    Вот основные стили, которые нужно прописать в файл «style.css»:

    А вот то, что мы увидим на веб-странице, после применеия этих стилей:

    Как видите, у нас теперь есть страница с четырьмя кнопками, которые залиты одинаковым однопиксельным градиентом, созданным в программе Photoshop. Сейчас Вы можете видеть, реализацию обходного решения.

    Давайте теперь приступим к настоящему созданию линейных градиентов при помощи CSS3.

    3. Но для начала, я предложу Вам посетить один очень полезный ресурс. Он будет особенно полезен для людей, осваивающих CSS3 и желающих знать об уровне поддержки различных свойств.

    Этот ресурс называется caniuse.com .

    Здесь Вы сможете найти уровень поддержки любого интересующего Вас свойства CSS3. После того, как зайдете на этот ресурс, перейдите в режим таблиц «Tables» и в форме для поиска пропишите «gradient».

    Перед Вами появится следующая таблица:

    Из нее мы можем узнать, какие браузеры поддерживают градиенты, какие нет, а для каких нужно использовать префикс.

    Вы сможете увидеть, что поддержка градиентов на сегодняшний день достаточно приличная, так что можно их спокойно использовать (особенно учитывая, что у нас уже есть обходное решение). Однако, для некоторых версий браузеров необходимо использовать префикс, так что мы будет помимо задания основного правила также прописывать правило с префиксом –webkit-.

    4. Давайте начнем с первой кнопки, имеющей класс «one».

    Мы зададим ей градиент, идущий сверху вниз, и который будет включать в себя 5 цветов, плавно переходящих один в другой.

    Для того, чтобы задать градиент, мы будем использовать свойство «background-image», в котором нам нужно будет прописать тип градиента, до какой стороны или угла он будет доходить. Это задается ключевыми словами «top», «bottom», «right» и «left». В случае стороны указывается одно ключевое слово, а если Вы хотите получить диагональный градиент, то нужно определить угол, то есть указать два слова. Также вместо слов можно указывать угол наклона.

    Следующие параметры — это цвета с указанием процентов. То есть, если первый цвет начинается с начала, то рядом с ним будет стоять 0%; если второй цвет должен быть посередине заливаемой фигуры, то указываем рядом с ним 50%, а для третьего цвета 100% (это пример для 3-х цветного градиента, но цветов может быть столько, сколько Вы пожелаете).

    Давайте раскрасим нашу первую кнопку в 5 цветов.

    После того, как Вы добавите этот код к Вашим стилям, то в браузере увидите следующее.

    Ваша кнопка приобрела градиент из 5-и цветов идущий сверху вниз.

    Для того, чтобы прописать то же самое свойство с префиксом –webkit- нужно будет использовать немного другой синтаксис.

    Здесь, как Вы видите: первое отличие – это префикс –webkit-; тип градиента указывается в скобках; дальше идёт начальная точка и конечная точка градиента (указываются в процентах через запятую); потом первый цвет (указывается при помощи специального слова «from»); промежуточные цвета указываются при помощи специального слова «color-stop» и должны содержать процент, показывающий в каком месте они будут начинаться; последний цвет в градиенте – это специальное слово «to».

    Вот такие вот отличия в синтаксисе.

    Таким образом полный код для нашей первой кнопки будет выглядеть так:

    5. Теперь, когда Вы знаете, как создавать градиенты, давайте попробуем создать диагональный градиент, то есть идущий от одного угла в другой.

    Сделать это будет достаточно просто указав вместо одно ключевого слова два. Например, «to bottom right» будет означать, что градиент должен идти от верхнего левого угла к нижнему правому.

    Кстати, для –webkit- мы помимо процентов, указывающих на начальную и конечную точку градиента можем также использовать эти специальные слова.

    Давайте применит наши знания ко второй кнопке.

    Вот что у нас получится:

    Согласитесь, такое при помощи однопиксельной заливки будет сделать уже не так просто.

    6. Также мы можем делать градиенты со смещением. Для этого нам нужно указать для первого цвета позицию не 0%, а, например, 50%.

    Направление градиента можно также указывать при помощи градусов (но не для правила с префиксом –webkit-. Там все также остаются проценты, которые, кстати, тоже можно подкорректировать должным образом).

    Вот так можно реализовать один и тот же градиент со смещением (основное правило и правило для –webkit-).

    Вот, что из этого выйдет:

    7. И последнее, о чем хочу рассказать – это повторяющийся линейный градиент. С его помощью можно замостить фигуру повторяющимися градиентами и получить интересный узор.

    Здесь отличие в том, что вместо «linear-gradient» мы должны прописать «repeating-linear-gradient». Далее в скобках указать направление, нужные цвета и то, сколько места будет занимать один такой градиент до повторения (указывать можно в пикселях или в процентах).

    Делается это следующим образом:

    А результат получается вот такой:

    Теперь Вы знаете как создавать самые разнообразные градиенты.

    Стоит немного попрактиковаться, и Вы создадите очень красивые заливки для элементов Ваших веб-страниц.

    Надеюсь урок был Вам полезен. Не забывайте оставлять свои отзывы.

    Не забывайте подписаться на обновления на блоге и делитесь уроком со своими друзьями при помощи кнопок социальных сетей.

    Взгляд на CSS3 градиент (линейный и радиальный градиенты)

    Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

    Линейный градиент

    Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.

    В общем случае синтаксис градиента (линейного) выглядит так:

    Итак, давайте обо всем по порядку.

    Прежде всего, линейный градиент объявлен функцией linear-gradient() . Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom , left и right ;

    Чтобы добиться перехода цвета из одного угла в другой мы можем использовать градус угла, вот пример:

    Если угол будет отрицательным то позиция смениться с нижнего левого угла на верхний левый.

    Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0% .

    Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100% . Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50% , то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

    Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

    Получаем одинаковые по высоте полоски. C четкой границей, перехода цвета не будет. Чтобы лучше понять как это работает поэкспериментируйте со значениями.

    Радиальный градиент

    Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient() . Также есть и основные значения: это форма радиального градиента ( circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

    Если не указывать форму, то по-умолчанию будет установлен эллипс.

    Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами ( top , bottom , left , right и center ), а также их комбинациями, либо указать в процентах или пикселях.

    • По центру вверху — top — 50% 0%;
    • В левом верхнем углу — left top — 0% 0%;
    • В правом верхнем углу — right top — 100% 0%;
    • По центру — center — 50% 50%;
    • Слева по центру — left center — 0% 50%;
    • Справа по центру — right center — 100% 50%;
    • По центру снизу — bottom — 50% 100%;
    • В левом нижнем углу — left bottom — 0% 100%;
    • В правом нижнем углу — right bottom — 100% 100%.

    Вот пример с процентами:

    Первое значение по оси Х второе по У.

    Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

    Значение Описание
    closest-side Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle ) или до ближних сторон по X и по У (для ellipse ). Примеры чуть ниже.
    farthest-side Размер также рассчитывается из расстояния, но уже до дальних сторон.
    closest-corner Теперь в качестве ориентира используются ближние углы.
    farthest-corner Рассчитывается из расстояния до дальних углов.

    Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:

    Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.

    А теперь до дальних сторон:

    Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

    В радиальном как и в линейном градиенте для цвета могут быть применены стоп позиции. Хочется также заметить, если необходимо достигнуть прозрачности цветов то использовать следует rgba .

    Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

    В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

    Повторяющийся градиент

    Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

    Кроссбраузерность

    К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих ( -webkit- , -moz- , -ms- и -o- ). Поэтому синтаксически правильным является вот такое описание градиента:

    Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

    Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

    Но даже здесь есть ограничения, нельзя добавить более 3 цветов и для использования прозрачности нужно немного изменить HEX код цвета:

    Где 33 сразу после решетки это процент насыщенности цвета.

    Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

    Топ-пост этого месяца:  List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде
    Добавить комментарий