Статьи

  • You Don't Know SVG

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

  • SVG-прелоадеры

    В поисках что бы ещё такого сделать чтобы ездило, я захотела сделать прелоадеры на SVG.

    Получилось здорово, хотя результат пока не сильно подходит для использования в реальной жизни.

  • Анимируем градиенты ещё раз

    Предыдущее решение мне всё-таки кажется несколько избыточным, а тут пришел в голову ещё один способ, на этот раз — с псевдоэлементами и opacity.

  • Background-blend-mode

    На этой неделе в Firefox 30 было включено по умолчанию свойство background-blend-mode. Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.

  • Поддержка @font-face

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

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

  • Впечатления недели

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

  • Возможности оформления SVG

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

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

  • CSS и SVG маски

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

  • Nth-child и nth-of-type

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

  • SVG-стеки

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

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

  • SVG-иконки

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

  • SVG: заливка и обводка

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

  • SVG-path

    path — более сложный вариант линии. С его помощью можно нарисовать line, polyline, polygon, circle и rect, пруфлинк.

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

  • SVG: группировка и переиспользование элементов

    SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: g, defs и symbol. Элементы, группы элементов и символы можно использовать повторно.

  • SVG-фигуры и трансформации

    ← Начало про SVG

    Писать SVG довольно просто. Используются фигуры: rect, polygon, circle, ellipse, а также line, polyline и path. Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.

  • SVG

    SVG — это формат векторных изображений, основанный на XML.

    Спецификация: w3.org/TR/SVG

    SVG имеет массу преимуществ перед растровыми изображениями.

  • Звездопад на CSS

    Как-то стало интересно можно ли сделать анимированный звездопад используя CSS (если быть точнее — Sass). Оказалось, что можно, причем в зависимости от настроек результат также может быть похож на заставку Windows “Сквозь вселенную”.

  • СSS-градиенты и 3D

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

  • Рисовалка анимированных теней

    В процессе изучения JS решила написать рисовалку CSS-анимаций на основе box-shadow. Получила море удовольствия и узнала много нового.

  • Свежие CSS-паттерны

    Неожиданно увлеклась темой CSS-паттернов и сделала несколько новых. Меня интересовало: можно ли сделать плавные волны и спирали, получится ли имитировать узор из цветной бумаги и как сделать почтовую марку не используя изображения.