В современных браузерах можно включать символы Emoji, но как можно сделать один цвет и выбрать этот цвет?
Например, вот некоторые символы Emoji и некоторые регулярные символы (плоскость 0) Unicode. Все должно быть красным, но только символы отображаются красным цветом.
Связанный HTML + CSS:
<p>
🐘🐧🐼
</p>
<p>
♥★ℹ
</div>
p {
font-size: 3em;
color: red
}
Да, вы можете их раскрасить!
div {
color: transparent;
text-shadow: 0 0 0 red;
}<div>🚀🎭😻</div>Не все эможи работают одинаково. Некоторые из них представляют собой старые текстовые символы, которые теперь имеют (необязательное или по умолчанию) красочное представление, другие были явно (только) как emojis. Это означает, что некоторые кодировки Unicode должны иметь два возможных представления: text и emoji. Авторы и пользователи должны быть в состоянии выразить свое предпочтение тому или другому. В настоящее время это делается с помощью невидимых селекторов вариаций U + FE0E (text, VS-15) и U + FE0F (emoji, VS -16), но были предложены более высокоуровневые решения (например, для CSS).
Текстовый стиль emojis является монохроматическим и должен отображаться в цвете переднего плана, т.е. currentcolor в CSS, как и любой другой символ. Консорциум Unicode предоставляет обзор emojis по стилю (бета версия). Вы должны иметь возможность добавлять ︎ в HTML, чтобы выбрать текстовый вариант с чем-либо в столбцах с надписью "Стиль текста по умолчанию, имеет VS" и "Стиль по умолчанию Emoji, имеет VS". Это не включает пример emojis 🐘🐧🐼 и многие другие.
p {
color: red; font-size: 3em; margin: 0;
text-transform: text; /* proposed */
font-variant-emoji: text; /* proposed */
font-variant-color: monochrome; /* proposed */
font-color: monochrome; /* proposed */
font-palette: dark; /* drafted for CSS Fonts Level 4 */
}
p.hack {
color: rgba(100%, 0%, 0%, 0);
text-shadow: 0 0 0 red;
}
p.font {
font-family: Emojione, Noto, Twemoji, Symbola;
}
@font-face { /* http://emojione.com/developers/ */
font-family: Emojione;
src: local("EmojiOne BW"), local("EmojiOne"), local("Emoji One"),
/* https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-bw.otf – monochrome only, deprecated, removed
https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-android.ttf – with hack
https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-apple.ttf – with hack */
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff2") format("woff2"),
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff") format("woff"),
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.otf") format("truetype");
}
@font-face { /* https://www.google.com/get/noto/#noto-emoji-zsye */
font-family: Noto;
src: local("Noto Emoji"), local("Noto Color Emoji"), local("Noto"),
url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoEmoji-Regular.ttf");
}
@font-face { /* https://github.com/eosrei/twemoji-color-font/releases */
font-family: Twemoji;
src: local("Twemoji");
}
@font-face { /* http://users.teilar.gr/~g1951d/ */
font-family: Symbola;
src: local("Symbola");
}<p title="🐘🐧🐼♥★ℹ💀👌 without variation selectors">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>
<p title="🐘🐧🐼♥★ℹ💀👌 with text variation selector 15">🐘︎ 🐧︎ 🐼︎ ♥︎ ★︎ ℹ︎ 💀︎ 👌︎</p>
<p title="🐘🐧🐼♥★ℹ💀👌 with emoji variation selector 16">🐘️ 🐧️ 🐼️ ♥️ ★️ ℹ️ 💀️ 👌️</p>
<p title="🐘🐧🐼♥★ℹ💀👌 with `text-shadow` hack" class="hack">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>
<p title="🐘🐧🐼♥★ℹ💀👌 with custom font" class="font">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>Вы можете заполнить их сплошным цветом:
p {
font-size: 20px;
color: transparent;
text-shadow: 0 0 0 blue;
}<p>🚀</p>
<p>🎭</p>
<p>😻</p>Я хотел сделать это сам, поэтому недавно я придумал решение, использующее новые эффекты CSS, которые также работают в Firefox и Edge.
Используя фильтр, вы сначала нормализуете цвет с помощью сепии (1), затем вы насыщаете черт из него, чтобы получить чистый красный. Если вы хотите избавиться от черных линий, высосите контраст из смайликов, прежде чем применять другие фильтры, используя контраст (0). После этого вы просто вращаете цветовое колесо от красного до любого нужного вам цвета с помощью функции hue-rotate(). Обратите внимание, что поскольку я использовал десятичные значения вместо%, значение 100 означает 10000%.
Смещения оттенка определяются как начинающиеся с красного. Нам повезло, что сепия в основном красная, поэтому колесо отлично запускается при 0 градусах. Вы можете рассчитать, какое смещение вы хотите, используя конвертер RGB в HSL. Я нашел хороший, написанный на Javascript здесь: https://web.archive.org/web/20180808220922/http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color- модель-с
Вы должны умножить значение оттенка на 360, чтобы получить желаемый результат от этой функции. Примером может быть rgbToHsl(0,100,100)[0]*360. Что бы вернуть 180. Поскольку красного цвета нет, это будет ожидаемый результат, вы будете поворачиваться на 180 градусов от красного.
Как указывал Литериум и Крисов, есть и текстовые смайлики. Они лучше работают с преобразованиями и часто выглядят лучше. Вы не можете применить метод, который я описал выше, однако, пока вы сначала не примените invert(.5) к тексту Emojis, это потому, что для работы функций необходим некоторый оттенок. Поэтому простое добавление invert(.5) в начало каждой формулы позволяет им работать с обоими кодовыми точками во всех браузерах.
.a { /* Normalize colour to a primary red */
filter: sepia(1) saturate(100);
}
.b { /* Less saturation so more features, shifted colour 90-degrees */
filter: sepia(1) saturate(5) hue-rotate(90deg);
}
.c { /* Remove black outlines if desired by removing contrast */
filter: contrast(0) sepia(1) saturate(100) hue-rotate(180deg);
}
.d { /* Other shades possible by lowering brightness */
filter: contrast(0) sepia(1) saturate(100) brightness(.05) hue-rotate(180deg);
}
.e { /* Weird possibilities with no colour normalization */
filter: contrast(100) hue-rotate(180deg);
}
.ma { /* Invert to provide a gray shade to apply sepia*/
filter: invert(.5) sepia(1) saturate(100);
}
div {
font-size: 25px;
}
.emo > div::after {
content: "🌍⛄😍🐱";
}
.mono > div::after {
content: "\1F30D\FE0E\26C4\FE0E\1F60D\FE0E\1F431\FE0E";
}<div class="emo">
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
<span>Change the code point to text mode:</span>
<div class="mono">
<div class="a"></div>
<div class="ma"></div>
</div>Некоторые, но не все, кодовые точки могут быть нарисованы либо в текстовой форме (не на основе изображения), либо в форме emoji (на основе изображения). Unicode описывает, что эти две формы могут быть выбраны с использованием одного из двух селекторов вариаций: либо U + FE0E (VARIATION SELECTOR-15), либо U + FE0F (VARIATION SELECTOR-16). При рисовании в форме, отличной от картинки, должно применяться свойство CSS color.
Пример:
U + 2603 (SNOWMAN) рисуется следующим образом: ☃
Последовательность кодовых точек U + 2603 U + FE0E рисуется следующим образом: ☃︎
Последовательность кодовых точек U + 2603 U + FE0F рисуется следующим образом: ☃️
Дополнительная информация, а также полный список кодовых точек, которые участвуют в этих вариационных последовательностях, можно найти на http://unicode.org/emoji/charts/emoji-variants.html
(Обратите внимание, что разные операционные системы могут выбирать другой по умолчанию, когда используется голой кодовый пункт. Например, попробуйте просмотреть этот пост в macOS и iOS - приведенная выше кодовая точка выглядит иначе!)
Поскольку Emoji является совершенно новым, его стиль еще не поддерживается.
Обходным путем является использование шрифта Emoji, такого как Twitter Twemoji. Тогда его можно охарактеризовать так же, как стиль шрифта Awesome или родной Unicode.
Если вы хотите сохранить детали в смайликах, вы можете использовать filter: url(svg) где url() примет фильтр svg
svg {
display: none;
}
div {
-webkit-filter: url(#red);
filter: url(#red);
}<svg>
<filter id="red">
<feColorMatrix type="matrix" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
</svg>
<div>🐘🐧🐼</div>ЕСЛИ ВАМ НЕОБХОДИМО ИСПОЛЬЗОВАТЬ CSS ПОСЛЕ, ПЕРЕД ПСЕВДО-ЭЛЕМЕНТОМ, ВЫ МОЖЕТЕ ПРОИЗОШИТЬ КАК ЭТО
<span class="react-thumb-fly" title="Aimé">
<button class="react-toggle-icon-thumb"></button>
</span>
ТОГДА НАПИШИТЕ ЭТО ДЛЯ CSS
.react-toggle-icon-thumb {
width: 20pt;
height: 20pt;
font-size: 30pt;
position: relative;
color: gray;
cursor: pointer;
border: none;
background: transparent;
margin-left: 0px;
margin-right: 8px;
top: -0px;
}
.react-toggle-icon-thumb:before, .react-toggle-icon-thumb:after {
position: absolute;
top: 0;
left: 0;
transition: all .3s ease-out;
content: "👍";
font-family: fontawesome;
color: transparent;
text-shadow: 0 0 0 #3498db;
}
.react-toggle-icon-thumb:hover:before {
transform: scale(1.2);
animation: thumbs-up 2s linear infinite;
}
@keyframes thumbs-up {
25% {
transform: rotate(20deg);
}
50%, 100% {
transform: rotate(5deg);
}
}