Архив тегов: SVG

Эффекты с несколькими слоями при помощи контуров обрезки, фильтров и режимов наложения в CSS

Перевод статьи MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Режимы наложения, контуры обрезки и фильтры в CSS делают ряд эффектов, которые раньше были доступны только в PhotoShop, возможными в вебе

Одна из возможностей, которая объединяет эти CSS-свойства — наложение изображений, для сравнений «до — после», или чтобы реализовать другие визуальные эффекты. Примером может быть наложение лица Хью Джекмана поверх фото Клинта Иствуда в том же возрасте; что особенно эффектно, поскольку они обладают похожими формой черепа и чертами лица.

(далее…)

Весенние новинки Рабочей группы CSS

Прошедшая половина весны, похоже, выдалась активной и плодотворной для Рабочей группы CSS в W3C. Почти весь март прошел в постоянных телеконференциях и встречах, на которых было принято немало конструктивных решений. В частности, решено больше не менять текущую спецификацию Flexbox (наконец!), поскольку браузеры до сих пор не могут разобраться с последствиями предыдущей смены насчет абсолютно позиционированных потомков флекс-контейнера. Выпущено три новых интересных спецификации и активно дорабатывались существующие. Много внимания уделялось заслуженному модулю CSS3 UI (в частности, уточнению нюансов полезного свойства box-sizing) — он обновлялся дважды, последний раз буквально позавчера. (далее…)

Маленькая неочевидность в SVG-паттернах: по следам трансформации-невидимки

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

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

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

(далее…)

Использование встроенных SVG с резервной поддержкой Grunticon

Перевод статьи Inline SVG with Grunticon Fallback с сайта css-tricks.com, c разрешения автора — Криса Койера.

Вышел Grunticon 2! Он обзавелся новым вебсайтом. Grunticon — это невероятно крутой инструмент для создания системы SVG-иконок. Рабочий процесс выглядит следующим образом:

  1. Поместите все SVG-иконки в одну папку
  2. Запустите Grunticon в этой папке, и он подготовит всё, что необходимо
  3. Поместите в <head> крохотный скрипт
  4. И используйте HTML в формате <div class="icon-image"></div> там, где вам понадобится использовать иконки
  5. Наслаждайтесь!

(далее…)

Карманное руководство по написанию SVG. Глава 6

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

(далее…)

Карманное руководство по написанию SVG. Глава 5

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

(далее…)

Карманное руководство по написанию SVG. Глава 4

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

(далее…)

Карманное руководство по написанию SVG. Глава 3

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

(далее…)

Карманное руководство по написанию SVG. Глава 2

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

(далее…)

Карманное руководство по написанию SVG. Глава 1

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

(далее…)

Карманное руководство по написанию SVG. Введение

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG

(далее…)

Руководство по SVG-анимациям (SMIL)

Перевод статьи A Guide to SVG Animations (SMIL) с сайта css-tricks.com, автор — Сара Суэйдан. Публикуется с разрешения автора.

Перед вами гостевой постинг Сары Суэйдан. Сара — мастер докапываться до самых глубин классных веб-новинок, подробно и понятно разбирая их до основания. Здесь она погружается в недра SMIL (и смежных технологий) и синтаксиса анимаций, встроенного в сам SVG, и делится с нами этим внушительным руководством.

Введение

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

  • <animate> — позволяющий анимировать скалярные атрибуты и свойства в течение периода времени;
  • <set> — являющийся удобным сокращением для animate, что удобно для задания анимаций для нечисловых атрибутов и свойств, наподобие свойства visibility;
  • <animateMotion> — позволяющий двигать элемент по заданной траектории;
  • <animateColor> — изменяющий значение цвета каких-либо атрибутов или свойств с течением времени. Заметьте, что элемент <animateColor> устарел, и вместо него рекомендуется использовать обычный элемент animate для свойств, принимающих значения цвета. Тем не менее, он всё еще есть в спецификации SVG 1.1, где он явно помечен как устаревший; из спецификации SVG 2 он удален полностью.

В дополнение к анимационным элементам, определенным в спецификации SMIL, SVG включает расширения, совместимые со спецификацией SMIL animations; эти расширения включают атрибуты, расширяющие функциональность элемента <animateMotion>, и дополнительные анимационные элементы. В расширения SVG входят:

(далее…)

Универсальная независимость при помощи SVG

В этой статье мы рассмотрим масштабируемую векторную графику (Scalable Vector Graphics или сокращённо SVG), как одну из наиболее недостающих технологий в современном сайтостроении.

Прежде чем приводить конкретные примеры, давайте посмотрим на уровень web’а сегодня и то, куда он движется. За последние годы дизайн сайтов обозначил новую тенденцию в развитии техники универсального дизайна (Responsive Website Design). И это к лучшему. По существу, универсальный дизайн обеспечивает переход от использования полюбившихся нам фиксированных по ширине страниц, к вёрстке плавающих форм с интеллектуальным перемещением их содержимого. Добавьте к этому продуманную стратегию содержимого и мобильный подход, и мы уже начинаем предлагать универсальный опыт адаптации под множество устройств и браузеров, удовлетворяя потребности конечного пользователя.

(далее…)