html - emojis - Color para Emoji Unicode

emojis html (8)

Es posible incluir caracteres Emoji en los navegadores modernos, pero ¿cómo se puede hacer que sea de un solo color y elegir ese color?

Por ejemplo, aquí hay algunos Emoji y algunos símbolos Unicode regulares (plano 0). Todos deben ser rojos, pero solo los símbolos se representan en rojo.

HTML + CSS asociado:

<p> 🐘🐧🐼 </p> <p> ♥★ℹ </div> p { font-size: 3em; color: red }

¡Sí, puedes colorearlos!

div { color: transparent; text-shadow: 0 0 0 red; }

<div>🚀🎭😻</div>

Algunos, pero no todos, los puntos de código se pueden dibujar en forma de texto (glifo no basado en imágenes) o en forma de emoji (glifo basado en imágenes). Unicode describe que estas dos formas se pueden seleccionar utilizando uno de los dos selectores de variación: U + FE0E (VARIATION SELECTOR-15) o U + FE0F (VARIATION SELECTOR-16). Cuando se dibuja en forma no basada en imágenes, se debe aplicar la propiedad CSS de color .

Ejemplo:

U + 2603 (SNOWMAN) se dibuja de esta manera: ☃

La secuencia de puntos de código U + 2603 U + FE0E se dibuja de esta manera: ☃︎

La secuencia de puntos de código U + 2603 U + FE0F se dibuja de esta manera: ☃️

Puede encontrar más información, junto con una lista completa de los puntos de código que participan en estas secuencias de variación, en http://unicode.org/emoji/charts/emoji-variants.html

(Tenga en cuenta que los diferentes sistemas operativos pueden elegir un valor predeterminado diferente cuando se usa el punto de código simple. Por ejemplo, intente ver esta publicación en macOS e iOS; ¡el punto de código simple anterior se ve diferente!)

Como Emoji es bastante nuevo, el estilo aún no es compatible de forma nativa.

La solución consiste en utilizar una fuente Emoji como Twemoji de Twitter . Luego se puede diseñar de la misma manera que se puede diseñar Font Awesome o Unicode nativo.

No todos los emoji funcionan igual. Algunos son símbolos textuales antiguos que ahora tienen una representación colorida (opcional o predeterminada), otros fueron explícitamente (solo) como emojis. Eso significa que algunos puntos de código Unicode deben tener dos representaciones posibles, text y emoji . Los autores y usuarios deberían poder expresar su preferencia por uno u otro. Esto se hace actualmente con selectores de variación invisibles U + FE0E ( text , VS-15) y U + FE0F ( emoji , VS-16), pero se han propuesto soluciones de nivel superior (por ejemplo, para CSS) .

Los emojis de estilo de texto son monocromáticos y deben mostrarse en el color de primer plano, es decir, el color currentcolor en CSS, como cualquier otro glifo. El Consorcio Unicode proporciona una descripción general de los emojis por estilo ( versión beta ). Debería poder agregar ︎ en HTML para seleccionar la variante textual con cualquier cosa en las columnas etiquetadas "Estilo de texto predeterminado; tiene VS "y" Estilo de emoji predeterminado; tiene VSs ". Sin embargo, esto no incluye el ejemplo de emojis 🐘🐧🐼 y muchos otros.

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"); }

He agregado Skull U + 1F480 Skull y 👌 U + 1F44C OK Hand Sign porque el fondo debería mostrarse a través de sus "ojos" y he usado referencias de caracteres numéricos solo para hacer que el código sea más obvio y más robusto contra copiar y pegar errores

Sin embargo, se ha propuesto que ambos selectores de variación se pueden aplicar a cualquier carácter, lo que no tendría ningún efecto en la mayoría de los casos. Tenga en cuenta que algunos proveedores, especialmente Samsung, ya están enviando glifos emoji (predeterminados) para varios otros caracteres ( goo.gl/a4yK6p o goo.gl/DqtHcc ).

Puedes llenarlos con un color sólido:

p { font-size: 20px; color: transparent; text-shadow: 0 0 0 blue; }

<p>🚀</p> <p>🎭</p> <p>😻</p>

O puedes delinearlos:

body { background: #fff; } p { margin: 0; color: transparent; text-shadow: 0 0 3px blue; font-size: 20px; position: relative; } p::before { content: attr(title); position: absolute; text-shadow: 0 0 0 #fff; }

<p title="🚀">🚀</p> <p title="🎭">🎭</p> <p title="😻">😻</p>

Quería hacerlo yo mismo, así que recientemente encontré una solución que usa efectos CSS más nuevos que también funcionan en Firefox y Edge.

Usando el filtro, primero normaliza el color usando sepia (1), luego satura el diablo para obtener un rojo puro. Si desea deshacerse de las líneas negras, aspire el contraste de los emoji antes de aplicar otros filtros usando contraste (0). Después de eso, simplemente gire la rueda de color de rojo a cualquier color que desee usando hue-rotate (). Tenga en cuenta que debido a que usé valores decimales en lugar de%, un valor de 100 significa 10000%.

Las compensaciones de tono se definen como que comienzan en rojo. Tenemos suerte de que la sepia sea principalmente roja, por lo que la rueda comienza perfectamente a 0 grados. Puede calcular qué desplazamiento desea con un convertidor de RGB a HSL. Encontré uno agradable escrito en Javascript aquí: https://web.archive.org/web/20180808220922/http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c

Debe multiplicar el valor del tono por 360 para obtener el resultado deseado de esa función. Un ejemplo sería rgbToHsl(0,100,100)[0]*360 . Lo que devolvería 180. Como no hay rojo, este sería el resultado esperado, estaría girando 180 grados lejos del rojo.

Como señaló Litherium y Crissov, también hay emojis de texto. Estos funcionan mejor con transformaciones y, a menudo, se ven mejor. Sin embargo, no puede aplicar el método que he descrito anteriormente, hasta que aplique primero invert(.5) en los emojis de texto, esto se debe a que las funciones necesitan algún tipo de sombra para operar. Entonces, simplemente agregando invert(.5) al comienzo de cada fórmula, les permite operar en ambos puntos de código en todos los navegadores.

.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>

Actualización: ahora hay paquetes más nuevos disponibles en npm que pueden calcular matices, etc. No necesita usar ese fragmento en el sitio web que había vinculado anteriormente. Aquí hay un ejemplo: https://.com/a/56082323/5078765

SI NECESITA USAR CSS DESPUÉS, ANTES DEL ELEMENTO PSEUDO, PUEDE PROCEDER COMO ESTE

<span class="react-thumb-fly" title="Aimé"> <button class="react-toggle-icon-thumb"></button> </span>

LUEGO ESCRIBA ESTO PARA 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); } }

Si desea mantener los detalles dentro del emoji, puede usar filter: url(svg) donde url() tomará un filtro 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>

Si bien el uso de feColorMatrix puede parecer desalentador al principio, en realidad es sencillo definir sus propios colores. Tome el siguiente ejemplo que representa el color rojo:

1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0

Si toma los valores en negrita de arriba, podemos ver cómo se relacionan con el modo de color RGBA:

1 - red (r) 0 - green (g) 0 - blue (b) 1 - alpha (a)

Aquí cada color se relaciona con un valor de 0 a 255 dividido por 255. Por lo tanto, si tuviera el color verde, que tiene un RGBA de:

R G B A (0, 255, 0, 1)

Entonces sus valores serían:

0/255 -> 0 (r) 255/255 -> 1 (g) 0/255 -> 0 (b) 1 -> 1 (a) - don''t divide

Y así, usando estos valores en nuestra matriz obtenemos:

0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0

Ahora puede agregar esto como un filtro adicional (o eliminar el anterior) y asignarle una id para que pueda ser referenciado dentro del filter: url(#filterID) css filter: url(#filterID)

Ver la versión implementada a continuación:

svg { display: none; } .red { -webkit-filter: url(#red); filter: url(#red); } .green { -webkit-filter: url(#green); filter: url(#green); }

<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>  <filter id="green"> <feColorMatrix type="matrix" values=" 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" /> </filter> </svg> <div class="red">🐘🐧🐼</div> <div class="green">🐘🐧🐼</div>

Tenga en cuenta Actualmente, esta solución tiene un soporte de navegador muy limitado. Para ver una lista completa de navegadores compatibles con esta función, consulte here .