CSS залить фон двумя цветами

Залить блок 2 цветами по вертикали

CSS:

.article-gradient-2color-ver {
    width: 100%;
    height: 400px;
    background: linear-gradient( to right, #dff0d8 0%, #dff0d8 50%, #31708f 50%, #31708f 100%);
}

Залить блок 2 цветами по горизонтали

CSS:

.article-gradient-2color-hor {
    width: 100%;
    height: 400px;
    background: linear-gradient( to top, #dff0d8 0%, #dff0d8 50%, #31708f 50%, #31708f 100%);
}

Рубрики: CSS

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

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

В статье приводится пример кода для создания простого горизонтального слайдера с использованием CSS и небольшим количеством JS кода. Для реализации потребуется всего около 60 строк стилей и js кода.

Магия CSS: сделать изображение чёрно-белым

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

Пример использования chatGpt в работе: flex order

В этой статье мы рассмотрим реальный пример использования ИИ (chatGpt, gigachat,YandexGPT) в работе для решения вопрос по верстке (css)

CSS магия: стилизации элементов на основе нумерации

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

Полезные библиотеки для web разработки

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

Оценка задач по верстке

В статье приведен список работ которые нужно учесть при оценке задач по верстке

Комментарии

Влад [29.05.2023]
Спасибо! пригодилось в работе
Данный сайт использует файлы cookies. Продолжая просмотр сайта, вы соглашаетесь с использованием файлов cookies.
ОК