Игралась с кодами, обнаружила удивительное: оказывается, внутри CSS-свойства background можно использовать другие CSS-свойства, например, box-shadow, outline, transform и даже ещё один background!
SVG удивительная технология, не в последнюю очередь благодаря своим оригинальным подводным камням. Парочка свежих проблем была обнаружена при взаимодействии SVG с Angular, причем они возникали только в Firefox.
В прошлом посте всем было немного непонятно: почему бы не определять браузер существующими способами и зачем отказываться от JS-библиотек? У меня была причина искать способ сделать SVG-фолбек без внешних зависимостей: нужно было решение для плагина.
Есть решение для замены инлайнового SVG на фоновые картинки в браузерах, где инлайновый SVG не поддерживается. Оно построено на допущении, что на странице есть нужный нам класс .ie8, по которому SVG-элементам включаются фоновые изображения. Мне стало интересно: можно ли обеспечить поддержку способа во всех старых браузерах, используя только CSS?
Не так давно в Firefox 32 включили поддержку mix-blend-mode, a в Chrome 37 — CSS shapes. Обе технологии выглядят очень интересно, так что я решила попробовать их в действии, заодно выяснив как будет выглядеть страница в браузерах, где они не поддерживаются.
Предположим, вам понадобились SVG-иконки. Вы планируете перекрашивать их по наведению, поэтому в качестве способа вставки выбираете use. Как заставить старые браузеры понимать и отображать SVG-элементы — хотя бы пустой блок заданных размеров?
Исходные данные: три десятка бесцветных SVG-изображений (их цвета задаются потом через CSS) и задача сделать из них PNG+CSS фолбек для старых браузеров.
Вдохновляющая презентация от Дмитрия Барановского
Известно, что кастомные шрифты могут работать неожиданным образом. Если они не поддерживаются браузером или устройством, вместо символов может появиться всё что угодно. В идеале — не будет ничего, но могут быть и другие варианты, вплоть до цветных иконок непредсказуемого содержания.
Презентации и статьи про SVG и 3D-фигуры в CSS
Стеки — это ещё один способ организации SVG. Как спрайт, только лучше — как если бы мы могли использовать use в CSS. К сожалению, способ очень неравномерно поддерживается современными браузерами.
Я долгое время использовала для своих демо jsbin.com Похоже, слишком активно использовала. В какой-то момент в процессе редактирования кода Jsbin вообще переставал открываться. Тогда я открывала другой браузер, но через какое-то время он переставал открываться и там. Постепенно в дело шли все доступные браузеры и режимы инкогнито.
Эффект расходящихся лучей на чистом CSS, без использования изображений.
Видео от Lea Verou и пост от Сss-tricks c переводом.
Кажется, мне удалось сделать более удачное решение задачи про игру Го. Теперь цвета камней меняются по очереди, а вверху доски показывается цвет следующего камня.
Вдохновившись одним из примеров с выступления Ромы на Fronteers 2013, решила попробовать сделать игру Го.
Сайт сменил движок. Теперь это Jekyll — генератор статических страниц
Выступление Виталия Фридмана на Яке2013.
Пара интересных демо с Codepen.io.
На css-tricks.com опубликовали интересный способ получить цветовой круг с помощью Css. В уроке код для SASS, я попробовала сделать это простым CSS и используя меньшее количество элементов.
2 октября прошла конференция Yet another Conference 2013 от Яндекса. Было много интересного, но самое яркое впечатление оставил конкурс по ускорению отрисовки страницы.
Когда возникает необходимость сделать клеточки как в школьной тетради не используя при этом изображения, первым делом в голову приходят градиенты.
Прекрасная статья от Harry Roberts
csswizardry.com/2012/06/single-direction-margin-declarations/. Суть идеи состоит в использовании односторонних вертикальных марджинов.
Имитация масок с помощью теней.
Когда возникла необходимость отделить селекторами стили для 8-го IE, я выяснила, что он игнорирует селекторы, содержащие :root и :not, потому что они из Css3.
Пробую сочетания анимации, теней и рамок. В сафари примеры отображаются некорректно, для просмотра воспользуйтесь другими браузерами.