Как сделать фон в полоску

Оцените материал
(0 голосов)

Проблема

Полоски всех размеров, цветов и углов так же, если не больше, распространены в веб-дизайне, как и в любых других видах визуального дизайна, от журналов до обоев. Однако процесс реализации такого дизайна далек от идеала. Обычно мы создаем отдельное растровое изображение и каждый раз, когда возникает необходимость внести изменения, прибегаем к помощи графического редактора. Некоторые вместо этого используют файлы SVG, но это особый формат, синтаксис которого далек от дружественного. Правда, было бы здорово, если бы мы могли создавать полоски прямо в CSS? Вас это может удивить, но это возможно!

Как сделать  фон в полоску

 

Решение

Предположим, что у нас есть простейший вертикальный линейный градиент, от  #fb3 до  #58a:

background: linear-gradient(#fb3, #58a);

Теперь попробуем немного приблизить друг к другу границы перехода цвета

background: linear-gradient(#fb3 20%, #58a 80%);

Теперь верхние 20% нашего контейнера заполнены сплошным цветом  #fb3 , а нижние 20% — сплошным цветом  #58a . Настоящий градиент занимает только 60% высоты контейнера. Если мы еще сильнее сдвинем границы перехода цвета (40% и 60% соответственно, как показано на рис. 2.22), то высота градиента станет еще меньше. Возникает вопрос: а что произойдет, если границы перехода цвета встретятся на одном уровне?

background: linear-gradient(#fb3 50%, #58a 50%);

Если в одной и той же позиции определено несколько границ перехода цвета, то они образуют бесконечно малый переход от цвета, указанного в правиле первым, к цвету, указанному последним. Фактически в этой позиции вместо гладкого перетекания происходит просто резкая смена цвета. Как вы видите  никакого градиента больше нет, только два участка сплошного цвета, каждый из которых занимает по половине нашего back ground-image . По сути, мы создали две большие горизонтальные полосы. Так как градиенты — это всего лишь сгенерированные фоновые изображения, то с ними можно обходиться так же, как с любыми другими фоновыми изображениями, например, корректировать их размер с помощью background-size.

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

Мы уменьшили высоту наших двух полосок до  15px каждая. Так как наш фонповторяется, теперь весь контейнер заполнен горизонтальными полосами.
Схожим образом можно создавать полосы неравной ширины, просто корректируя позиции границ перехода цвета:

background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;

Для того чтобы избежать необходимости корректировать два значения каждый раз, когда нам нужно изменить ширину полосок, воспользуемся преимуществом, которое дает нам спецификация:
Если для границы перехода цвета задана позиция, меньшая чем позиция любой другой границы перехода цвета перед ней в списке, то следует установить ее позицию равной наибольшей позиции среди всех предшествующих границ перехода цвета. Это означает, что если для второго цвета мы зададим позицию на уровне  0 , то браузер скорректирует ее, увеличив до позиции предыдущей границы перехода цвета, — как раз то, что нам требуется. Следовательно, следующий фрагмент кода создает точно такой же градиент, который мы уже видели, и при этом лучше соответствует принципам DRY:

background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

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

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/horizontal-stripes

Вертикальные полосы

Горизонтальные полосы реализовать проще всего, но на веб-сайтах, которые нам попадаются в Сети, встречаются фоны не только с горизонтальными  полосами. Не менее распространены вертикальные полосы, а самые популярные и визуально  интересные — это, вероятно, разные варианты диагональных полос. К счастью, градиенты CSS помогают справиться и с этими задачами, предлагая решения разной степени сложности.  Код, создающий вертикальные полосы, очень похож на предыдущий. Главное отличие —  дополнительный первый аргумент, указывающий направление градиента. Мы могли бы указать его и при определении горизонтальных полос, но тогда нам было бы достаточно значения по умолчанию ( to bottom ). Помимо этого, в данном случае нам, очевидно, необходимо указать другие значения  background-size :

background: linear-gradient(to right, /* или 90deg */ #fb3 50%, #58a 0);
background-size: 30px 100%;

Наши вертикальные полосы. Вверху: заполнение вертикальными полосами без повторения. Внизу: повторяющиеся полосы

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/vertical-stripes

Диагональные полосы

После горизонтальных и вертикальных полос кажется логичным попытаться создать диагональные полосы (с углом наклона 45°), еще раз изменив значение background-size и направление градиента, например, так:

background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;

Однако, этот способ не работает. Причина в том, что мы всего лишь повернули градиент внутри каждой плитки на 45°, а не определили повторяющуюся фоновую картинку. Вспомните растровые изображения,  которые мы обычно используем для создания диагональных полос.


Они включают четыре полосы, а не две, поэтому стыки между плитками совершенно не заметны. Именно такой рисунок нам необходимо создать с помощью CSS-кода, поэтому добавим еще парочку границ перехода цвета:

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

Наши полосы под углом 45°; пунктирными линиями обозначена повторяющаяся плиткарисунка

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

 где a и b — длины катетов. Для равностороннего прямоугольного треугольника с углами 45° формула принимает вид
В случае с нашими диагональными полосами размер фона определяет длину гипотенузы, но ширина полосы в действительности равна длине катета. Схема, объясняющая эти расчеты, показана на рисунке.

Это означает, что для того, чтобы получить полосы шириной  15px , как в предыдущих примерах, в качестве размера фона необходимо указать значение
 пиксела:

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

Но если только на вас не наставили дуло пистолета и не заставляют под страхом смерти создавать диагональные полосы шириной ровно 15 пикселов (кстати,гибель все равно неизбежна, потому что  2 — нера-
циональное число, так что даже указанное нами значение приблизительное, хотя и с высокой степенью точности), я настоятельно рекомендую округлять это тяжеловесное число до чего-нибудь вроде  42.4px или даже  42px .

Готовые полосы под наклоном 45°; обратите внимание, что ширина полос такая же, как в предыдущих примерах

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/diagonal-stripes

 

Еще лучшие диагональные полосы

Метод, продемонстрированный в предыдущем разделе, не обеспечивает особой гибкости. А что, если мы захотим создать полосы под углом 60°, а не 45°? Или 30°? Или 3,1415926535°? Если мы попытаемся изменить угол градиента, результат будет просто ужасным (на

К счастью, существует гораздо лучший способ рисования диагональных полос. Этот факт не слишком известен, но  linear-gradient() и  radial-gradient() также предлагают версии с повторением:  repeating-linear-gradient() и  repeating-radial-gradient(). Они работают совершенно так же, с одним только отличием: границы перехода цвета повторяются бесконечно, пока не заполнят все изображение. Так, например, следующий повторяющийся градиент:


background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
эквивалентен этому простому линейному градиенту:
background: linear-gradient(45deg, #fb3, #58a 30px, #fb3 30px, #58a 60px, #fb3 60px, #58a 90px, #fb3 90px, #58a 120px, #fb3 120px, #58a 150px, ...);
Повторяющиеся линейные градиенты идеальны для — вы уже догадались — полос! Благодаря их повторяющейся природе мы можем создавать цельные фоны из сгенерированных градиентных изображений. Это означает, что нам больше не нужно беспокоиться о рисовании бесшовно стыкующихся плиток, которые затем нужно уложить для формирования фона элемента. Для сравнения: фоновое изображение на рис. 2.33 можно было бы создать с помощью такого повторяющегося градиента:

background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

Первое очевидное преимущество — уменьшение количества повторений: для того чтобы изменить любой из цветов, нам нужно внести только две правки вместо трех. Также обратите внимание, что теперь размеры определяются в терминах границ перехода цвета градиента, а не  background-size . Размер фона используется первоначальный; для градиента это размер элемента. Это означает, что длины также становятся более понятными, так как измеряются они по градиентной линии, которая перпендикулярна нашим полосам.
Однако самое больше преимущество состоит в том, что теперь мы можем задать абсолютно любой угол, и градиент будет работать — не нужно большеразмышлять над проработкой плиток с бесшовным соединением. Например, вот как определяются полосы под углом 60°:
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

Настоящие полосы под углом 60°.

Потребовалось всего лишь изменить угол! Обратите внимание, что с этим методом нам требуются четыре границы перехода цвета для двух цветных полос, независимо от угла наклона полос. Это означает, что для создания горизонтальных и вертикальных полослучше все же использовать первый метод, а к этому прибегать для определения диагональных полос. Если же мы имеем дело с полосами под углом 45°, то эти два метода можно даже объединить, по сути, воспользовавшись повторяющимися линейными градиентами для упрощения кода, который создает нашу повторяющуюся плитку:

background: repeating-linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size: 42.426406871px 42.426406871px;

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/diagonal-stripes-60deg
ПРОТЕСТИРУЙТЕ!
http://play.csssecrets.io/test-color-stop-2positions

Гибкие нежные полосы

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

background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);

Как видно на рис. 2.37, мы создали чередующиеся полосы цвета  #58a и одного из более светлых его вариантов. Однако взаимоотношение между этими цветами не очевидно, если просто прочитать код. Более того, если бы нам потребовалось
изменить базовый цвет, то это повлекло бы за собой четыре (!) правки.

БУДУЩЕЕ. ГРАНИЦЫ ПЕРЕХОДА ЦВЕТА С ДВУМЯ ПОЗИЦИЯМИ
Скоро у нас появится возможность указывать две позиции для одной и той же границы перехода цвета и это одно из базовых запланированных дополнений в CSS Image Values Level 4 Это задумано как сокращение, позволяющее задать две последовательные границы перехода цвета с одним и тем же цветом, но разными позициями и очень востребованная функциональность при создании градиентных узоров. Например, код для диагональных полос выглядел бы так:

background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);

Это не только намного более емкий код, но и намного более соответствующий принципам DRY: цвета больше не дублируются, поэтому для изменения цвета достаточно одной правки. К сожалению, на сегодня данная функциональность не поддерживается ни одним браузером. Но надеюсь в будущем будет. К счастью, существует лучший способ: вместо того чтобы задавать собственныйцвет для каждой полосы, мы можем сделать наш самый темный цвет цветом фона, который будет просвечивать сквозь полосы полупрозрачного белого цвета:

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

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

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/subtle-stripes

Десерт на сегодня - очень крутая химическая реакция. Почему в школе таких не показывают?  Досмотрите до конца

Прочитано 1155 раз Последнее изменение Воскресенье, 29 января 2017 14:20
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+