Архив

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

    Игралась с кодами, обнаружила удивительное: оказывается, внутри CSS-свойства background можно использовать другие CSS-свойства, например, box-shadow, outline, transform и даже ещё один background!
    Читать дальше →
  • SVG плюс Angular минус Firefox

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

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

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

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

    Предположим, вам понадобились SVG-иконки. Вы планируете перекрашивать их по наведению, поэтому в качестве способа вставки выбираете use. Как заставить старые браузеры понимать и отображать SVG-элементы — хотя бы пустой блок заданных размеров?
    Читать дальше →
  • Зачем я написала плагин для Grunt

    Исходные данные: три десятка бесцветных SVG-изображений (их цвета задаются потом через CSS) и задача сделать из них PNG+CSS фолбек для старых браузеров.
    Читать дальше →
  • You Don't Know SVG

    Вдохновляющая презентация от Дмитрия Барановского
    Читать дальше →
  • Поддержка @font-face

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

    Презентации и статьи про SVG и 3D-фигуры в CSS
    Читать дальше →
  • SVG-стеки

    Стеки — это ещё один способ организации SVG. Как спрайт, только лучше — как если бы мы могли использовать use в CSS. К сожалению, способ очень неравномерно поддерживается современными браузерами.
    Читать дальше →
  • JsBin или Codepen?

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

    Эффект расходящихся лучей на чистом CSS, без использования изображений.
    Читать дальше →
  • Полезное про анимацию и эффекты

    Видео от Lea Verou и пост от Сss-tricks c переводом.
    Читать дальше →
  • Игра Го на CSS: ещё одна попытка

    Кажется, мне удалось сделать более удачное решение задачи про игру Го. Теперь цвета камней меняются по очереди, а вверху доски показывается цвет следующего камня.
    Читать дальше →
  • Попытка сделать игру Го на CSS

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

    Сайт сменил движок. Теперь это Jekyll — генератор статических страниц
    Читать дальше →
  • Responsive Web Design: Clever Tips and Techniques

    Выступление Виталия Фридмана на Яке2013.
    Читать дальше →
  • Вдохновляющие штуки

    Пара интересных демо с Codepen.io.
    Читать дальше →
  • Цветовой круг на CSS

    На css-tricks.com опубликовали интересный способ получить цветовой круг с помощью Css. В уроке код для SASS, я попробовала сделать это простым CSS и используя меньшее количество элементов.
    Читать дальше →
  • Скоростное обучение или поход на YAC2013

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

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

    Прекрасная статья от Harry Roberts csswizardry.com/2012/06/single-direction-margin-declarations/. Суть идеи состоит в использовании односторонних вертикальных марджинов.
    Читать дальше →
  • Маски и эффекты

    Имитация масок с помощью теней.
    Читать дальше →
  • CSS-hacks

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

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