Начало
Градиент CSS фон — 270 вариантов с кодом

Градиент CSS фон — 270 вариантов с кодом

CSS

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

Как получить код градиента CSS

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

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

Когда вы копируете CSS код градиента, то получаете что-то вроде этого.

background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

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

К этому классу, можно сразу добавить отступы и изменить цвет текста.

Пример CSS градиента

Чтобы было понятнее, я создал класс для этого блока (цветной) и еще один для внешнего (от белого к серому).

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

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

Где можно использовать CSS градиент

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

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

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

В заключении

Коллекция градиент CSS - полезная находка для вебмастеров. Наглядная демонстрация готовых градиентов для быстрого применения в ваших веб проектах или макетах. Всегда можно подкорректировать цвет под фирменный цвет вашего сайта (логотипа) или использовать в качестве фона для блоков или баннеров.

Поделиться

Статьи по теме:

Комментировать