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

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

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

Раскладка на CSS-гридах с использованием CSS-перспективы

Имитация обложек музыкальных альбомов.
Технологии: CSS-гриды, CSS-трансформации, JS.
Автор: Энди Барефут (@andybarefoot)

Интересная раскладка на CSS-гридах с использованием CSS-перспективы Посмотреть живой пример


(далее…)

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

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

Верстка страницы в стиле комиксов на CSS-гридах

Технологии: CSS grid, clip path.
Автор: Рен Айша (@rrenula)

Часы, цифры которых тоже состоят из цифр Посмотреть живой пример


(далее…)

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

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

Анимация текста в стиле отпечатков пальцев

Технологии: CSS, SVG, CSS анимация, GSAP.js.
Автор: Джон Хили (@jhealey5)

Смена дня и ночи Посмотреть живой пример


(далее…)

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

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

Анимация пейзажа с островом

Технологии: CSS, SVG, GSAP.js.
Автор: Issey (@issey)

Анимация пейзажа с островом на CSS Посмотреть живой пример


(далее…)

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

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

Анимация с велосипедом

Эта анимация — интерактивная. Нужно кликнуть по любом ее месту, и дальше вы сможете управлять облаком. Стрелками «влево»-«вправо» на клавиатуре вы двигаете облако, а пробелом вызываете дождик. Велосипедист реагирует на всё это, когда проезжает под облаком.
Технологии: CSS, bodymovin.js, anime,js.
Автор: Мариуш Дабровски (@MarioD)

Анимация с велосипедом Посмотреть живой пример


(далее…)

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

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

Слайдер на react

Технологии: CSS, react.js.
Автор: Николай Таланов (@suez)

Слайдер на react Посмотреть живой пример


(далее…)

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

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

Спираль из текста на CSS

Технологии: CSS трансформации и анимация.
Автор: Карпе Нумидиум (@carpenumidium)

Спираль из текста Посмотреть живой пример


(далее…)

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

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

Пейзаж с оленями и анимированным фоном

Технологии: CSS, JS.
Автор: Марио Дуарте (@MarioDesigns)

Пейзаж с оленями и анимированным фоном Посмотреть живой пример


(далее…)

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

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

Эффект отражения пейзажа в надписи

Анимация работает при наведении курсора
Технологии: CSS.
Автор: Алекс (@alexpopovich)

Этапы формирования заказа на CSS с анимацией Посмотреть живой пример


(далее…)

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

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

Анимация с мармеладкой

Удерживая курсор, можно перемещать мармеладку. (Для работы анимации требуется высота окна браузера не менее 500px.)
Технологии: canvas, JS: matter, p5
Автор: Мариуш Дабровски (@MarioD)

Анимация с мармеладкой Посмотреть живой пример


(далее…)

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

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

Слайдер с эффектом размытия при смене изображений

Технологии: CSS анимация, трансформации, SVG фильтры, JS
Автор: Дамиан Мути (@damianmuti)

Слайдер с эффектом размытия при смене изображений Посмотреть живой пример


(далее…)

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

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

Солнечная система 3D

Технологии: CSS, JS.
Автор: Джулиан Гарнье (@juliangarnier)

Солнечная система 3D Посмотреть живой пример


(далее…)

Новые статусы HTML5.1 и SVG2

15 сентября 2016 г. — особый день для веб-стандартов: сразу две важные спецификации обновили свой статус. HTML5.1 стал предложенной рекомендацией (последняя, чисто формальная стадия перед окончательным утверждением!). Так что, если вы еще не убрали из закладок старичка HTML5.0, самое время обновить их.

Основные отличия нынешней публикации от июньского кандидата в рекомендации — убраны некоторые новинки, которые так и не были реализованы и находились «под риском», например, элемент dialog и тип toolbar для menu. В целом же поддержка HTML5.1 браузерами весьма неплоха.

А рабочая группа HTML продолжает работу уже над следующей редакцией HTML — HTML5.2. С прошлого месяца доступен ее публичный черновик. Как пишет в блоге W3C один из авторов спецификации, Чарльз МакКэти Невил, HTML5.1 — самая близкая к реальности и лучше всех нацеленная в будущее спецификация HTML из когда-либо существовавших, но HTML5.2 должна превзойти ее в этом. И исправить большинство ее ошибок. Планируется, что HTML5.2 будет готов уже в следующем, 2017 году, так что пора поглядывать и в этот черновик.

А в мире SVG перемены еще круче: основной стандарт векторной графики обновил не вторую, а первую цифру. SVG2 стал кандидатом в рекомендации, что означает, что стандарт проработан теоретически и готов к реализации. Предыдущая версия стандарта — SVG1.1 — была рекомендацией аж с 2003 года (с «косметическим» обновлением до второй редакции в 2011-м), так что необходимость таких перемен назревала давно. Особенно при нынешней популярности SVG в вебе.

Раздел существенных изменений по сравнению с SVG1.1 внушительный — 30 подразделов! Некоторые разделы старой спецификации из новой полностью убраны, многое унифицировано со стандартами DOM и CSS, уточнены многие неоднозначные места. Вообще изменений столько, что, пожалуй, самое время учить SVG заново:). К сожалению, далеко не все новинки поддерживаются актуальными браузерами, но с новым статусом спецификации браузерам должно стать просто стыдно их игнорировать. Так что готовимся к новым невиданным красотам в вебе!

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

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

Космический пончик

Технологии: CSS.
Автор: Ана Тюдор (@anatudor)

Космический пончикПосмотреть живой пример


(далее…)