Фоновый рисунок на SVG в виде шестиугольника и рыбьей чешуи

Фоновый рисунок на SVG в виде шестиугольника и рыбьей чешуи

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

Рыбья чешуя

Разметка чешуи довольно проста:

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Обратите внимание на то, что у тега svg и идентификатора scales задан один и тот же цвет для фона background и fill соответственно. Такой же подход применяется и для шестиугольников ниже. Шаблон можно улучшить, задав обводку тега пути в rgba, а не в шестнадцатеричной системе. Так можно автоматически корректировать цвет, если изменились background и fill.

Шестиугольники

Разметка для шестиугольников минимальна:

Шаблон использует следующий код CSS:

И опять же, SVG использует тот же подход – задаются одинаковые цвета background и fill для svg и его полигонов для заполнения любого пустого пространства. В нашем случае я применил несколько трансформаций, чтобы правильно разместить фон на странице.

Свойство translate имеет особенно важное значение, так как у шестиугольника у края области просмотра одна сторона будет больше другой. Так как SVG обводка пути расширяется равномерно от «средней линии», увеличив значение stroke-width, мы уменьшим внутренние шестиугольники относительно их внешней границы.

Демо на CodePen

Для ясности в демо на CodePen SVG код вставляется напрямую в HTML; в реальности же CSS стили будут находиться внутри SVG, и все это будет закодировано в base64 код, который будет использоваться как значение для свойства background-image. Чтобы вы лучше поняли, о чем речь, я создал два отдельных демо с шестиугольниками и чешуйками на CodePen.

Источник: http://thenewcode.com/

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree