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

Перевод статьи Focusing on Focus Styles с сайта css-tricks.com для CSS-live.ru, автор — Эрик Бейли Не у каждого пользователя интернета есть мышка под рукой. При чтении со смартфона это очевидно! К тому же есть и другие способы ввода, которыми люди решают свои задачи. И для них нужны стили для фокуса. Люди Люди сложно устроены. Мы не всегда последовательны, а наши решения не ...

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

Перевод статьи A f*cking rant about f*cking const vs f*cking let с сайта https://jamie.build/ для css-live.ru, автор — Джеймс Кайл Не хотел я быть автором этой заметки, но Крис меня вынудил, так что этот хмырь и есть главный виновник. А я просто попал под раздачу. Но вы все изрядно перебираете с const в своем JavaScript-коде, и меня это хоть самую чуточку, но бесит. 1. const ни ...

Хотя у языка CSS уже давно нет версий (т.е. «CSS3» уже никогда не будет «готов», а «CSS4» и выше вообще не будет), Рабочая группа CSS периодически выпускает «снимки» (snapshots), отражающие реальное состояние CSS на тот или иной момент. Последний такой «снимок», CSS-2017, вышел год назад, с тех пор W3C решил сделать их ежегодными — в чем-то похоже, как у спецификаций HTML5.x ...

Подборка свежих эффектов, интересных идей и полезных наработок. SVG-рисунок при прокрутке Необычный слайдер в стиле ползунка Многоугольники Удерживая курсором, фигуры можно перемещать. Обратите внимание, что их цвет меняется в зависимости от положения относительно друг друга (красный, зеленый, синий).Технологии: canvas, JS, Pixi.js.Автор: Блейк Боуэн (@osublake) Посмотреть живой пример Анимация «Старцы» по мотивам Лавкрафта Разворот книги на CSS Поворот карточек на CSS Эффект ...

Перевод статьи Additive Animation with the Web Animations API с сайта css-tricks.com для CSS-live.ru, автор — Дэн Уилсон Эти возможности пока что не поддерживаются ни одним стабильным браузером. Однако, всё, о чем я сейчас расскажу, уже есть в Firefox Nightly, и ключевые части есть в Chrome Canary (при включенном флаге «Экспериментальные возможности веб-платформы»), поэтому во время чтения этой статьи я рекомендую использовать ...

Подборка свежих эффектов, интересных идей и полезных наработок. Трехмерный городок Кликом и удерживанием курсора можно «крутить» пейзаж.Эффектнее смотрится в полностраничном режиме.Технологии: canvas, JS.Автор: Дэйв ДеСандро (@desandro) Посмотреть живой пример Перетасовка карт на Vue Кнопкой Shuffle колода перетасовывается. Кнопками Slow — Medium — Fast можно управлять скоростью.Технологии: CSS, Vue.js.Автор: Hassan Dj (@itslit) Посмотреть живой пример Анимация страницы отписки от рассылки Генератор домиков ...

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

Перевод статьи Third party CSS is not safe с сайта jakearchibald.com, опубликовано на css-live.ru с разрешения автора — Джейка Арчибальда. Несколько дней назад немало шума наделал «кейлоггер», написанный на CSS. Одни требовали, чтобы браузеры это «починили». Другие вникли чуть поглубже и заметили, что уязвимость коснулась лишь сайтов, написанных на фреймворках типа Реакта — мол, это Реакт виноват. Но на самом деле проблема в том, что сторонний ...