Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Как css сделать в градиент

Как сделать линейный градиент для фона — учебник CSS

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

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

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

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

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

Цвета точек градиента можно записывать в любом формате, доступном в 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.

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

background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);

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

Поддержка Internet Explorer

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

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

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

Как использовать CSS градиенты в вебе

Дата публикации: 2017-12-04

От автора: в этом уроке вы узнаете, как использовать градиент CSS в вебе. Я дам несколько примеров, уроков (например, как создать градиент для рамки) и подкину парочку полезных ссылок, которые сильно упростят создание градиентов.

Смотрите урок на сайте статьи.

Основы градиентов

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

В простейшей форме градиенты представляют собой фоновые изображения. Устанавливается фоновое изображение (с помощью сокращения background) в значение linear-gradient или a radial-gradient. Внутрь значения передается начальный и конечный цвет:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее .box { background: linear-gradient(#000046, #1cb5e0); }

background: linear-gradient(#000046, #1cb5e0);

По умолчанию линейный градиент направлен сверху вниз, и мы получаем примерно вот это:

Мы можем изменить направление, если добавим новый параметр перед цветами:

.box { background: linear-gradient(to right, #000046, #1cb5e0); }

background: linear-gradient(to right, #000046, #1cb5e0);

Если изменить параметр на to top right, получится диагональный градиент. Диагональ можно создать и по-другому, если установить 45deg (или любой другой угол).

Немного усложним, необязательно использовать 2 цвета. Можно использовать названия цветов:

.box { background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan); }

background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan);

В этом случае все 4 цвета займут равную площадь, создавая плавный и сбалансированный градиент.

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

.box { background: linear-gradient(to right, #f05053 80%, #e1eec3); }

background: linear-gradient(to right, #f05053 80%, #e1eec3);

И мы получим:

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

Мы можем воспользоваться полученными знаниями и изменить градиент на radial. Нужно лишь заменить linear-gradient на radial-gradient.

.box { background: radial-gradient(#fdbb2d, #22c1c3); }

background: radial-gradient(#fdbb2d, #22c1c3);

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

.box { background: radial-gradient(circle, #fdbb2d, #22c1c3); }

background: radial-gradient(circle, #fdbb2d, #22c1c3);

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

.box { background: radial-gradient(circle at top left, #fdbb2d, #22c1c3); }

background: radial-gradient(circle at top left, #fdbb2d, #22c1c3);

Эффект незаметный, но, возможно, именно это вам и нужно вместо линейного градиента.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Реальное применение

Где же можно использовать градиенты таким интересным образом?

1. Перекрывающий баннерный слой

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

Свойство background может принимать несколько значений, формирующих стек, где первое значение самое верхнее, а последнее расположено в самом низу. Если сначала задать градиент, то он будет расположен поверх всего, что идет следом. Посмотрите на пример ниже:

.hero { background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url(https://bg.jpg); }

background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url(https://bg.jpg);

Результат:

2. Градиент на тексте

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

Сначала берем текст (h2) и применяем градиент к его background. Затем свойство background-clip со значением text удаляет фон со всего блока кроме области под текстом. Color текста загораживает фон, поэтому делаем цвет transparent, чтобы был виден градиент:

h2 { background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6); -webkit-background-clip: text; background-clip: text; color: transparent; }

background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6); -webkit-background-clip: text;

3. Градиентные рамки

Градиентные рамки вы могли видеть на Envato Elements – отличный способ визуально приправить ваш UI. Он очень тонкий, но вы только посмотрите на линейный градиент от синего до фиолетового на рамках этих кнопок:

Добиться такого эффекта можно разными способами. Первый требует сначала задать элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.

.card1 { border: 5px solid transparent; border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d); border-image-slice: 1; }

border: 5px solid transparent; border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d);

Результат:

У подхода несколько проблем. Во-первых, border-image не одинаково поддерживается во всех браузерах. В основном это касается старых версий IE. Во-вторых, этот подход не позволит добавить border-radius, как на UI Envato Elements. Давайте рассмотрим другой способ.

Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (5px у нас):

.card2::after { content: ''; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; }

Так мы получим сплошной градиентный блок поверх нашего div. Добавив z-index -1, мы переместим его под div.

Далее (фух, в этот раз много шагов) мы добавляем border-radius к псевдоэлементу, равный своему родителю (пусть будет 10px). Далее задаем фон родителя. Если задать цвет фона страницы, то он будет прозрачным.

Наконец, применяем нашего друга background-clip к родителю, но в этот раз со значением padding-box. Так div будет залит до края рамки, но не далее.

Последний способ не совсем рамка, но эффект похож.

Есть и третий способ, на box-shadow. Советую посмотреть Border-gradient mixin от John Grishin на сайте CodePen.

Заключение

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

Автор: Adi Purdila

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

CSS градиент фона двумя способами — линейный градиент и внутренняя тень

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

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

Надо сказать, что именно в CSS градиент считается фоновым изображением, поэтому для него не выделено специального свойства и он просто приписывается к стандартному CSS свойству background (в случае его сокращенного написания) или, если конкретней, то к background-image именно потому, что градиент в CSS трактуется как фоновое изображение, а не цвет.

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

Первый способ — внутренняя тень

В случае, если вам необходимо придать объем отдельно стоящим элементам, например кнопкам форм, вкладкам и т. д. — можно использовать внутреннюю тень. Как известно, существует такое замечательное CSS свойство, как box-shadow. На данный момент это свойство уже поддерживается всеми известными браузерами, т. к. существует, наверное, больше 5 лет точно и успешно внесено в спецификацию. А это означает, что уже можно не пользоваться вендорными префиксами при описании этого свойства в CSS и оно и так адекватно воспримется всеми популярными браузерами. Дело в том, что тень блока может быть как внешней, что является классическим вариантом использования box-shadow, так и внутренней.

В одной из наших статей мы используем именно это свойство для пошагового создания красивой CSS кнопки и показываем результат на конкретном примере.

Добавляя к элементу внешнюю тень, мы как бы приподнимаем его по вертикальной оси координат над остальными элементами. Это отлично подходит для выпадающих окон (popup), подсказок и прочих элементов, которые должны возвышаться над остальным контентом, находясь в другой плоскости. В нашем же случае, мы будем использовать нестандартную тень, которая будет распространяться не наружу, а внутрь элемента. Для этого существует необязательный параметр свойства box-shadow, называемый inset.

box-shadow: 0 0 10px 0 #000; /* наружная тень */ box-shadow: inset 0 0 10px 0 #000; /* внутренняя тень */

Итак, представим, что у нас есть кнопка, высотой 40 пикселей, тогда для того, чтобы сделать градиент внутри этой кнопки с помощью CSS свойства box-shadow, мы присвоим нашей с вами кнопке следующие стили (обратите внимание на последние два свойства background и box-shadow):

Кнопка с градиентом box-shadow

Как видите, получилась очень даже приличная на вид кнопка. При том, что мы не использовали linear-gradient и нам не пришлось добавлять префиксы для всех браузеров.

Второй способ — линейный градиент

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

text-decoration: none; padding: 0 20px; white-space: nowrap; display: inline-block; border: none; cursor: pointer; height: 40px; line-height: 40px; color: #fff; background: linear-gradient(180deg, #54b1ff, #1c7ccd); /* здесь надо вставить то же свойство с добавлением вендорных префиксов */

Кнопка с градиентом linear-gradient

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

02.08.2015

3333

Возможно, вам это интересно:

CSS градиент генератор

Задаетесь вопросом — как сделать градиент в css, попробуйте градиент генератор css онлайн. Сервис прост в управлении и имеет интуитивно понятный интерфейс и гибкие настройки которые максимально позволяют получить тот результат который вам необходим. С помощью онлайн градиент генератора css вы сможете создать фон (background) для вашего сайта блога или проекта.

НазадВернуться к странице сервисов

Теги: градиент генератор css, фон градиент, градиент css, css градиент фона, градиент css онлайн, gradient css, как сделать градиент в css, background градиент css, градиент генератор, background градиент css, цвета css градиент, онлайн генератор градиента css