Как перекрасить svg в css

Как покрасить SVG-иконку?

Доброго вечера.
Есть SVG-символ, который далее вставляется и используется через use. В общем, стандартный набор. Но есть одно «но» — он не реагирует на свойство color, вообще. Иконка упрощенно представляет собой кольцо, созданное через тэг path (да, я знаю, что для кругов path не используется, но иконки делались через иллюстратор путем конвертации путей из фотошопа, и не хотелось бы возиться с генерируемым кодом — работаем с тем, что есть).

Прочел, что необходимо убрать атрибуты fill, stroke, т.к. они имеют больший приоритет, нежели css. Ок, хорошо. Но поведение становится непонятным и неадекватным:
— если я убираю stroke у элемента path, исчезают все видимые элементы
— если я уберу и атрибут fill тоже, получается сплошной круг, а нужно кольцо
— во всех вышеперечисленных случаях ничего не реагирует на css-правило с color

Как покрасить иконку через css? Фиддл всего этого дела.

• Вопрос задан более трёх лет назад
• 16724 просмотра

Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных

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

Шрифты — векторные, так что вам не нужно беспокоиться о разрешении экрана. Для них можно использовать те же CSS-свойства, что и для текста. В результате вы имеете полный контроль над их размером, цветом и стилем. Вы можете добавлять к ним эффекты, трансформировать или декорировать их. Например, повернуть ( rotate ), подчеркнуть ( underline ) или добавить тень ( text-shadow ).

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

Да, еще одна вещь, которая абсолютно невозможна при использовании иконочных шрифтов: поддержка многоцветности. Только SVG может это сделать.

TL;DR: этот пост позволяет вникнуть в то, как и почему. Если вы хотите понять весь процесс, читайте дальше. В противном случае вы можете посмотреть окончательный код на CodePen.

Настройка символов SVG-иконок

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

Использование SVG-символов позволяет иметь лишь один экземпляр каждого SVG-элемента и использовать его где угодно с помощью ссылки.

Начните с добавления встроенного SVG, спрячьте его, оберните содержимое в тег symbol и задайте ему id .

Полная разметка SVG-элемента пишется один раз и скрывается.

Затем все, что вам нужно сделать, это создать копию иконки с помощью элемента use .

Получится точная копия вашей оригинальный SVG-иконки.

Вот она! Довольна милая, правда?

Вы вероятно заметили атрибут xlink:href — это и есть ссылка между вашей иконкой и оригинальным SVG-изображением.

Важно отметить, что xlink:href — устаревший атрибут SVG. Даже если большинство браузеров все еще поддерживает его, вместо него нужно использовать href . Но дело в том, что некоторые браузеры, например, Safari, не поддерживают ссылки на SVG-ресурсы через атрибут href , поэтому вам все равно нужно указывать xlink:href .

Для безопасности используйте оба атрибута.

Добавление цвета

В отличие от шрифтов, свойство color не действует на SVG-иконки: необходимо использовать атрибут fill для указания цвета. Это значит, что они не наследуют родительский цвет текста, но вы все равно можете стилизовать их через CSS.

.icon

А следовательно, вы можете создавать другие экземпляры этой же иконки разных цветов.

.icon < width: 100px; height: 100px; >.icon-red < fill: red; >.icon-blue

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

Сначала у вас может возникнуть идея положиться на специфичность.

.icon-colors .path1 < fill: red; >.icon-colors .path2 < fill: green; >.icon-colors .path3

Это не сработает.

Мы пытаемся задать стили для .path1 , .path2 и .path3 так, если бы они были вложены в .icon-colors , но технически это не так. use элемент это не плейсхолдер, который заменяется на определенный SVG. Это ссылка, которая копирует содержимое того, на что указывает, в shadow DOM.

И что нам тогда делать? Как мы можем повлиять на содержимое детей, когда говорят, что детей нет в DOM?

CSS-переменные помогут

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

В примере выше мы наследуем свойство fill . Посмотрите еще раз и вы увидите, что класс, в котором мы определили этот цвет fill добавляется к экземплярам иконки, а не к ее определению. Так мы смогли получить разноцветные копии одного источника.

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

Встречайте CSS-переменные.

CSS-переменные объявляются в наборах правил так же, как и любое другое свойство. Вы можете назвать их как хотите и присвоить им любое допустимое CSS значение. Затем вы определите через эту переменную значение свойства самого элемента или его ребенка, и оно будет наследоваться.

.parent

Все дети .parent будут иметь текст красного цвета.

.parent < --custom-property: red; >.child

Все .child , вложенные в .parent , будут иметь текст красного цвета.

Теперь давайте применим эту концепцию для нашего SVG-символа. Мы будем использовать атрибут fill для каждой части path в определении нашей SVG-иконки и зададим им разные CSS-переменные. Затем мы назначим им разные цвета.

.icon-colors

И… это работает!

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

.icon-colors-alt

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

.icon-monochrome

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

Как назвать мои CSS-переменные?

Обычно используют один из двух способов именования в CSS: описательный или семантический. Описательный — это значит назвать переменную по названию самого цвета: если ваш цвет #ff0000 , вы называете переменную —red . Семантический — это значит назвать переменную по ее назначению: если вы используете цвет #ff0000 для ручки чашки, вы называете переменную —cup-handle-color .

Возможно вашим первым желанием будет использовать описательный способ наименований. Это кажется естественным, поскольку цвет #ff0000 может использоваться и для других вещей, помимо ручки чашки. CSS-переменную —red можно использовать и для других частей иконки, которые должны быть красными. В конце концов, так работает методология utility-first CSS и она хороша.

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

Использование семантического способа наименований, как например, —cup-handle-color , в нашем случае более уместно. Когда вам нужно изменить цвет какой-то части иконки, вы точно знаете, что и как вам нужно переопределить. Имя класса останется актуальным независимо от того, какой цвет вы назначили.

По умолчанию или не по умолчанию

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

Добиться этого можно двумя способами: через :root или через var() default.

:root

Вы можете определить все ваши CSS-переменные в селекторе :root . Это позволит держать их все в одном месте и «делиться» схожими цветами. :root имеет самую низкую специфичность, поэтому его легко переопределить.

:root < --color-1: red; --color-2: green; --color-3: blue; --color-4: var(--color-1); >.icon-colors-alt

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

В большинстве случаев, когда в иконке используется только один цвет, я называю переменную —fill-color . Это просто, понятно и позволяет использовать это наименование для всех одноцветных иконок. Если я определю все переменные в селекторе :root , я не смогу иметь несколько переменных —fill-color . Я буду вынуждена определять —fill-color-1 , —fill-color-2 или использовать пространства имен такие, как —star-fill-color , —cup-fill-color .

var() default

Функция var() , которую вы используете для назначения CSS-переменной для свойства, может принимать значение по умолчанию в качестве второго аргумента.

Пока вы не определите —color-1 , —color-2 и —color-3 , иконка будет использовать значения по умолчанию, установленные для каждого path . Это решает проблему глобального определения, которую мы имеем при использовании :root , но будьте осторожны: теперь у вас есть значение по умолчанию, и оно выполняет свою работу. Таким образом, вы больше не можете написать только одно свойство fill , чтобы сделать иконку монохромной. Вам нужно назначать цвет для каждой CSS-переменной, используемой в иконке, по отдельности.

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

Как это все поддерживается браузерами?

CSS-переменные поддерживаются всеми современными браузерами, но, как вы вероятно догадались, IE не поддерживает их, совсем. Даже IE11, и поскольку его развитие было прекращено в пользу Edge, нет никаких шансов, что он когда-либо будет их поддерживать.

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

Все, что вам нужно сделать, — это добавить определение цвета, которое будет работать только, если CSS-переменные не поддерживаются. Этого можно добиться, указав свойству fill резервный цвет. Если CSS-переменные поддерживаются, это объявление не будет учтено. Если же это не так, оно сработает.

Если вы используете Sass, вы можете записать эту проверку в @mixin .

@mixin icon-colors($fallback: black)

Теперь можно определять цветовые схемы, не беспокоясь о поддержке браузеров.

.cup < @include icon-colors() < --cup-color: red; --smoke-color: grey; >; > .cup-alt < @include icon-colors(green) < --cup-color: green; --smoke-color: grey; >; > 

Передача CSS-переменных в mixin через @content необязательна. Если вы сделаете это снаружи, скомпилированный CSS будет таким же. Но может быть полезно держать все это в одном месте.

Вы можете проверить этот пример в разных браузерах. В последних версиях Firefox, Chrome и Safari последние две чашки будут соответственно красной с серым паром и синей с серым паром. В Internet Explorer и Edge ниже 15 версии третья иконка будет вся красная, а четвертая — вся синяя.

• Веб-разработка
• CSS
• Работа с векторной графикой

Применение SVG mask в CSS правилах

Топик с подобным же названием не подходит так как не вариант: Практическое применение SVG mask Интересует именно применение некой маски к обычному html тегу img и так же не интересует анимация маски и прочее что не относится к телу вопроса Я хочу применить маску SVG к неизвестному количеству изображений но выходит не понятка, изображений не видно, прилогаю код

img < display: block; max-width: 100%; >.grid < width: 480px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; margin: auto; >.grid-item img

Что надо сделать что бы заработало mask из css ? Вот такого поведения я хочу добиться

let svg = document.querySelectorAll(".grid svg"); let svgImage = document.querySelectorAll(".grid svg image"); svg.forEach(function(el) < el.setAttribute("viewBox", "0 0 155 219"); el.setAttribute("xmlns", "http://www.w3.org/2000/svg"); >); svgImage.forEach(function(el) < el.setAttribute("x", 0); el.setAttribute("y", 0); el.setAttribute("width", "100%"); el.setAttribute("height", "100%"); el.setAttribute("preserveAspectRatio", "none"); el.setAttribute("mask", "url(#mask)"); >);

.mask < position: fixed; top: 0; left: 0; opacity: 0; >.grid

Отслеживать
Резидент Казахстана
задан 1 мая 2021 в 7:06
Резидент Казахстана Резидент Казахстана
13.5k 2 2 золотых знака 19 19 серебряных знаков 61 61 бронзовый знак
ассоциация stackoverflow.com/q/67447639/6339052
8 мая 2021 в 12:43
@Sevastopol’ на самом деле у меня такой ответ . в смысле такой же
9 мая 2021 в 11:15

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Я единственное что придумал, это подменить тег img на svg > image, идея была моя а вот с реализацией мне помогли, выглядит это так

let images = document.querySelectorAll(".grid .item img"); images.forEach(function(it) < it.parentNode.innerHTML = `  `; >);

.grid

Отслеживать
ответ дан 6 мая 2021 в 23:32
Резидент Казахстана Резидент Казахстана
13.5k 2 2 золотых знака 19 19 серебряных знаков 61 61 бронзовый знак

Маскирование — это одна из популярных операций (наряду с отсечением), используемая для скрытия частей элемента, которые под маской частично или полностью будут непрозрачны. Существуют различные способы сделать маскирование, как с помощью CSS , так и SVG . Однако, нужно понимать, что здесь имеются свои различия. Не всегда можно получить ожидаемый результат, как от использования бы SVG , применяя свойства CSS .

Автор вопроса для маскирования использует CSS свойство mask: url(#mask); , значение которого ссылается на SVG-элемент. И получает следующий результат:

Я хочу применить маску SVG к неизвестному количеству изображений но выходит не понятка, изображений не видно

И такой результат ожидаем, потому что CSS свойство mask работает не совсем так, как оно работало бы в SVG , в результате чего объект содержимого SVG-элемента полностью перекрывает изображение, поэтому мы его и не видим.

Для того, чтобы получить результат, близкий к ожидаемому, создадим внешний SVG файл со следующим содержимым:

и будем его использовать в качестве маски. Пример:

Результат немного отличается от ожидаемого, потому что элементы содержимого SVG файла расположены на расстоянии друг от друга.

Если использовать такую маску, которую использует автор вопроса, то получим следующий результат:

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

Вывод

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

UPD/ Результат, который ожидает автор вопроса:

Как перекрасить svg в css

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

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

• векторные изображения масштабируются без потери качества и лучше отображаются на устройствах с ретиной;
• SVG, как правило, весит несколько меньше, чем PNG-версия того же изображения;
• содержимое рисунка описывается на XML, SVG-файл можно открыть в текстовом редакторе и увидеть человекопонятный код;
• поэтому SVG-изображение можно не только нарисовать в векторном редакторе, но и написать руками;
• SVG-файл — это всегда исходник. В отличие от растровой графики, для его редактирования не требуется исходный PSD-файл, содержимое файла не склеивается в один слой, поэтому его всегда можно просто открыть и отредактировать. Правда, если в файле также есть стили и скрипты, лучше так не делать, потому что содержимое перезапишется;
• внутри SVG-файла можно описывать тени и градиенты, причем использовать их можно не только внутри этого файла, но также можно применять и к внешним элементам (пока работает не везде);
• внутри файла могут находиться CSS и JavaScript.

SVG хорошо поддерживается всеми современными браузерами и его уже вполне можно использовать, предусмотрев PNG-версии для старых браузеров.

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

Хорошо видно, что SVG (внизу) в этих условиях выглядит гораздо лучше, чем PNG (наверху). Так что если поставить себе задачу сделать сайт, который хорошо выглядит на любых устройствах, SVG очень пригодится.

Уже сейчас можно найти довольно много сайтов с готовой SVG-графикой, например:

В основном, это наборы иконок.

Можно использовать картинки как есть, а можно перекрасить, объединить в стек, спрайт или сделать шрифт.

SVG на страницу можно вставить несколькими способами. Они по-разному поддерживаются браузерами и предоставляют разные возможности.

Embed/object/iframe

Содержимое доступно для внешнего JavaScript. Хорошая поддержка браузерами (все, кроме IE8 и ниже).

Embed:

Object:

Iframe:

Embed:

embed src="your.svg" width="199" height="200">

Object:

object data="your.svg" type="image/svg+xml" width="199" height="200">object>

Iframe:

iframe src="your.svg" width="199px" height="200px">iframe>

Поддержка браузерами:

IE	Opera	Opera Mini	Opera Mobile	Chrome	Firefox	Safari
9+	9+	5+	10+	4+	3+	3.2+

IMG

Содержимое недоступно для JS.

img src="your.svg">

Поддержка браузерами:

IE	Opera	Opera Mini	Opera Mobile	Chrome	Firefox	Safari
9+	9+	5+	10+	4+	4+	4+

CSS-фоны

Содержимое недоступно для JS. Могут быть проблемы в старых Операх. Не работает в Opera Mini В Opera Mini работает только без viewBox в SVG.

background-image: url(your.svg);

Поддержка браузерами:

IE	Opera	Opera Mini	Opera Mobile	Chrome	Firefox	Safari
9+	12+	5+	16+	5+	24+	5+

Инлайновый SVG

Не работает в Opera Mini.

Поддержка браузерами:

IE	Opera	Opera Mini	Opera Mobile	Chrome	Firefox	Safari
9+	11.6+	—	12+	7+	4+	5.1+

Примеры в посте вставлены как есть, без фолбеков. Можно открыть страницу в интересующем браузере и посмотреть как поддерживаются разные способы вставки.

Способы отображение в старых браузерах:

1. Хак для элемента с фоном:

DIV  background-image: url(your.png); /* PNG для IE6-8 */ background-image: url(your.svg), none; >

Вторая строка сработает в браузерах с поддержкой CSS3, старые её проигнорируют и покажут PNG из первой строки.

2. Способ с image

Современные браузеры выберут атрибут xlink:href и покажут SVG, старые выберут src и покажут растровую версию:

svg width="200px" height="200px"> image xlink:href="your.svg" src="your.png" width="200px" height="200px"/> svg>

Способ найден здесь: lynn.ru/examples/svg/. Про этот способ есть статья у Криса Коера Svg fallbacks, в которой он анализирует этот вариант вставки и предлагает другие.

Способ хорошо работает в IE8 и Opera Mini. Минус способа — загрузка обоих файлов в IE9-11, хотя отобразится только SVG. Также есть проблемы с отображением в 12-й Опере: вместо картинки иногда загружается вот такое:

3. Modernizr

Элементы, содержащие SVG-графику, заворачиваются в div.svg (например). Затем определяем поддержку SVG с помощью Modernizr, браузеры без SVG определяем по классу .no-svg , дальше немного CSS:

/* Задаем обертке размеры и фон в PNG: */ .no-svg .svg  width: 200px; height: 200px; background: url(your.png); /* PNG-заглушка */ > /* Скрываем содержимое обертки (иначе будут отображаться иконки незагрузившихся картинок) */ .no-svg .svg IFRAME, .no-svg .svg OBJECT, .no-svg .svg EMBED, .no-svg .svg IMG  display: none; >

Стили сработают только в браузерах, не поддерживающих SVG.

Хорошее решение для IE8 и старше, но может возникнуть проблема с Opera Mini. Она имеет частичную поддержку SVG, поэтому не будет селектора .no-svg , и при этом она не поддерживает SVG в CSS-фонах и Inline Svg, так что они не отобразятся.

4. :root

Селектор :root сработает только в браузерах с поддержкой CSS3, следовательно с его помощью также можно отфильтровать стили для старых и для новых браузеров.

/* По умолчанию показываем PNG: */ .svg  width: 200px; height: 200px; background: url(your.png); > /* Контейнеры с SVG скрыты. */ .svg IFRAME, .svg OBJECT, .svg EMBED, .svg IMG  display: none; > /* Включаем содержимое для браузеров с поддержкой CSS3 */ :root IFRAME, :root OBJECT, :root EMBED, :root IMG  display: inline-block; >

Как и предыдущее решение, подойдет для IE8 и старше, но не поможет в Opera Mini, потому что она поддерживаeт CSS3, поэтому не будет заглушек для элементов с SVG-фоном и инлайновым SVG.

5. Решение для Opera на Presto (например, 12 и Mini)

В Opera 12 SVG-фоны могут вести себя странно, местами до сильного. Совершенно невинный CSS может привести к проблемам отрисовки векторых фонов при прокрутке страницы. Мне удавалось получить такое:

Действующий пример можно увидеть тут: http://jsbin.com/winag/1/edit. Откройте ссылку в Opera 12 и прокрутите страницу вверх-вниз.

В Opera Mini большие проблемы c фоновым SVG, а инлайновый не поддерживается совсем.

Opera Mini и фоновый SVG:

На этот случай можно использовать хак, который сработает только в Опере:

doesnotexist:-o-prefocus, .selector  background-image: url(your.png); >

Способ использует специфичный для оперы селектор, подробнее про такие селекторы можно почитать тут: opera.com/docs/specs/presto2.12/css/o-vendor

6. Селектор только для Opera Mini

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)  .selector  background-image: url(your.png); > >

Рассмотренная тема — только верхушка айсберга, в спецификации есть ещё много всего интересного. Продолжение следует : )

Показать комментарии

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

• SVG: полезные ссылки
• CSS-селекторы одной таблицей
• Таблица именованных цветов
• Функции Transform
• Свойства Transform
• Свойства Animation одной таблицей
• Разный синтаксис Flexbox
• Свойства Flexbox одной таблицей

Проекты