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

Еженедельная подборка красивых эффектов на CSS/SVG/JS #10

Подборка свежих эффектов, интересных идей и полезных наработок.

До начала Хэллоуина осталось …

Счётчик до начала праздника на JS. Автор: Diana (@Diana06)


До начала Хэллоуина осталось

Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #9

Подборка свежих эффектов, интересных идей и полезных наработок.

Друзья, на этой неделе к нам прилетел Марти МакФлай и мы не могли пропустить такое событие.

Постер

Интерактивный 3D-постер на JS. Автор: Макс (@MyXoToD)


Постер

Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #8

Подборка свежих эффектов, интересных идей и полезных наработок.

Лица

Лица людей на WebGL. Осторожно! Браузер может зависнуть!

ЛицаПосмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #7

Подборка свежих эффектов, интересных идей и полезных наработок.

Текстовое конфетти

Интерактивный анимированный 3D-текст в canvas. Автор: Рэйчел Смит (@rachsmithtweets)


Карта мира

Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #6

Подборка свежих эффектов, интересных идей и полезных наработок.

Молекулярное кольцо

Анимация в виде кольца, состоящая из большого количества хаотично передвигающихся точек, в canvas. Автор: whqet (@whqet)

See the Pen zvKeeV by haiqing wang (@whqet) on CodePen.



Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #5

Подборка свежих эффектов, интересных идей и полезных наработок.

Загадочный ромб

Анимированный ромб в canvas. При клике меняет цвет. Автор: Николя Баррадю (@nicoptere)

See the Pen vasarely or something by nicolas barradeau (@nicoptere) on CodePen.


Посмотреть живой пример


(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #1

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация текста на SVG

Красивая анимация SVG текста.

See the Pen Animated text with Snapsvg by yoksel (@yoksel) on CodePen.

Посмотреть живой пример


(далее…)

Трансформации для SVG-элементов

Перевод статьи Transforms on SVG Elements с сайта css-tricks.com, автор — Ана Тудор.

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

Как и HTML-элементами, SVG-элементами можно управлять при помощи функций для трансформации. Однако, далеко не всё работает с SVG-элементами так, как с HTML-элементами

Для начала, CSS-трансформации для SVG-элементов не работают в IE. Конечно, есть вариант с использованием SVG-атрибутов трансформации для IE, в случае, если нам нужно применять для наших элементов только 2D-трансформации.

(далее…)

Эффекты с несколькими слоями при помощи контуров обрезки, фильтров и режимов наложения в 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

(далее…)