Pattern svg: Hero Patterns | Free repeatable SVG background patterns for your web projects

Разное 

Содержание

geometric pattern вектор бесплатно | AI, SVG и EPS

  • Все
  • AI
  • CDR
  • EPS
  • SVG
  • Все
  • Белый
  • Красный
  • Оранжевый
  • Жёлтый
  • Зелёный
  • Вода
  • Синий
  • Фиолетовый
  • Розовый
  • Чёрный
  • Серый

  • Isometric grid with editable strokes. Vector geometric seamless pattern

  • Узор вектор Pack — 49 дизайн шаблона векторов

  • Creative covers or horizontal posters in modern minimal style for corporate identity, branding, social media advertising, promo. Modern layout design template

  • Modern Blocks Building Logistics Blockchain Abstract Background

  • Seamless geometric patterns

  • Схема плетения 02

  • бесплатные геометрический рисунок

  • Abstract white and gray gradient geometric square with lighting and shadow background.

    Modern futuristic wide banner design. Can use for ad, poster, template, business presentation. Vector EPS10

  • Диагональ Bw клетчатый узор

  • Схема плетения 03 Диагональ

  • геометрические границы

  • Узор елочка наброски

  • Схема плетения 04

  • Шаблон ложных кубов

  • Африканские границы полная страница

  • Wave textures white background. Abstract modern grey white waves and lines pattern template. Vector stripes illustration.

  • геометрический рисунок

  • орнамент

  • геометрические фигуры

  • Шаблон треугольной

  • Шаблон Сота бежевый

  • геометрический рисунок

  • Vector Checker Halftone Pattern Smooth Curve Border Red Blue Abstract Background

  • abstract gray white triangle, geometric background, striped polygon pattern, network concept

  • Узор клетчатые Виши 02ok

  • Шаблон Сота Грэй

  • Dot Abstract Pixel Modern Edge Background

  • Abstract Retro Grunge Colorful Simply Modern Liquid Background

  • Wave Line Abstract Tech Background

  • Африканский шаблон вертикальных

  • Шаблону Трискелион

  • Шаблон радиальной симметрии

  • Схема плетения 01

  • Шаблон волнистые 01

  • Узор клетчатые Bw

  • Геометрические модели 3

  • Узор клетчатые Vichy 03 Pink

  • Селтик, повторяя геометрический рисунок

  • Шаблон синий клетчатый Vichy 04

  • Abstract Shapes Landing Page Background

  • Геометрические узоры 2

  • геометрический рисунок вектор

  • Африканский Шаблон горизонтальных

  • плиточный шаблон

по следам трансформации-невидимки — CSS-LIVE

Взрыв популярности SVG-графики приносит не только новые дизайнерские удачи, но и неожиданные «открытия» неочевидных тонкостей, малоизвестных особенностей и «белых пятен», разбросанных по обширной SVG-спецификации. Даже признанные гуру фронтенда не застрахованы от таких сюрпризов. Вот и наше расследование началось с недоуменного твита Аны Тюдор, знаменитой множеством потрясающих демо-примеров (в т.ч. с SVG):

«Дурацкий» вопрос по #svg: почему первое работает, а второе нет? Единственное различие — width=150 против width=100

Речь шла о следующем примере:

See the Pen SVG Firefox WTF by Ana Tudor (@thebabydino) on CodePen.

В обсуждении выяснилось, что проблема возникает в Firefox, причем по-разному: у кого-то, как у самой Аны, красная линия посередине отобразилась только в левом (меньшем) блоке, у кого-то оба блока отобразились без линии. Где-то паттерн пропадал из виду при width больше 133px, где-то — уже после 80, у кого-то (под Linux) отображались оба, но с огромной загрузкой процессора. Большинство ответивших склонялось к мысли, что это баг Firefox.

Но если присмотреться, то и в Chrome тут можно заметить странность: края линии получились слегка «замыленными», причем в правом (большем) блоке — сильнее (отчего линия там выглядит шире и тусклее). И вместе это наводит на мысль, что это не просто баг — дело пахнет очередной загадкой стандарта!

По мере приближения к разгадке (вынужден признаться, что вместо того, чтобы сразу полезть в спецификацию, я потратил какое-то время на поиски бага в багзилле: не повторяйте моей ошибки!) ситуация казалась лишь более запутанной. Вот еще один пример:

See the Pen SVG Firefox WTF by Ilya Streltsyn (@SelenIT) on CodePen.

Он, в отличие от первого, работает как ожидалось, но… обратите внимание на значения width и height у элементов pattern!

Как всегда, разгадку приходится искать в спецификации, но и там найти ее удается не сразу.

Спецификация SVG1.1 говорит следующее:

Атрибуты ‘x’, ‘y’, ‘width’, ‘height’ и ‘patternUnits’ определяют эталонный прямоугольник где-то на бесконечном холсте. Верхний левый угол эталонного прямоугольника — в точке (x, y), а нижний правый — в точке (x + width, y + height).

Вроде всё логично: width и height, как следует из названия, задают размер паттерна. Чтобы заполнить прямоугольник одним «куском» паттерна, логично задать прямоугольнику и паттерну одинаковые размеры (как в примере Аны), не так ли? Подвох может таиться разве что в атрибуте patternUnits, о котором чуть ниже сказано вот что:

Определяет систему координат для атрибутов ‘x’, ‘y’, ‘width’ и ‘height’.

…

Если patternUnits="objectBoundingBox", действующая система координат для атрибутов ‘x’, ‘y’, ‘width’ и ‘height’ устанавливается по боксу, описанному вокруг элемента, которому задан паттерн (см. Единицы окаймляющего бокса для объекта), после чего к ней применяется трансформация, указанная в атрибуте ‘patternTransform’.

Если атрибут  ‘patternUnits’ не задан, то результат будет как при значении 'objectBoundingBox'.

Казалось бы, в нашем случае системы координат паттерна и самого элемента не должны различаться, как минимум масштабом: вы где-нибудь в примерах видите трансформацию? И я не вижу… но она есть:). Дьявол притаился в последней детали, которую я в предыдущей цитате выделил жирным:

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

И там же сказано, что с этим ключевым словом значения координат и ширины/высоты выражаются в долях размеров прямоугольника, описанного вокруг элемента, к которому применяется паттерн. В наших примерах сам этот элемент — прямоугольник, т.е. доли отсчитываются от его собственных размеров. И чтобы сделать паттерн равным элементу, в качестве размеров нужно задать единицу. Пазл сложился!

Ну а что же происходило в исходном примере? Получается, что «где-то на бесконечном холсте» мы рисовали гигантский — в 100–150 раз больше самого элемента — паттерн, его содержимое тоже масштабировалось до огромных размеров, а потом всё это опять уменьшалось до размеров бокса, чтобы вписаться в него. На мой взгляд, неудивительно, что при этой операции накапливались ошибки округления, и где-то могло произойти переполнение или превышение лимита. И причина загрузки процессора при рендеринге стала понятнее.

Так что всегда, всегда внимательно читайте спецификации! И не спешите паниковать или винить во всём браузеры, столкнувшись с чем-то, противоречащим интуиции. И, если не уверены в поведении по умолчанию, страхуйте себя явным заданием значений. Например, в данном случае проблемы можно было бы избежать, задав patternUnits="userSpaceOnUse" — как рекомендует не только это руководство, но и сама спецификация (примерами). И да пребудет с вами сила SVG!

P.S. Это тоже может быть интересно:

Pattern Svg — Etsy.de

Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.

Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.

Найдите что-нибудь памятное, присоединяйтесь к сообществу, делающему добро.

( 1000+ релевантных результатов, с рекламой Продавцы, желающие расширить свой бизнес и привлечь больше заинтересованных покупателей, могут использовать рекламную платформу Etsy для продвижения своих товаров. Вы увидите результаты объявлений, основанные на таких факторах, как релевантность и сумма, которую продавцы платят за клик. Узнать больше. )

Perfect Patterns For Screen Reader Users — Smashing Magazine

  • 7 минут чтения
  • SVG, Инструменты, Техники, Доступность
  • Поделиться в Твиттере, LinkedIn
Об авторе

Кэри Фишер — автор, спикер и разработчик, которая увлечена пересечением внешнего кода и UX, цифровой доступности и разнообразия в… Больше о Carie ↬

Узнайте, каких шаблонов SVG нам следует избегать, а какие шаблоны наиболее информативны при сравнении различных комбинаций ОС, браузеров и программ чтения с экрана. Кэри также проведет онлайн-семинар по шаблонам Accessible Front-End по всем аспектам доступности интерфейса.

Несмотря на то, что масштабируемая векторная графика (SVG) была впервые представлена ​​в конце 90-х годов, в последнее десятилетие она пережила массовый всплеск популярности благодаря своей исключительной гибкости, высокой точности и относительной легкости в мире, где пропускная способность и производительность имеют большее значение, чем всегда. Достижения в JavaScript и введение медиа-запросов CSS, таких как @prefers-color-scheme и @prefers-reduced-motion, расширили функциональность SVG далеко за пределы их первоначального варианта использования простого отображения векторных изображений на веб-сайте.

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

В этой статье описываются двенадцать различных шаблонов SVG, найденных «в дикой природе», и каждое альтернативное описание объявляется при доступе с помощью различных комбинаций операционных систем, браузеров и программ чтения с экрана.

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

Основные альтернативные описания с использованием тега

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

Шаблон №1:

+ alt="[words]" 
 Что говорит лиса? wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Шаблон №2:

+ role="img" + alt="[words]" 
 Что говорит лиса?

Шаблон №3:

+ role="img" + aria-label="[words]"

Паттерн №4:

+ role="img" + aria-labelledby="[ID]" 
 
Что говорит лиса?

Основные альтернативные описания с использованием тега

Вторая группа из четырех шаблонов использует тег со встроенным файлом SVG. Хотя добавление кода SVG непосредственно в разметку потенциально может немного замедлить загрузку страницы, эта незначительная неэффективность будет компенсирована за счет большего контроля над визуальными элементами или анимацией ваших изображений. Добавляя свой SVG непосредственно в HTML, у вас также есть больше возможностей, когда дело доходит до предоставления информации об изображении пользователям программы чтения с экрана.

Шаблон №5:

+ role="img" + </code></h4><pre> <svg role="img" ...> <title>Что говорит лиса? [код дизайна]

Шаблон №6:

+ role="img" + 
 
   Что говорит лиса?
   [код дизайна]

Шаблон №7:

+ role="img" + </code> + <code> aria-describedby="[ID]" </code></h4><pre> <svg role="img" aria-describedby="fox7" .<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/08/2b/d3/082bd392f725bce8caf6f6ea0582f04e--computer-wallpaper-wallpaper-desktop.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/08/2b/d3/082bd392f725bce8caf6f6ea0582f04e--computer-wallpaper-wallpaper-desktop.jpg' /></noscript> .. > <title>Что говорит лиса? [код дизайна]

Шаблон № 8:

+ role="img" + </code> + <code> aria-labelledby="[ID]" </code></h4><pre> <svg role="img" aria-labelledby= "лиса8" ...> <title>Что говорит лиса? [код дизайна]

Больше после прыжка! Продолжить чтение можно ниже ↓

Расширенные альтернативные описания с использованием тега

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

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

В зависимости от типа и объема информации, которую необходимо добавить в SVG, вы можете рассмотреть возможность использования другого подхода.

Шаблон № 9:

+ role="img" + </code> + <code> <text> </code></h4><pre> <svg role="img" ...> <title>Что говорит лиса? Узнаем ли мы когда-нибудь? [код дизайна]

Шаблон № 10:

+ role="img" + </code> + <code> <desc> </code></h4><pre> <svg role="img" ...> <title>Что говорит лиса? Узнаем ли мы когда-нибудь? [код дизайна]

Шаблон №11:

+ role="img" + </code> + <code> <desc> </code> + <code> aria-labelledby="[ID]" </code></h4><pre> <svg role=" img" aria-labeledby="fox11 description11" ...> <title>Что говорит лиса? Узнаем ли мы когда-нибудь? [код дизайна]

Шаблон № 12:

+ role="img" + </code> + <code> <desc> </code> + <code> aria-describedby="[ID]" </code></h4><pre> <svg role=" img" aria-describedby="fox12 description12" .<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/f9/37/04/f937046e849fb205fc4fc3f70bd1bc60--fish-patterns-textile-patterns.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/f9/37/04/f937046e849fb205fc4fc3f70bd1bc60--fish-patterns-textile-patterns.jpg' /></noscript> ..> <title>Что говорит лиса? Узнаем ли мы когда-нибудь? [код дизайна]

См. полную версию CodePen [Сравнение доступных шаблонов SVG (версия Fox)] (https://codepen.io/smashingmag/pen/dyvvbKj) Кэри Фишер.

См. полное сравнение шаблонов SVG с доступом на CodePen (версия Fox) Кэри Фишер.

Победители и проигравшие шаблоны SVG

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

Основные альтернативные описания с использованием тега

(группа 1)
Best In Show
  • Шаблон 2 : + role="img" + ] alt="[
  • Паттерн 3 : + Роль = "IMG" + ARIA-LABEL = "[СЛОВА]"
ИСПОЛЬЗОВАНИЕ QUUTION
    .
     + role="img" + aria-labeledby="[ID]"
    Не рекомендуется
    • Паттерн 1 : + ALT = "[Слова]"

    ОСНОВНЫЕ АЛЕКТОРЫ В Show

    • Pattern 5 : + Роль = "IMG" +
    • Паттерн 8 : 1161611111111111111111111111111111,
    • 11111111111111111161,
    • 1111111111113 . <название> + ARIA-labelledby = "[id]"
    Используйте осторожность
    • Паттерн 7 : + Роль = "IMG" +
    • 1161161111111111111111111111111111,9012 + . = "[Id]"
    Не рекомендуется
    • Паттерн 6 : + Роль = "IMG" + 1161616161616 9016. 9016. 9016. 9016. > Тег (группа 3)
      Best In Show
      • Шаблон 11 : + role="img" + </code> + <code> <desc> </code> = "6"IDlabelledby 0-<code> aria</li></ul><p> <strong> Примечание </strong> : <em> Хотя этот шаблон не идеален, поскольку он повторяет альтернативные описания, он не игнорирует ни один из элементов тестирования, в отличие от шаблонов «соблюдайте осторожность».<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/f7/5d/00/f75d00721f7067644cd0f11c92e4d78c.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/f7/5d/00/f75d00721f7067644cd0f11c92e4d78c.jpg' /></noscript> </em></p><h4><span class="ez-toc-section" id="i-11"> Будьте осторожны </span></h4><ul><li> <strong> Шаблон 9</strong> : <code> <svg> </code> + <code> role="img" </code> + <code><title> </code> + <code> <text> </code></li><li> <strong> Шаблон 10 </strong> : <code> <svg> 1="90g" <code> 6 + <code> role </code> title> </code> + <code> <desc> </code></li><li> <strong> Шаблон 12 </strong> : <code> <svg> </code> + <code> ]" </code></li></ul><h5><span class="ez-toc-section" id="i-12"> Не рекомендуется </span></h5><ul><li> Ни один из шаблонов в этой группе полностью не прошел тесты.</li></ul><h3><span class="ez-toc-section" id="i-13"> Результаты тестирования </span></h3><p data-height="480" data-theme-id="light" data-slug-hash="YzZQBwG" data-user="smashingmag" data-default-tab="result"> См. ручку [Результаты тестирования] (https://codepen.io/smashingmag/pen/YzZQBwG) Кэри Фишер.</p> См. «Результаты пентестинга» Кэри Фишер.<h3><span class="ez-toc-section" id="i-14"> Подведение итогов </span></h3><p> Важно отметить, что частью интерпретации результатов тестов шаблонов SVG является понимание того, что у создателей каждого средства чтения с экрана есть <strong> рекомендуемые браузеры, </strong> которые они полностью поддерживают.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/6e/b5/e5/6eb5e50532f1bf5d337e3acca5020446.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/6e/b5/e5/6eb5e50532f1bf5d337e3acca5020446.jpg' /></noscript> Это не означает, что вы не должны или не можете использовать программу чтения с экрана в другом браузере, это просто означает, что если вы это сделаете, результаты могут быть не такими точными, как если бы вы использовали рекомендуемые.</p><p> Тестирование шаблонов для этой статьи действительно включало некоторые <strong> комбинации браузеров и программ чтения с экрана </strong>, которые могут попасть в категорию «второстепенных», но есть также примечания о том, какие комбинации операционных систем, браузеров и программ чтения с экрана рекомендуются для вашего собственное тестирование. Результаты этих тестов должны помочь вам принять наилучшее возможное решение по шаблону SVG, исходя из ваших потребностей и ограничений шаблона.</p><p> Напоминание о том, что перед тем, как выбрать шаблон, убедитесь, что вы знаете основы того, как и когда создавать доступные изображения, и что вы полностью понимаете требуемую альтернативную информацию, необходимую для различных типов изображений.</p><p> Если вам нужна дополнительная помощь в принятии решения о том, какой шаблон использовать для вашей среды, ознакомьтесь со статьей Хорошо, лучше, лучше всего: распутывая сложный мир доступных шаблонов, которая поможет вам ориентироваться в каверзных водах доступных шаблонов.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/7d/dc/c1/7ddcc164512ea0b3506b897f0cc68604--repeating-patterns-adobe-illustrator.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/7d/dc/c1/7ddcc164512ea0b3506b897f0cc68604--repeating-patterns-adobe-illustrator.jpg' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></article><div class="sparkle-author-box"><div class="sparkle-author-image"> <img alt='' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g' data-srcset='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=520&d=mm&r=g 2x' class='lazy lazy-hidden avatar avatar-260 photo' height='260' width='260' /><noscript><img alt='' src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g' class='avatar avatar-260 photo' height='260' width='260' /></noscript></div><div class="sparkle-author-details"> <span class="author-name"> <a href="https://art-nto.ru/author/alexxlab" title="Записи alexxlab" rel="author">alexxlab</a> </span> <span class="author-designation"> Автор записи </span><div class="author-desc"></div></div></div><nav class="navigation post-navigation"><div class="nav-links"><div class="nav-previous"><a href="https://art-nto.ru/raznoe/kak-sdelat-padayushhie-listya-v-fotoshope-padayushhie-listya-i-lepestki-czvetov-na-prozrachnom-fone-png.html" rel="prev">Как сделать падающие листья в фотошопе: Падающие листья и лепестки цветов на прозрачном фоне, PNG</a></div><div class="nav-next"><a href="https://art-nto.ru/raznoe/chto-tajmlaps-chto-takoe-tajmlaps-i-kak-ego-primenit-v-videonablyudenii.html" rel="next">Что таймлапс: Что такое таймлапс и как его применить в видеонаблюдении?</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/pattern-svg-hero-patterns-free-repeatable-svg-background-patterns-for-your-web-projects.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://art-nto.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='58386' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><section id="secondaryright" class="home-right-sidebar widget-area" role="complementary"><aside id="search-2" class="widget clearfix widget_search"><form role="search" method="get" class="search-form" action="https://art-nto.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /></form></aside><aside id="categories-3" class="widget clearfix widget_categories"><h2 class="widget-title"><span>Рубрики</span></h2><ul><li class="cat-item cat-item-9"><a href="https://art-nto.ru/category/vektor">Вектор</a></li><li class="cat-item cat-item-5"><a href="https://art-nto.ru/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-10"><a href="https://art-nto.ru/category/maket">Макет</a></li><li class="cat-item cat-item-7"><a href="https://art-nto.ru/category/programm">Программ</a></li><li class="cat-item cat-item-3"><a href="https://art-nto.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-6"><a href="https://art-nto.ru/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://art-nto.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-8"><a href="https://art-nto.ru/category/urok">Урок</a></li><li class="cat-item cat-item-4"><a href="https://art-nto.ru/category/shrift">Шрифт</a></li></ul></aside></section></div></div></div><footer id="colophon" class="site-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"><div class="footer-social"><div class="sparkle-wrapper"></div></div><div class="copyright-footer"><div class="sparkle-wrapper"><div class="footer_text"><div id="c_copyright"><p>© 2019. <a href="http://art-nto.ru/" title="Независимое театральное объединение "Зрительские симпатии"">Независимое театральное объединение "Зрительские симпатии"</a></p><p class="text">Все права защищены и охраняются законом Российской Федерации об Авторском праве. Копирование материала разрешено только с использованием ссылки на Art-Nto.ru</p><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div></div></div><div class="scroll-to-top"> <i class="icofont fa fa-angle-up"></i></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://art-nto.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://art-nto.ru/wp-content/cache/autoptimize/js/autoptimize_9471d9f23e7f057b4ffc0056d7cd41ec.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="8bbf7bf07390985ffbb318cc-|49" defer></script>