Статьи

  • Вариативные шрифты

    Вариативные (или настраиваемые) шрифты — это, без преувеличения, новая страница в веб-типографике. Настраиваемые шрифты стали возможны благодаря совместным усилиям компаний Microsoft, Apple, Adobe и Google. Концепция была впервые представлена в сентябре 2016 года, вместе с релизом OpenType 1.8.

  • Размеры в SVG

    Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.

  • Адаптивный Pixel Perfect

    Начну издалека. Не так давно я присоединилась к HTML Академии в качестве наставника. Помимо того, что наставничество помогает упорядочить свои знания, оно удивительным образом стимулирует разработку разных полезных штук, потому что в процессе появляются интересные задачи, решение которых можно удобно автоматизировать.

  • Логотип не отвечает или временно недоступен

    Заинтересовалась вопросом: как лучше всего верстать логотипы на сайте? Как правильно и почему? Картинкой или фоном? Как логотип будет выглядеть при печати? Как обеспечить доступность для скринридеров и как сделать подсказки для поисковиков?

  • SVG-паттерны

    pattern — это элемент, который можно использовать в качеcтве заливки или обводки. Содержимое паттерна может быть самым разным: фигуры, символы, текст или растровые изображения — в любых сочетаниях.

  • Инлайновые стили в background-image

    Игралась с кодами, обнаружила удивительное: оказывается, внутри CSS-свойства background можно использовать другие CSS-свойства, например, box-shadow, outline, transform и даже ещё один background.

  • Мыльные пузыри на SVG

    Честно говоря, пузыри у меня получились почти случайно, когда мне потребовалось как следует изучить градиенты и я экспериментировала с их возможностями. И я сама до сих пор не очень понимаю, как так получилось, используя только SVG — векторный формат, — сделать такой невесомый мыльный пузырь.

  • SVG-градиенты

    В SVG не работают привычные CSS-фоны, для заливок здесь есть свои конструкции: для градиентов это элементы linearGradient и radialGradient — линейный и радиальный градиенты соответственно.

  • Весёлая консолька

    Недавно мне пришлось отлаживать очень капризный скрипт, в котором, по ощущениям, происходили какие-то паранормальные явления. Чтобы найти проблему, понадобилось вывести в консоль браузера большое количество отладочной информации.

  • SVG-маски

    SVG-маски — это очень богатая тема. В SVG есть два способа обрезать один элемент с помощью другого: это clip-path и mask. Clip-path для обрезки использует только контуры фигур, игнорируя заливки и обводки, с масками всё гораздо интереснее: в них учитываются и заливки, и обводки, и яркость содержимого.

  • Умная прокрутка со Scroll Snap Points

    В Firefox начиная с 39-й версии появились интересные CSS-свойства, которые позволяют управлять поведением прокручиваемого контента.

  • SVG плюс Angular минус Firefox

    SVG удивительная технология, не в последнюю очередь благодаря своим оригинальным подводным камням. Если вы начали работать с SVG — скучно точно не будет.

    Парочка свежих проблем была обнаружена при взаимодействии SVG с Angular, причем они возникали только в Firefox. Я решила описать проблемы и их решения здесь: себе на память, другим на пользу.

  • Обновление плагина svg_fallback

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

  • Трюк на CSS для поддержки SVG в старых браузерах

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

    Очевидный недостаток способа состоит в том, что мы должны отдельно позаботиться о том, чтобы нужный нам класс был — при генерации страницы на сервере или же определив браузер с помощью JS.

  • Режимы наложения и их фоллбеки

    Не так давно в Firefox 32 включили поддержку mix-blend-mode, a в Chrome 37CSS shapes, то есть возможность управлять формой, по которой текст будет обтекать элемент. Обе технологии выглядят очень интересно, так что я решила попробовать их в действии, заодно выяснив как будет выглядеть страница в браузерах, где они не поддерживаются.

  • Грабли на чистом SVG

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

  • Зачем я написала плагин для Grunt

    В один прекрасный день перед нами (мной и моими коллегами) встала задача обработать большое количество SVG-иконок. Исходные данные: три десятка бесцветных SVG-изображений (их цвета задаются потом через CSS) и задача сделать из них PNG+CSS фолбек для старых браузеров.

  • CSS-анимации для ротации изображений

    В процессе экспериментов с анимированными SVG-масками, мне пришлось как следует разобраться с алгоритмами CSS-анимаций.

  • Анимированные SVG-маски

    В прошлой статье я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски.

    Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками.

  • Странности обводки в SVG

    Экспериментируя с SVG можно обнаружить много странных моментов. Получить странное при манипуляциях с масштабированием ещё как-то ожидаемо, но внезапно сюрпризы преподнесло свойство stroke-width.