Статьи

  • Математические функции в CSS

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

    Как можно при ресайзе подогнать видео по высоте без дополнительных обёрток и JS?
    Читать дальше →
  • Недоступность в картинках

    Как скринридеры видят сайты и что они могут там не найти, если страница свёрстана плохо
    Читать дальше →
  • Единицы размеров в CSS

    Абсолютные и относительные единицы измерения в CSS: от пикселей до единиц вьюпорта
    Читать дальше →
  • Генератор цветовых тем

    Инструмент расширяет палитры из CSS/SCSS/Less-переменных и может быть полезен для карманных проектов без фиксированного дизайна. Я немного расскажу про историю появления и покажу как его можно использовать.
    Читать дальше →
  • Jekyll → Gatsby

    На днях сайт обновил движок. Последний раз это случалось в 2013-м, и тогда сайт переехал с Wordpress на Jekyll, сейчас — с Jekyll на Gatsby. Мои вопросы про Gatsby вызвали довольно оживленную дискуссию в твиттере, поэтому я решила отдельно рассказать про смену движка и опыт с Gatsby.
    Читать дальше →
  • Вариативные шрифты

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

    Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.
    Читать дальше →
  • Адаптивный Pixel Perfect

    Инструмент для проверки адаптивных страниц на соответствие макетам
    Читать дальше →
  • Логотип не отвечает или временно недоступен

    Как лучше всего верстать логотипы на сайте? Картинкой или фоном? Как логотип будет выглядеть при печати? Как обеспечить доступность для скринридеров и как сделать подсказки для поисковиков?
    Читать дальше →
  • SVG-паттерны

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

    Пузыри у меня получились почти случайно, когда я экспериментировала с SVG-градиентами.
    Читать дальше →
  • SVG-градиенты

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

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

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

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

    В процессе создания демо с анимированными SVG-масками, мне пришлось как следует разобраться с алгоритмами CSS-анимаций. В таких демо используется две анимации: одна для маски, другая для последовательного показа изображений. Меня интересовали варианты алгоритмов для второй анимации.
    Читать дальше →
  • Анимированные SVG-маски

    В прошлой статье я рассматривала странности SVG-обводки, а также возможность сделать анимированные маски. Так как трансформации в масках не анимируются в Firefox (31-я версия на момент написания статьи), я продолжила эксперименты с обводками.
    Читать дальше →
  • Странности обводки в SVG

    Веселые приключения SVG-свойства stroke-width, а также несколько странный способ сделать кроссбраузерную анимацию масок.
    Читать дальше →
  • SVG-прелоадеры

    В поисках что бы ещё такого сделать чтобы ездило, я захотела сделать прелоадеры на SVG. Такие прелоадеры могут быть использованы на любом фоне. Элементы в них могут менять не только прозрачность, но и цвет, обводку или положение в пространстве. Можно придумать огромное количество разных вариантов оформления и анимации.
    Читать дальше →
  • Анимируем градиенты ещё раз

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

    Режимы смешивания в Firefox 30 или новые приключения CSS-градиентов.
    Читать дальше →
  • Возможности оформления SVG

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

    Есть несколько способов обрезать элемент по маске. Одни поддерживаются всеми современными браузерами, другие поддерживаются очень плохо, и пользоваться ими ещё нельзя. В некоторых способах маской может быть текст. Используемые технологии — CSS, SVG + CSS, чистый SVG.
    Читать дальше →
  • Nth-child и nth-of-type

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

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

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

    Path — более сложный вариант линии. С его помощью можно нарисовать line, polyline, polygon, circle и rect. В отличие от polygon, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.
    Читать дальше →
  • SVG: группировка и переиспользование элементов

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

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

    SVG — это формат векторных изображений, основанный на XML. Имеет массу преимуществ перед растровыми изображениями: весит меньше, тянется без потери качества, а так же SVG-картинку можно не только нарисовать, но и написать её код руками
    Читать дальше →
  • СSS-градиенты и 3D

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

    Редактор позволяет рисовать разноцветные анимированные узоры из клеточек. Можно управлять скоростью анимации, размером поля, количеством клеточек и кадров.
    Читать дальше →
  • Свежие CSS-паттерны

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

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

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

    CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.
    Читать дальше →
  • Крестики-нолики на CSS

    Довольно странный вариант игры, мне хотелось понять как ещё можно сымитировать игровую логику.
    Читать дальше →
  • Border-image

    Border-image — свойство, которое задает фоновое изображение для рамки элемента. Оно позволяет легко делать невероятные штуки, для которых раньше требовалось от 3-х до 8-ми картинок и манипуляции с разметкой.
    Читать дальше →
  • Электронные часы на CSS и JS.

    С познавательно-развлекательной целью сделала электронные часы. Показывают текущее время, меняют цвет, умеют подгоняться под размер окна браузера.
    Читать дальше →
  • Сколько весят селекторы?

    Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.
    Читать дальше →
  • Символы юникода

    Полезные символы юникода с кодами для использования в Html и Css.
    Читать дальше →
  • Свойство content

    С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after, но не менее важную роль в этом играет свойство content. Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content.
    Читать дальше →
  • Анимируем CSS-градиенты

    Как анимировать градиенты если очень нужно.
    Читать дальше →
  • Текстовые эффекты

    CSS-эффекты на основе text-shadow.
    Читать дальше →
  • Древовидный список на CSS

    Как-то мне потребовалось сделать иерархическое представление структуры проекта, для реализации был выбран CSS.
    Читать дальше →
  • Css-селекторы, часть 2

    Продолжение справочника по селекторам.
    Читать дальше →
  • Css-селекторы

    Справочник по селекторам.
    Читать дальше →
  • Контекст наложения

    Если с помощью z-index изменять порядок наложения элементов друг на друга, в некоторых случаях могут возникать проблемы из-за свойств, создающих новый контекст наложения.
    Читать дальше →
  • Два способа "прошить" элемент по краю

    Есть два способа сделать эффект, как будто элемент прострочили на швейной машинке — используя псевдоэлементы и с помощью outline.
    Читать дальше →
  • Box-sizing

    Свойство box-sizing позволяет указать как ведут себя размеры блока при наличии рамок и полей.
    Читать дальше →
  • Цвета в CSS

    Мне нравится возможность задавать цвета в коде несколькими разными способами, в зависимости от цели использования. Всего таких способов 7.
    Читать дальше →
  • Фон под строчками: добавляем поля

    Проблема: если задать фон строчным элементам, получается вот так...
    Читать дальше →
  • Box-shadow

    Свойство box-shadow позволяет добавить элементам одну или несколько теней.
    Читать дальше →
  • Css-фигуры: лепесток

    Из одного div с помощью border-radius легко можно сделать лепесток.
    Читать дальше →
  • Transform

    CSS-свойство позволяет трансформировать элементы, в том числе в трехмерном пространстве.
    Читать дальше →
  • Css Animation

    Анимация позволяет оживлять элементы страницы. Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
    Читать дальше →
  • 3D-куб

    Объёмный куб с анимацией на CSS
    Читать дальше →
  • Border-radius

    Border-radius — это свойство для скругления углов.
    Читать дальше →
  • First letter

    :first-letter — это псевдоэлемент, представляющий первый символ в тексте.
    Читать дальше →
  • Эти глаза напротив

    Рисование на CSS с использованием градиентов и border-radius
    Читать дальше →
  • CSS-фигуры

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

    С помощью border можно легко делать стрелочки разного размера и в разных направлениях.
    Читать дальше →
  • Flexbox

    Справочник по флексбоксу с живыми демо
    Читать дальше →

Архив