SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги , и даже . Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG, необходимо вставлять SVG-изображения...

Недавно я поехал в Техас и купил трехрядный диатонический баян. Диатонические аккордеоны популярны для множества различных типов народной музыки, которую обычно учат на слух. Это хорошо для меня, потому что я все равно не умею читать ноты. Аккордеон имеет 34 кнопки со стороны высоких частот и 12...

Перед нами часто возникает задача, сделать текст отзывчивым в зависимости от размера экрана устройства. Казалось бы, задача вполне тривиальна, и сходу можно назвать несколько вариантов её решения, не ломая голову, но всегда есть дополнительные условия, которые усложняют выполнение простых задач. В...

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 6–12 июня. А вот главные новости: HTTP/3 опубликован в качестве предлагаемого стандарта History API мёртв, да здравствует Navigation API WebContainers (способ запуска Node.js в браузере) официально поддерживаются в Firefox....

Хабр, привет! Сегодня мы поговорим о том, зачем надо отделять код страны от основной части телефона, зачем сохранять фокус в поле ввода после валидации, какие проблемы могут вызвать моушен анимации, как связан Esc и выпадающие списки, как фокус ускоряет ввод почты и role="button" не всегда про...

Всем привет, мне пришлось очень долго промучаться с анимацией Аккордеона и свойства max-height не прибегая к помощи Js в вычислениях, и сейчас я поделюсь с вами оптимальным решением. Читать далее...

Заголовки должны быть большими, жирными и громкими, чтобы привлекать внимание пользователя за несколько секунд. Мы перевели статью о стилях заголовков, сегодня предлагаем изучить градиенты. Читать далее...

Frontend-разработчик нашей команды Евгений Самойлов рассказывает, как сократить время написания рутинной разметки за счет преобразования простых аббревиатур в полноценные блоки кода. Читать далее...

Сегодня рассказываем о палитрах CSS в работе с многоцветными шрифтами COLRv1, которые поддерживаются в последних Chrome и Edge, и, конечно, показываем их возможности к старту курса по Frontend-разработке. Читать далее...

Я всегда хотел, чтобы CSS умел обрезать изображение и размещать его в любом нужном мне направлении. Это стало возможным благодаря использованию дополнительного элемента HTML в сочетании с различными свойствами CSS, которые я объясню позже. В этой статье я познакомлю вас с новым свойством CSS...

Дайджест новостей и интересных статей из мира фронтенд-разработки за 16—22 мая. Как отключить запрос favicon.ico, если это нужно. Вы же знали ,что ваш браузер всегда запрашивает favicon.ico? Теперь фраза «поиграться шрифтами» усложняет задачу, так как грядёт COLRv1 Как работают :where(), :is()...

Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности...