Главная » Языки программирования

Css after content svg color

Содержание
  1. Свойство content
  2. Сайдбар
  3. Статьи
  4. Страницы
  5. Проекты
  6. Change SVG fill color in :before or :after CSS
  7. Update

Свойство content

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

Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content . Достаточно такой строки:

Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:

Возможные значения свойства:

normal , none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.

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

DIV:before  content: url(//img-fotki.yandex.ru/get/5413/5091629.67/0_5ba12_81d03a82_XS.png); >

Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, буллеты списков.

Правда, тут появляется проблема лишних запросов к серверу.

  • спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
    Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
  • закодировать отдельные картинки в base-64 и вставлять через content: url() ;
  • закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.

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

Закодировать картинку в base64 можно с помощью онлайн-сервисов. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64 .

Вот так будет выглядеть код для иконки Instagram:

[href*="instagram.com"]:before  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQTgwMTE3NDA3MjA2ODExODA4Mzk4RDI3RDIwODg4MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NjAxNEU1NjQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NjAxNEU1NTQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3MDc3Njg4MTUyMDY4MTE4MDgzOThEMjdEMjA4ODgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBODAxMTc0MDcyMDY4MTE4MDgzOThEMjdEMjA4ODgyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++UbndwAAArdJREFUeNqUk0tME1EUhr+ZDoW2tBS0vLQCkqgLE4X4DBoBFxIXBqNCQI0rF8TEhS5MNC4MLkxcGRb4jonxFVApKBJNZCG+giJddAEoUEEWAikI9t2OMxeKJLrhZE7mPv7vv3fmniud2lN0EKjTspylxWstGxVVVU+szywoNRFkcHMa7nAxiqEYJjo5vtLwX1JjGBkZLXf3fJEVSZJKDcEwUSlELBIiHAkTisYxBkP4ff5/4BPX28X70pFydFbRO9FIBEWJEY/HialxpKkh+NFP0+CMEGdazazJyiDLZsFss6NqY+FAUMwJg0g4jCLFtb3FUIb7yQp+Zn/tYXz+KMHfs+QsT+Pp4wc4fk5SX7lJgNOTE3MGssXIwO9pCECwM0Ce00pZ5TFOnbuIxWpjwjeprTbL5frzdHe94nV3LynaQnrorJLqsLKv7igGay5Njx5SuruCutMXKCutITcnh9Rlybzpc3O24SZ3Lp7hZXsL1TW1xGbGaG2+i6wYZBwZNpwrsvF6h/H0DeFcvY5u93s8X0doedeLkreW6YAk5rxer9DqjM4q8wcjjkZ7SLXbGR8fIxhSCclx+j99YSZ7Pct2HSLZZNbPUGgRv3L+J4q2Npi/yklBpo3v3zyoRgujz64ip6Tz7cVtMvIzKdx7gOH8PKGd55EThaHn9i2baWtzcf/GFaKzPuQkI/6JAZga5NbJI7S6ngiNurAL/n6CnhuKNuLxeGhtacJ1twGf7xfJaQ7Mcpjme9cozHMKTUK/yGAujCkpVFVX8eFtF89dLYz7psS4I91OWclWtpXsEJrFIQzUWAQ1HkOWDVhsNnaWlVNUXEzAP1fKJrOZ1DS7gLXyFVqdSRh0DPX1VBRoDcmQtOBs0u6RyZro+YnN+tHqicSCGqM3O3SDxq6PbrSsWOJ17tDZPwIMAKAIId5/sWegAAAAAElFTkSuQmCC) >

Код длинный и заканчивается где-то за горизонтом. Кроме того, по коду непонятно что за картинка в нём лежит, и, при необходимости отредактировать, картинку надо будет каждый раз кодировать и вставлять заново, хотя в случае с обычным изображением его надо будет просто перезалить. В то же время есть плагин для гранта, который автоматически кодирует картинки и заменяет в коде адреса картинок на base64.

Подобным же образом можно вставлять SVG.

DIV:before content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" /></svg>'); >

Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.

Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.

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

BODY  counter-reset: h2-counter; counter-reset: p-counter; > DIV  counter-increment: h2-counter; > H2:before  content: counter(h2-counter) ". "; > P:before  content: counter(p-counter) ". "; counter-increment: p-counter; >

counter-reset задает имя счетчика.

counter-increment увеличивает значение заданного счетчика.

content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.

attr() — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.

A:before  content: attr(title); >

open-quote , close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes . Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.

BLOCKQUOTE  quotes: '"' '"' "'" "'"; > BLOCKQUOTE:before  content: open-quote; > BLOCKQUOTE:after  content: close-quote; >

no-open-quote , no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.

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

Сайдбар

Статьи

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

Страницы

Проекты

Источник

Change SVG fill color in :before or :after CSS

The accepted answer is incorrect, this is actually possible by applying a workaround with an SVG mask and background-color:

p:after < width: 48px; height: 48px; display: inline-block; content: ''; -webkit-mask: url(https://gh.max.ax/heart.svg) no-repeat 50% 50%; mask: url(https://gh.max.ax/heart.svg) no-repeat 50% 50%; -webkit-mask-size: cover; mask-size: cover; >.red:after < background-color: red; >.green:after < background-color: green; >.blue:after

red heart
 
green heart
 
blue heart

You’re not actually modifying the SVG DOM itself, you’re just changing the background color. That way, you could even use images or gradients as background.

Update

As MisterJ mentioned, this feature is sadly not widely supported.

After six years, the support for prefixed use has risen to 97%.

Using the content property generates (non-exposed) markup functionally equvialent to an svg in an element.

You cannot apply style to elements inside the svg document because:

  1. styles are not allowed to cascade across documents
  2. when using (or content , or any css image property that references svg) the svg document is not exposed by the browsers due to security concerns

Similar questions, but for background-image here and here.

So, to do what you want you must get around the two points above somehow. There are various options for doing that, e.g using inline svg, using filters (applied to the ) or generating different svg files (or data URIs), as in your question.

Источник

Читайте также:  Javascript object error message
Оцените статью
© 2024 Программирование