HTML

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

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

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

Переключаться между планетами можно навигацией слева или кликом на изображение. Под описанием планеты есть рабочая кнопка «Read more» («Подробнее»).
Технологии: CSS, CSS-анимация, CSS-трансформации.
Автор: Джейми Коултер (@jcoulterdesign)

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


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

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

SVG-рисунок при прокрутке

Технологии: SVG, CSS, jQuery.js, Scrollify.js.
Автор: Али Клейн (@AliKlein)

SVG-рисунок при прокрутке Посмотреть живой пример


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

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

Трехмерный городок

Кликом и удерживанием курсора можно «крутить» пейзаж.
Эффектнее смотрится в полностраничном режиме.
Технологии: canvas, JS.
Автор: Дэйв ДеСандро (@desandro)

Трехмерный городок Посмотреть живой пример


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

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

CSS-иллюстрация «Спортсменка»

По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.
Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.
Эффектнее смотрится в полностраничном режиме.
Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.
Автор: White Pallet (@WhitePallet)

CSS-иллюстрация Спортсменка Посмотреть живой пример


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

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

«Волк Шредингера»

Кликом справа или слева вы изменяете ширину синего блока.
Технологии: CSS, CSS-анимация, CSS-трансформации, transition, mo.js (Motion Graphics for the Web).
Автор: Jean (@jeankvd)

Волк Шредингера Посмотреть живой пример


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

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

Схема-дерево на CSS и JS

Технологии: CSS, CSS-переменные, Bliss.js.
Автор: Ли Вера (@leaverou)

Схема-дерево на CSS и JS Посмотреть живой пример


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

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

Постер к фильму «Соло: Звездные войны»

Внизу можно выбирать персонажа для фона и менять текст.
Технологии: CSS, React.
Автор: Морис Мелчерс (@mephysto)

Постер к фильму Соло: Звездные войны Посмотреть живой пример


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

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

Трансформация лошади в дракона

Технологии: CSS, JS.
Автор: Эли Фитч (@elifitch)

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


дайджест

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

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

Эффект с подчеркиванием при наведении на ссылку

Технологии: CSS-анимация.
Автор: Мехмет Бурак Эрман (@mburakerman)

Эффект с подчеркиванием при наведении на ссылку Посмотреть живой пример


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

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

Праздничная анимация

Технологии: CSS, CSS-гриды, particles.js.
Автор: Триша Салас (@trishasalas)

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


перевод

Новая политика WHATWG: шаг к единому стандарту HTML?

11 декабря рабочая группа WHATWG объявила о важных изменениях в своей работе. С этого момента у WHATWG есть своя патентная политика, во многом схожая с патентной политикой W3C (специальные представители фирм-участников анализируют специальные копии стандарта на предмет патентных проблем, в «живой стандарт» попадает только то, что прошло эту проверку). Благодаря этому к WHATWG смог подключиться Microsoft, и теперь WHATWG объединяет все 4 ведущих компании-разработчика браузерных движков — Google, Mozilla, Microsoft и Apple. Также у WHATWG появилась новая «управляющая группа», которая будет следить за соответствием разрабатываемых стандартов этой политике, куда вошли представители всех 4 компаний.

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

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

Эффект 3D-печати

Технологии: CSS, Three.js, GreenSock.js.
Автор: Shaw (@shshaw)

Эффект 3D-печати Посмотреть живой пример


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

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

Анимация «Дуэль»

Технологии: CSS, SVG, JS.
Автор: Энгер Бьюза (@enger)

Дуэль Посмотреть живой пример


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

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

Бегущая зебра

Анимация меняется по клику в любом ее месте.
Технологии: CSS, three.js.
Автор: DPDK (@dpdknl)

Бегущая зебра Посмотреть живой пример


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

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

Трансформация «Жажда скорости»

Технологии: CSS, SVG, GSAP.
Автор: Крейг Роблевски (@PointC)

Трансформация Жажда скорости Посмотреть живой пример