Привычные нам CSS-селекторы 3 уровня стали рекомендацией W3C еще в 2011-м (почти одновременно с CSS2.1), а черновик селекторов 4 уровня был опубликован еще в 2013-м и очень долго не менялся. Но на этой неделе рабочая группа CSS спохватилась и показала, что работа над селекторами не заброшена. С перерывом в два дня обе спецификации обновились: 30 января — старая, а 1 ...

Подборка свежих эффектов, интересных идей и полезных наработок. Трансформация лошади в дракона Анимация со щупальцами Солнце из-под воды Интерактивный фон Визитки на CSS-гридах Анимация работает по наведению и клику на одну из стопок. Интересный скролл.Может неправильно работать в IE.Технологии: CSS-гриды, JS.Автор: Джон Кантнер (@jkantner) Посмотреть живой пример Трехмерная надпись из блоков Скейтборд Таблица фигур Лиссажу Анимация «Павлиний хвост» на CSS CSS-иллюстрация ...

Подборка свежих эффектов, интересных идей и полезных наработок. Бегущая зебра Портреты Анимация «Винтовая линия (Helix)» Трансформация логотипа Красивая анимация с линиями Анимация волны из частиц Анимация с курицей SVG-анимация леттеринг-логотипа Список дел с CSS-анимацией Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях. P.S. Это тоже может быть интересно:

Перевод статьи All You Need To Know About CSS-in-JS с сайта hackernoon.com для CSS-live.ru, автор — Индрек Ласн Прекрасная иллюстрация Анны Дадей Краткая выжимка статьи — поговорим о компонентном подходе к CSS. Больше нет необходимости в поддержке множества CSS-файлов. CSS-in-JS делает логику CSS абстракцией уровня компонента, а не уровня документа (используя принцип модульности). Пример со стилизованным React-компонентом Предположу, что вы слышали термины «CSS-in-JS», «стилизованные компоненты», «Radium», «Aphrodite», но не стали в них вникать, ...

Подборка свежих эффектов, интересных идей и полезных наработок. Анимация «Дуэль» Неоновая вывеска Анимация с авокадо Нужно «схватить» курсором косточку и потянуть в сторону. Предупреждение: анимация сопровождается звуком!Технологии: canvas, CSS, JS.Автор: Себастьян ДеРосси (@derossi_s) Посмотреть живой пример Портрет из текстовой мозаики Создание рисунка из частиц «Нарисуйте» какие-нибудь линии «ручкой», удерживая курсор. После этого нажмите «Create Particles» для генерации частиц.Технологии: canvas, WebGL, particles.js.Автор: ...

Подборка свежих эффектов, интересных идей и полезных наработок. Эффект 3D-печати Нарядный переключатель Ракета в космосе Красивая анимация логотипа Креативное резюме с SVG-анимацией при прокрутке Эффектнее всего выглядит в полностраничном режиме (справа вверху кнопка «Change View» — «Full Page»).Технологии: SVG, CSS-трансформации, CSS-анимация, GreenSock.js.Автор: Ева (@SoyEva) Посмотреть живой пример Праздничный календарь на гридах Рисунок девушки Линии образуют рисунок при загрузке страницы. Чтобы посмотреть ...

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

Подборка свежих эффектов, интересных идей и полезных наработок. Праздничная анимация Парад солдатиков с параллакс-эффектом Конструктор машины Шестиугольный прогресс-бар Глючный прогресс-бар Автор высмеивает бессмысленные прогресс-бары: когда индикатор вроде и есть, а толку от него ноль.Технологии: CSS-анимация.Автор: Крис Смит (@chris22smith) Посмотреть живой пример Трансформации иконок соцсетей Анимация с кофемашиной Градиентный фон при наведении Оптическая иллюзия Когда уголки квадратов окрашиваются, возникает иллюзия искажения прямых ...

Подборка свежих эффектов, интересных идей и полезных наработок. Эффект с подчеркиванием при наведении на ссылку Оптическая иллюзия с цветными кругами Посмотрите на два круга: кажется, что это голубой и зелёный. На самом деле они одного и того же цвета циан.Технологии: SVG.Автор: Эллиот Гено (@pyrografix) Посмотреть живой пример Трансформации героев фильма «Звездные войны: Последний джедай» из многоугольников Навигация по героям — над портретами, ...

Спецификация CSS Box Alignment становится всё более зрелой, и кроме шпаргалки по выравниванию блоков Рейчел Эндрю и нашего обзора свойств для выравнивания всего в сети появляются новые материалы о ней. Пожалуй, пришла пора и нам освежить знания об этих свойствах. Общий принцип Спецификация CSS Box Alignment предлагает 9 свойств для выравнивания всего. Все они состоят из двух частей и получаются ...