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

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

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

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

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

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

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

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

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

Вдохновляющая презентация от Дмитрия Барановского: You Don't Know SVG.

Продолжая интересоваться разными способами сделать иконки, решила поискать что-нибудь про поддержку @font-face на мобильных устройствах.

Известно, что кастомные шрифты могут работать неожиданным образом. Если они не поддерживаются браузером или устройством, вместо символов может появиться всё что угодно. В идеале — не будет ничего, но могут быть и другие варианты, вплоть до цветных иконок непредсказуемого содержания.

Пока нет времени на полноценные статьи, просто поделюсь интересными ссылками.

Стеки — это ещё один способ организации SVG. Как спрайт, только лучше — как если бы мы могли использовать use в CSS.

К сожалению, способ очень неравномерно поддерживается современными браузерами.

Я долгое время использовала для своих демо jsbin.com. Похоже, слишком активно использовала. В какой-то момент в процессе редактирования кода Jsbin вообще переставал открываться.

Мне хотелось сделать эффект расходящихся лучей на чистом CSS, без картинок.

Видео от Lea Verou и пост от Сss-tricks.

Кажется, мне удалось сделать более удачное решение задачи про игру Го.

По сравнению с предыдущей версией, цвета камней меняются по очереди, а вверху доски показывается цвет следующего камня.

Вдохновившись одним из примеров с выступления Ромы на Fronteers 2013, решила попробовать сделать игру Го.

В эти выходные сайт сменил не только дизайн, но и движок. Теперь это Jekyll — генератор статических страниц.

Искала выступление Виталия Фридмана на Яке2013, нашла вот это

Пара интересных демо с Codepen.io.

На css-tricks.com опубликовали интересный способ получить цветовой круг с помощью Css: css-tricks.com/conical-gradients-css.

В уроке код для SASS, я попробовала сделать это простым CSS и используя меньшее количество элементов:

2 октября прошла конференция Yet another Conference 2013 от Яндекса. Было много интересного, но самое яркое впечатление оставил конкурс по ускорению отрисовки страницы.

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

Прекрасная статья от Harry Roberts csswizardry.com/2012/06/single-direction-margin-declarations/.

Суть идеи состоит в использовании односторонних вертикальных марджинов.

Имитация масок с помощью теней.

Когда возникла необходимость отделить селекторами стили для 8-го IE, я выяснила, что он игнорирует селекторы, содержащие :root и :not, потому что они из Css3.

Пробую сочетания анимации, теней и рамок.

В сафари примеры отображаются некорректно, для просмотра воспользуйтесь другими браузерами.