0:00
Здравствуйте!
В этом видео я расскажу вам о линейных и радиальных градиентах.
Итак, для того чтобы создать линейный градиент,
нужно воспользоваться функцией linear-gradient у свойства background.
Самый простой градиент выглядит вот так: то есть мы делаем переход от
красного цвета к зеленому.
И выглядит это вот так: то есть у нас переходит сверху вниз градиент от
красного к зеленому.
Можно задать градиент посложнее.
В этом случае мы можем в качестве первого аргумента указать наклон.
Вторым аргументом мы можем передать один цвет, то есть мы указываем,
что вначале идет цвет желтый.
Затем указываем цвет красный на 30 % и снова на 30 % указываем зеленый цвет.
В этом случае граница перехода будет очень резкая, и выглядеть это будет вот так:
то есть от желтого к красному переход плавный, а так как значения у
красного и у зеленого цвета совпадают, то граница будет очень резкая.
Следующий вид градиентов — это радиальный градиент.
В этом случае мы указываем функцию radial-gradient, и самая короткая запись
выглядит следующим образом: мы просто указываем два цвета — белый и синий.
В этом случае градиент расходится из центра от белого цвета по краям
к синему цвету.
Можно записать более сложно.
В этом случае мы указываем размеры эллипса и координаты эллипса: 100 пикселей,
200 пикселей — это размеры эллипса,
а 100 пикселей, 10 пикселей — это координаты центра.
Далее мы указываем цвета.
Указываем, что белый цвет находится в самом начале,
затем на середине у нас красный цвет, и в самом конце у нас синий цвет.
И выглядит это как-то вот так.
То есть радиальный градиент по вертикали растянулся на 200 пикселей,
а по ширине он занимает 100 пикселей.
За этими размерами цвет будет синий.
При помощи радиальных и линейных градиентов можно нарисовать довольно
красивые шаблоны.
Шаблон — это несколько повторяющихся картинок, которые образуют некоторый узор.
Мы задаем свойству background несколько линейных градиентов через запятую,
то есть каждый линейный градиент — это как будто бы одно изображение.
Далее мы указываем размеры, и так как по умолчанию background repeat стоит repeat,
то происходит повторение этих линейных градиентов.
И при помощи свойства background-color мы еще в дополнение задаем цвет фона.
Также можно добиться различных интересных эффектов, например,
кирпичная стена или же, как его называют, рандомный шаблон.
В этом случае создается эффект, что каждая полоса не повторяется.
По ссылкам, приложенным к видео,
можно посмотреть более подробно на различные примеры шаблонов.
В этом видео вы узнали про радиальные и линейные градиенты.
В следующем видео я расскажу вам,
что такое спрайты и как они оптимизируют загрузку страницы.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
