Как сделать полосатый фон для элементов сайта на чистом CSS
Чистый цвет (монотонный, однородный) не встречается в природе. Можно сказать, что он противоестественен. Ведь на зеленом листе дерева всегда видны прожилки другого цвета, на чистом голубом небе присутствует дымка от облаков. Даже забор или стена выкрашенные краской одного цвета получают оттенки за счет неровностей поверхности и качества покраски.
Не даром вебмастера для своих сайтов используют фоны с имитацией бумаги, ткани или камня. Такие украшения делают общую картину более привычной для глаз. Это может вызвать больше доверия у посетителя (на красивую картинку посмотреть всегда приятно), удержит его на сайте, что в конечном итоге положительно скажется на поведенческих факторах.
Поведенческие факторы — это совокупность показателей поведения пользователей сайта, которые позволяют поисковым системам сделать вывод о его (сайта) качестве.
Фоновые изображения для сайта
Чаще всего для украшения сайта используются фоновые изображения. Главное требование к ним — это беcшовность и размер. Если картинка бесшовная, то ее можно использовать как спрайт небольшого размера, например 100 на 100 пикселей, и замостить ею всю площадь экрана, при этом общее изображение будет выглядеть как одно единое целое без видимых границ внутри.
Фоновые изображения на CSS
Возможности CSS (каскадная таблица стилей) позволяют генерировать простые изображения (полосы, круги, квадраты). Этим можно воспользоваться для формирования фона для объектов на сайте. Преимущество у данного метода в том, что для оформления фона вам не нужен графический редактор и размер такого фона минимален.
К минусам стоит отнести невозможность или очень большая сложность создать фоны в виде реальных предметов, надписей, фотографий и т.п.
Полосатый фон на CSS
Перейдем от слов к делу, сделаем на фоне диагональные полосы используя CSS функцию repeating-linear-gradient() :
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px );
Если применить это свойство к блоку DIV, то выглядеть он будет примерно так:
Блок DIV с полосатым фоном на CSS
Рассмотрим подробнее все параметры.
- 45deg — это угол наклона полосок
- #606dbc — начальный цвет градиента
- #606dbc 10px — цвет на отметке 10 пикселей
- #465298 10px — цвет на отметке 10 пикселей
- #465298 20px — цвет на отметке 20 пикселей
Как видно мы получили три отрезка: от начала до 10 пикселей, отрезок нулевой длины на отметке 10 пикселей, где просто меняется цвет и третий отрезок от 10 до 20 пикселей.
В моем примере никакого градиента (плавной смены цвета) нет, так как цвет в начале и конце отрезков одинаковый. А функцию repeating-linear-gradient() мы используем для чередования цветов.
Какие углы наклона можно использовать
Меняя угол наклона можно получить горизонтальные и вертикальные полосы. В качестве угла наклона можно использовать предопределенные константы to right, to bottom, to bottom left.
Следующий стиль добавит к блоку DIV фон с вертикальными полосами:
background: repeating-linear-gradient( to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px );
Блок DIV с вертикальными полосами на CSS
Какие цвета можно использовать
Можно использовать все цвета соответствующие CSS стандартам, а так же прозрачный цвет transparent.
Наложим полоски на следующее изображение (взято с сайта Mozilla — https://mdn.mozillademos.org/files/15525/critters.png):
Используем такой стиль оформления:
background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #fff 10px, #fff 15px ), url('https://sitename.tld/image-url/image-name.jpg');
Выглядеть блок DIV с таким оформлением будет следующим образом:
Блок DIV с прозрачными полосами на изображении
Цветов может быть несколько
Количество цветовых полосок не ограничено двумя. Вот пример оформления на CSS для телевизионной испытательной таблицы, изображение которой формируется ГЦП (генератор цветных полос).
background: repeating-linear-gradient( to right, #fff 0 40px, #ff0 40px 80px, #0ff 80px 120px, #0f0 120px 160px, #f0f 160px 200px, #f00 200px 240px, #00f 240px 280px, #000 280px 320px );
Те кто работал на телецентре или занимался ремонтов цветных телевизоров должны помнить эту картинку ��
Короткие записи CSS стилей полосок для фона
Оформление полосок можно сократить не расписывая цвет в каждой точке, а указав диапазон:
background: repeating-linear-gradient( -45deg, #ccc 0 10px, #999 10px 20px );
Результат оформления блока короткой записью стилей:
Блок DIV с короткой записью CSS
Узоры в качестве фона на CSS
С помощью CSS стилей можно «нарисовать» не только примитивные полоски, но и достаточно сложный и красивый фон:
background: repeating-linear-gradient(90deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px), repeating-linear-gradient(0deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px), repeating-linear-gradient(-45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px), repeating-linear-gradient(45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px);
Блок DIV с таким фоном будет выглядеть следующим образом:
Круговые полосы на CSS
Полоски могут быть радиальными, для их оформления нужно использовать CSS функцию repeating-radial-gradients() :
background: repeating-radial-gradient( circle, purple 0 10px, #4b026f 10px 20px );
Выглядеть это будет так:
Блок DIV с радиальными полосками
Выводы
Как видите с помощью CSS можно создать красочные фоны для элементов сайта и возможно отказаться от использования изображений.
Благодарности
При написании статьи были использованы следующие источники:
- https://developer.mozilla.org/ru/docs/Web/CSS/repeating-linear-gradient
- https://css-tricks.com/stripes-css/
Как через css изменить цвет png изображения?
Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый?
P.S: нагуглил про filter: hue-rotate() , но с белым цветом это походу не вариант.
Отслеживать
задан 4 фев 2017 в 13:01
279 1 1 золотой знак 3 3 серебряных знака 11 11 бронзовых знаков
посмотрите здесь fontello.com
4 фев 2017 в 14:22
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Вы можете использовать css-фильтры:
- grayscale конвертирует цвета в ч/б
- sepia создает эффект сепии
- saturate задает насыщенность
- hue-rotate меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg)
- invert инвертирует цвета
- opacity задает прозрачность элемента
- brightness изменяет яркость изображения
- contrast изменяет контрастность изображения
- blur создает эффект размытости
- drop-shadow создает тень
Примечание: фильтры можно комбинировать между собой
.bg < background-color: #8fbd35; padding: 20px; >.fl
Материал для прочтения: habrahabr
Демо: демо
SVG-градиенты
В SVG не работают привычные CSS-фоны, для заливок здесь есть свои конструкции: для градиентов это элементы linearGradient и radialGradient — линейный и радиальный градиенты соответственно.
CSS-градиенты объявляются прямо в CSS-коде, и код самого градиента потом нельзя переиспользовать. SVG-градиенты устроены иначе: перед использованием градиент должен быть описан с помощью соответствующего тега, и после этого его можно переиспользовать сколько угодно раз. И даже больше: градиенты могут наследовать свойства друг друга (об этом будет рассказано ниже).
Код самого простого градиента выглядит вот так:
linearGradient id="linear-gradient"> stop offset="0%" stop-color="gold"/> stop offset="100%" stop-color="teal"/> linearGradient>Обязательный атрибут любого градиента — id .
Градиент не отображается на странице, пока не будет применён к элементу. Так же, как и обычная заливка или обводка, градиент задаётся с помощью fill или stroke — атрибутом элемента или через CSS.
Применим градиент к фигуре:
svg> linearGradient id="linear-gradient"> stop offset="0%" stop-color="gold"/> stop offset="100%" stop-color="teal"/> linearGradient> rect fill="url(#linear-gradient)" width="100%" height="100%"/> svg>Градиент можно использовать и как заливку и как обводку для фигур и для текста:
Управление цветами
- offset — положение цвета
- stop-color — цвет
- stop-opacity — прозрачность цвета
stop offset=".25" stop-color="blue" stop-opacity=".5"/>Положение цвета задаётся в процентах или числом от 0 до 1 (50% и .5 будут работать одинаково). Цвет и положение цвета указывать обязательно.
Интересно, что в отличие от CSS-градиентов, цвета SVG-градиентов можно анимировать (в данном случае, с помощью CSS):
Линейный и радиальный градиенты имеют несколько общих свойств, но различаются способами, которыми задаются размер и направление градиента. Рассмотрим их поподробнее.
Линейный градиент
Задаётся с помощью тэга linearGradient .
Вектор градиента задаётся с помощью атрибутов x1 , y1 , x2 и y2 .
x1 и y1 задают координаты начала вектора, x2 и y2 — координаты конца (похоже на рисование линии с помощью тега line ).
Если координаты не заданы, рисуется горизонтальный градиент слева направо.
Кнопки вверху демо переключают свойство gradientUnits , отвечающее за систему координат, подробнее о нём будет рассказано ниже.
Радиальный градиент
Задаётся с помощью тега radialGradient .
Параметры градиента задаются с помощью тех же атрибутов, что определяют свойства круга (элемента circle ): центр фигуры задаётся атрибутами cx и cy , а радиус — атрибутом r :
Если какой-то из этих атрибутов не задан, ему присвоится значение по умолчанию, равное 50% .
Помимо этого, у радиального градиента есть пара специфических свойств: fx и fy . Они позволяют сдвинуть только центр градиента, не затрагивая расположение конечных цветов:
Если эти атрибуты не заданы, их значения по умолчанию будут равны cx и cy соответственно.
Общие свойства градиентов
gradientUnits
Это очень важное свойство, оно задаёт систему координат для атрибутов, отвечающих за направление и размеры градиента ( x1 , y1 , x2 и y2 для линейных градиентов и cx , cy , r , fx и fy для радиальных).
objectBoundingBox — координаты рассчитываются относительно объекта, к которому применяется градиент. Значение по умолчанию. userSpaceOnUse — координаты рассчитываются относительно системы координат всего SVG-элемента.
Помимо того, что при переключении gradientUnits градиент может менять своё положение из-за смены системы координат, это свойство также может существенно влиять на отрисовку градиента для фигур с разными шириной и высотой (например, вытянутый прямоугольник или эллипс).
При значении userSpaceOnUse цвета линейного градиента всегда будут перпендикулярны основному вектору, а радиальный градиент будет иметь форму круга. Но если градиент задан вытянутой фигуре, а значение gradientUnits равно objectBoundingBox , градиент пытается уместиться в фигуру целиком и подвергается искажениям. Особенно это заметно на радиальных градиентах:
У линейных градиентов в этом случае меняется угол расположения цветов градиента относительно его вектора:
Так что даже если системы координат фигуры и SVG-элемента совпадают, из-за разных значений gradientUnits градиент может выглядеть по-разному.
gradientTransform
Атрибут позволяет задать трансформациии градиента:
Трансформации те же, что и для обычных фигур, например, градиент можно повернуть или растянуть, но в трансформациях градиентов есть некоторые подводные камни.
Для градиентов, как и для всех прочих элементов, по умолчанию трансформации производятся относительно верхнего левого угла документа. Если требуется переопределить центр трансформации, нужно задать transform-origin . Явно в атрибуте его можно задать только для rotate (например, rotate(180, 100, 100) , два последних числа — это оно), для других трансформаций transform-origin будет работать только если он вместе с трансформацией задан в CSS. Но gradientTransform нельзя задать через CSS, следовательно transform-origin так тоже задать не получится. В этом случае можно использовать центрирование через translate (за подсказку спасибо @AmeliasBrain):
translate(x,y) scale(s) translate(-x,-y)В случае с радиальным градиентом вместо scale будет удобнее управлять радиусом градиента.
spreadMethod
Этот атритбут управляет поведением градиента, если градиент меньше, чем область отрисовки.
pad — свободное пространство заполняется крайними цветами. Значение по умолчанию. reflect — градиент отражается. repeat — градиент повторяется.
spreadMethod не работает в Safari. Если надо чтобы везде работало, линейные повторяющиеся и отражённые градиенты можно имитировать с помощью паттернов, а повторение радиальных всё-таки придётся прописывать руками.
xlink:href
Этот атрибут позволяет градиентам заимствовать друг у друга цвета и свойства. Если в градиенте, содержащем атрибут xlink:href , не заданы цвета, они унаследуются из градиента по ссылке. Также из заданного градиента унаследуются все свойства, которые не переопределены в текущем градиенте. При этом радиальные градиенты могут наследовать цвета и свойства линейного, и наоборот.
Вот пример использования:
linearGradient id="linear-gradient"> stop offset="0%" stop-color="crimson" class="stop-1"/> stop offset="49%" stop-color="gold" class="stop-2"/> stop offset="50%" stop-color="lemonchiffon" class="stop-2"/> stop offset="51%" stop-color="gold" class="stop-2"/> stop offset="100%" stop-color="teal" class="stop-3"/> linearGradient> radialGradient id="radial-gradient" xlink:href="#linear-gradient"> radialGradient>Код в действии, радиальный градиент справа унаследовал цвета линейного градиента слева:
В этом демо к градиенту слева применяется трансформация, и она также наследуется градиентом справа.
Подводные камни
Градиент можно использовать в качестве заливки и обводки, и задавать его можно как атрибутами fill и stroke , так и в CSS. При этом можно сложить градиенты в отдельный файл, и подключать их оттуда, это избавит от необходимости вставлять градиенты в тело документа.
К сожалению, все самые удобные и интересные способы не очень хорошо поддерживаются браузерами. Так, в CSS запись вида fill: url(#grad); подразумевает, что градиент с таким ID нужно искать в текущем документе. В Хроме, Опере и Сафари всё так и происходит, однако Firefox начинает искать градиент относительно расположения файла со стилями, и ожидаемо ничего не находит. Можно привести ссылку в CSS в соответствие с адресом страницы, но это не поможет, если страниц больше одной.
Запись вроде fill: url(svg-with-gradients.svg#gradient); указывает, что градиент нужно брать из внешнего файла, и это было бы суперудобно, но, к сожалению, работает только в Firefox.
Таким образом, самый надёжный способ — это задавать градиент используя атрибуты элемента.
Примеры использования
SVG-градиенты сами по себе дают интересные возможности оформления, но ещё интереснее то, как они работают в сочетании с масками. Например, используя маски и градиенты можно сделать вот такие мыльные пузыри:
Также анимируя градиенты можно делать разные интересные штуки. Например, вот такой паттерн (цвета анимируются с помощью CSS):
Или переливающийся текст:
Анимацию цветов можно сделать с помощью CSS, трансформации можно добавить только с помощью JavaScript (я это делаю с помощью библиотеки GSAP).
Показать комментарии
Сайдбар
Статьи
- Математические функции в CSS
- Адаптивное видео с помощью встроенных математических функций CSS
- Недоступность в картинках
- Единицы размеров в CSS
- Генератор цветовых тем
- Jekyll → Gatsby
- Вариативные шрифты
- Размеры в SVG
- Адаптивный Pixel Perfect
- Логотип не отвечает или временно недоступен
- SVG-паттерны
- Мыльные пузыри на SVG
- SVG-градиенты
- Весёлая консолька
- SVG-маски
- Умная прокрутка со Scroll Snap Points
- CSS-анимации для ротации изображений
- Анимированные SVG-маски
- Странности обводки в SVG
- SVG-прелоадеры
- Анимируем градиенты ещё раз
- Background-blend-mode
- Возможности оформления SVG
- CSS и SVG маски
- Nth-child и nth-of-type
- SVG-иконки
- SVG: заливка и обводка
- SVG-path
- SVG: группировка и переиспользование элементов
- SVG-фигуры и трансформации
- SVG
- СSS-градиенты и 3D
- Рисовалка анимированных теней
- Свежие CSS-паттерны
- CSS-паттерны
- Радиальные градиенты
- Линейные градиенты
- Крестики-нолики на CSS
- Border-image
- Электронные часы на CSS и JS.
- Сколько весят селекторы?
- Символы юникода
- Свойство content
- Анимируем CSS-градиенты
- Текстовые эффекты
- Древовидный список на CSS
- Css-селекторы, часть 2
- Css-селекторы
- Контекст наложения
- Два способа «прошить» элемент по краю
- Box-sizing
- Цвета в CSS
- Фон под строчками: добавляем поля
- Box-shadow
- Css-фигуры: лепесток
- Transform
- Css Animation
- 3D-куб
- Border-radius
- First letter
- Эти глаза напротив
- CSS-фигуры
- Стрелки с помощью свойства border
- Flexbox
Страницы
- SVG: полезные ссылки
- CSS-селекторы одной таблицей
- Таблица именованных цветов
- Функции Transform
- Свойства Transform
- Свойства Animation одной таблицей
- Разный синтаксис Flexbox
- Свойства Flexbox одной таблицей
Проекты
Геометрические фигуры на CSS
Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.
Квадрат
#square
Прямоугольник
#rectangle
Круг
#circle
Овал
#oval < width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; >Треугольник вверх
#triangle-up
Треугольник вниз
#triangle-down
Треугольник налево
#triangle-left
Треугольник направо
#triangle-right
Треугольник в левом верхнем углу
#triangle-topleft
Треугольник в правом верхнем углу
#triangle-topright
Треугольник в левом нижнем углу
#triangle-bottomleft
Треугольник в правом нижнем углу
#triangle-bottomright
Параллелограмм
#parallelogram
Трапеция
#trapezoid
Звезда (6-конечная)
#star-six < width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; >#star-six:after
Звезда (5-конечная)
#star-five < margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star-five:before < border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star-five:after
Пятиугольник
#pentagon < position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; >#pentagon:before
Шестиугольник
#hexagon < width: 100px; height: 55px; background: red; position: relative; >#hexagon:before < content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; >#hexagon:after
Восьмиугольник
#octagon < width: 100px; height: 100px; background: red; position: relative; >#octagon:before < content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; >#octagon:after
Сердечко
#heart < position: relative; width: 100px; height: 90px; >#heart:before, #heart:after < position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after
Знак бесконечности
#infinity < position: relative; width: 212px; height: 100px; >#infinity:before, #infinity:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after