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