Рисование css: Знакомство с созданием изображений на чистом CSS. Часть первая. Для начинающих

Пути (paths) — SVG | MDN

• « Предыдущая статья
• Следующая статья »

Элемент <path> («путь»)– наиболее мощный элемент в библиотеке основных форм SVG. С его помощью можно создавать отрезки, кривые, дуги и многое другое.

С помощью элементов <path> создают сложные формы, объединяя многочисленные прямые и кривые линии. Сложные формы из одних только прямых линий можно создавать и через элемент polyline. Хотя результаты работы обоих элементов могут быть похожи, элемент polyline отображает кривые как много маленьких прямых линий, что не очень хорошо масштабируется до больших размеров. Хорошее понимание path важно при рисовании SVG. При создании сложных paths не рекомендуется использовать XML или текстовые редакторы – понимание, как они работают, позволит установить и исправить проблемы с отображением SVG.

Форма элемента path определяется одним атрибутом: d (смотри подробности в основные формы).

Атрибут d содержит серию команд и параметров, используемых этими командами. Мы опишем доступные команды и покажем примеры того, что они делают.

Каждая команда обозначается специальной буквой. Например, нам надо переместиться в точку с координатами (10,10). Команда «Передвинуть к» вызывается буквой M. Когда синтаксический анализатор наталкивается на эту команду, он знает, что необходимо переместиться к указанной точке. Итак, для перемещения к точке (10,10) используется команда «M 10 10», и далее синтаксический анализатор переходит к следующей команде.

Все команды существуют в двух вариантах: вызов команды с заглавной буквы обозначает абсолютные координаты на странице, а команда со

строчной буквой -относительные (например, перемещение от последней точки на 10px вверх и 7px влево).

Координаты в атрибуте d всегда пишутся без указания единиц измерения и находятся в системе пользовательских координат (обычно это пиксели). Позже мы рассмотрим, как элемент paths может быть трансформирован для других нужд.

Существуют пять команд линии для узлов <path>. Первая команда — это «Переместиться к», или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда «Переместиться к» используется в начале элемента

<path> для указания точки, откуда начнётся рисование, например:

M x y

или

m dx dy

Следующий пример рисует одну только точку (10,10). Заметьте, однако, что при обычном использовании <path> она вообще не была бы видна.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10"/>
  <!-- Точки -->
  <circle cx="10" cy="10" r="2" fill="red"/>
</svg>

Существуют три команды, которые рисуют линии. Самая общая — команда «Линия к», вызываемая буквой L.

Эта команда принимает два параметра — координаты точки x и y — и рисует линию от текущего положения к этой точке.

 L x y (или l dx dy)

Для рисования горизонтальных и вертикальных линий есть две укороченные формы . H рисует горизонтальную линию, а V рисует вертикальную линию. Обе команды используют только один аргумент, так как они движутся только в одном направлении.

 H x (или h dx)
 V y (или v dy)

Начнём с рисования простой формы, например, прямоугольника (такого же, какой проще нарисовать с помощью элемента

<rect>). Он состоит только из горизонтальных и вертикальных линий:

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
  <!-- Точки -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>
</svg>

Нашу запись в примере выше можно немного сократить , используя команду «Закрыть путь», Z. Эта команда рисует прямую линию от текущего положения обратно к первой точке пути. Она часто встречается в конце узла пути, хотя и не всегда. Для неё регистр буквы не важен.

 Z (или z)

Таким образом наш путь из примера можно сократить до:

 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

Точно такую же картину можно получить с помощью относительных форм этих команд. Как уже говорилось, относительные команды вызываются использованием букв нижнего регистра и перемещают курсор относительно его последнего положения, а не к точным координатам . В нашем примере, поскольку размеры нашего квадрата — 80 x 80, элемент <path> можно записать так:

 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

Путь начнётся от точки (10,10), пойдёт горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.

Возможно, в этих примерах было бы проще использовать элементы <polygon> или <polyline>. Однако, пути используются при рисовании SVG настолько часто, что многим разработчикам может быть удобнее использовать их вместо других элементов. Нет никакой разницы в производительности при использовании того или другого.

Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых — кривые Безье, а третья — «дуга», или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на Wikipedia. Информации о кривых Безье слишком много, чтобы попытаться охватить её здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.

Кривые Безье

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

Таким образом, чтобы создать кубическую кривую Безье, вам необходимо указать три набора координат.

 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие — контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создаёт плавную кривую, которая ведёт от наклона, который вы установили в начале вашей линии к наклону на другом конце.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>

Пример сверху показывает девять кубических кривых Безье. Чем ближе к левому краю изображения, тем более горизонтально разделёнными становятся контрольные точки. Ближе к правому, становятся более отделёнными от конечных точек. Стоит отметить, что кривая начинается в направлении первой контрольной точки, а затем изгибается, переходя в направление второй контрольной точки.

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

 S x2 y2, x y (or s dx2 dy2, dx dy)

Команда S задаёт тот же тип кривой, что и был, но если он следует за другой S или C командой, подразумевается, что первая контрольная точка — отражение той, что использовалась перед этим. Если команда S не следует за другой командой S или C, то подразумевается, что текущая позиция курсора используется как первая контрольная точка.

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

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

Другой тип кривой Безье — квадратичная кривая, задаётся командой Q. Квадратичная кривая проще, чем кубическая: для неё требуется только одна контрольная точка, которая определяет наклон кривой как в начальной, так и в конечной точке. Она принимает два аргумента: контрольную точку и конец кривой.

 Q x1 y1, x y (or q dx1 dy1, dx dy)

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

Как и в случае кубической кривой Безье, существует сокращение для соединения нескольких квадратичных кривых Безье -T.

 T x y (or t dx dy)

Как и ранее, сокращение смотрит на предыдущую контрольную точку, которую вы использовали, и выводит из неё новую. Это означает, что после первой контрольной точки вы можете делать довольно сложные фигуры, указав только конечные точки.

Примечание: Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

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

Дуги

Другой тип кривых линий, которые можно создать с помощью SVG — дуга (команда A). Дуги — секции кругов или эллипсов. При заданных x- и y-радиусах есть два эллипса, которые могут соединяться любыми двумя точками (пока они находятся внутри радиуса круга). Вдоль любого из этих кругов есть два пути, которые могут использовать для соединения точек, так что в любой ситуации возможно 4 дуги.

 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

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

Третий параметр описывает поворот дуги. См. пример ниже

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

Пример показывает элемент path, который проходит по странице диагонально. В центре этого элемента вырезаны две эллиптические дуги (радиус x = 30, радиус y = 50). В первой дуге параметр x-asix-rotation = 0, а это означает, что эллипс, по которому проходит дуга (показан серым) расположен вертикально. Во второй дуге параметр x-asix-rotation = -45. Это поворачивает эллипс так, что направление его малой оси совпадает с направлением пути, как это видно на рисунке выше.

Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент — large-arc-flag. Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент — sweep-flag. Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 315
           L 110 215
           A 36 60 0 0 1 150.71 170.29
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
  <circle cx="110" cy="215" r="2" fill="red"/>
  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
</svg>

Заметьте, что каждый голубой эллипс сформирован двумя дугами, в зависимости от того движетесь ли вы по часовой или против часовой стрелке. Каждый эллипс имеет короткую и длинную дуги. Оба эллипса просто зеркальные отражения друг друга. Они отражены вдоль линии, сформированной start->end точками.

Если start->end точки расположены далеко и не попадают в пределы градусов эллипсов по x и y, то в этом случае радиусы эллипсов будут увеличены до величины, нужной чтобы достичь точек start->end. Интерактивный codepen внизу этой страницы наглядно это демонстрирует. Для определения достаточны ли велики радиусы ваших эллипсов чтобы требовать увеличения, вам нужно решить систему уравнений подобную этой на wolfram alpha. Это вычисление для non-rotated эллипса с start->end (110, 215)->(150.71, 170.29). Решением, (x, y), является центр эллипса(ов). Следующее вычисление для non-rotated эллипса с start->end (110, 215)->(162.55, 162.45). Решение будет мнимым если радиусы ваших эллипсов слишком малы. Решение содержит небольшой мнимый компонент потому, что эллипсы были лишь слегка расширены.

Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент — large-arc-flag. Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент — sweep-flag. Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

Последние два аргумента, если вы ещё не догадались, обозначают координаты x и y, где заканчивается дуга. Дуги — лёгкий способ создавать части кругов или эллипсов в ваших рисунках. Например, круговая диаграмма требует отдельную дугу для каждого куска диаграммы.

Если вы переходите в SVG из Canvas а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определён. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: http://codepen.io/lingtalfi/pen/yaLWJG (протестировано только в Chrome и Firefox, может не работать в вашем браузере)

• « Предыдущая статья
• Следующая статья »

Last modified: 5 дек. 2022 г., by MDN contributors

Про CSS

Математические функции в 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

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

Рисование с помощью кода: введение в искусство CSS | by Anna Pawl

Графика Anna Pawl

Искусство CSS лежит на пересечении векторной иллюстрации и разработки интерфейса. Он включает в себя манипулирование элементами HTML