Перевод статьи How to use variable fonts in the real world с сайта clearleft.com для CSS-live.ru, с разрешения автора — Ричарда Раттера Использовать вариативные шрифты в реальном мире не так-то легко, как оказалось. Эта статья поясняет, как мы справились с этим на новом сайте Ampersand и что мы узнали за это время. Вариативный шрифт — один файл шрифта, который умеет ...

Перевод статьи Responsive Components: a Solution to the Container Queries Problem  с сайта philipwalton.com, опубликовано на css-live.ru с разрешения автора — Филипа Уолтона. Выражения от контейнера (Container queries) — предложение, которое позволило бы веб-разработчикам оформлять DOM-элементы в зависимости от размера содержащего их элемента, а не окна браузера. Каждый веб-разработчик наверняка слыхал о таких выражениях. Разработчики нуждались в них (сначала это были «выражения от элемента», затем — «выражения от ...

Подборка свежих эффектов, интересных идей и полезных наработок. «Волк Шредингера» Кликом справа или слева вы изменяете ширину синего блока.Технологии: CSS, CSS-анимация, CSS-трансформации, transition, mo.js (Motion Graphics for the Web).Автор: Jean (@jeankvd) Посмотреть живой пример Одинокое дерево Плавный скролл и «прилипающее» меню «Конструктор» гамбургера Ссылками в левой части добавляете ингридиенты, потом кнопкой «Order» вы «Заказываете» гамбургер.Технологии: SVG, CSS, Vue.js, Anime.js.Автор: Тиффани Чхонг ...

Перевод статьи Avoiding chaos when using Flexbox ‘order’ для css-live.ru, с разрешения автора — Амелии Беллами-Ройдз Недавняя твиттерная суматоха вынудила меня сделать наконец демо с флексбоксами, которое я хотела создать еще с тех пор, как впервые начала экспериментировать с flex-свойствами CSS. Рома Комаров поделился исследованием, как с помощью флексбоксов и CSS-свойства order получить эффект сортировки таблицы на чистом CSS. Другие CSS-эксперты ...

Подборка свежих эффектов, интересных идей и полезных наработок. Схема-дерево на CSS и JS Цветные волны Имитация написания маркером Красивый эффект ввода текста Воспроизведение работ японского художника Икко Танака на CSS Миллионы сердечек Пейзаж с уточкой и деревом Очередная анимация с фигурами от Жерара Феррандеса Иконки соцсетей в ящике Красивый эффект «змейка» при переходе между формами ввода и кнопкой Эффект при наведении ...

Перевод статьи CSS Grid + CSS Multi-Columns = ♥ с сайта medium.com для CSS-live.ru, автор — Патрик Броссет В этой короткой статье я рассматриваю связь между двумя раскладочными инструментами из CSS: CSS-гриды и CSS-колонки. Эти два инструмента можно использовать вместе весьма интересными способами для построения отзывчивых веб-дизайнов. Начнём с обзора, что каждый из их делает. CSS-колонки CSS уже давно умел ...

Подборка свежих эффектов, интересных идей и полезных наработок. Постер к фильму «Соло: Звездные войны» Кнопка включения-выключения в стиле Sci-Fi Имитация трехмерного интерфейса Красивый рисунок из линий Анимация часов из блоков Трехмерная анимация соцсетей Трансформация куба на CSS Вверху слева можно убрать галочку, чтобы тени были более четкими.Технологии: CSS-анимация, CSS-трансформации.Автор: Дэвид Харшид (@davidkpiano) Посмотреть живой пример Анимация портрета Цветной маятник-змейка на CSS ...

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон Github: ссылки или кнопки? Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы ...

Перевод статьи Finally understand Redux by building your own Store с сайта toddmotto.com для CSS-live.ru, автор — Тодд Мотто Redux — интересный паттерн, нехитрый по своей сути, но почему же его порой так тяжело понять? В этой статье мы рассмотрим основные идеи Redux и внутренние механизмы хранилища (Store). Смысл здесь в том, чтобы глубже познать магию «под капотом» Redux, хранилища ...

По инсайдерской информации из W3C, просочившейся наружу в виде твита Рейчел Эндрю, рабочая группа CSS решила опубликовать первый рабочий черновик CSS-гридов второго уровня. С долгожданными подсетками и не только! Пока CSS-гриды второго уровня существуют только в виде редакторского… даже не черновика, а «неофициального предложения», сборника набросков «идей на будущее». Зато вариантов синтаксиса для подсеток в нем целых 2, включая гибкую ...