आधुनिक ब्राउज़रों में इमोजी वर्णों को शामिल करना संभव है, लेकिन कोई इसे एक रंग कैसे बना सकता है और वह रंग चुन सकता है?यूनिकोड इमोजी के लिए रंग
उदाहरण के लिए, यहां कुछ इमोजी और कुछ नियमित (विमान 0) यूनिकोड प्रतीक हैं। सभी लाल होना चाहिए, लेकिन केवल प्रतीकों को लाल रंग में प्रस्तुत किया जाता है।
एसोसिएटेड HTML + CSS:
<p>
</p>
<p>
♥★ℹ
</div>
p {
font-size: 3em;
color: red
}
हां, आप उन्हें रंग सकते हैं!
div {
color: transparent;
text-shadow: 0 0 0 red;
}<div></div>में निम्न में से कोई भी उत्तर काम नहीं करता है! मैंने इसे एक स्टैक स्निपेट में बदल दिया। दुर्भाग्य से यह केवल सिल्हूट ही कर सकता है क्योंकि पारदर्शिता के लिए कोई वास्तविक एन्कोडिंग नहीं है। तो उदा। स्माइली ग्रिमेस के समान ही प्रस्तुत करता है। संदेह है कि हम इसके बारे में बहुत कुछ कर सकते हैं। – mahemoff
क्या यह एक मैक अनन्य है: -पी, क्योंकि यह विंडोज 10 (किसी भी ब्राउज़र में) पर काम नहीं करता है। –
धन्यवाद, mahemoff। आप सही हैं, कुछ अधिक जटिल इमोटिकॉन्स खराब दिखेंगे, लेकिन उनमें से ज्यादातर के लिए यह बहुत कम या कोई फर्क नहीं पड़ता है। और आखिरकार, यह सबसे अच्छा है जो हम कर सकते हैं। @ ŠimeVidas, मैं विंडोज 10 पर स्वयं हूं, क्रोम 53. – Tigran
के रूप में इमोजी काफी नया है, यह अभी तक मूल रूप से समर्थित नहीं है स्टाइल।
कामकाज Twitter's Twemoji जैसे इमोजी फ़ॉन्ट का उपयोग करना है। फिर इसे बहुत ही स्टाइल किया जा सकता है जैसे फ़ॉन्ट विस्मयकारी या देशी यूनिकोड स्टाइल किया जा सकता है।
आप उन्हें एक ठोस रंग से भर सकते हैं:
p {
font-size: 20px;
color: transparent;
text-shadow: 0 0 0 blue;
}<p></p>
<p></p>
<p></p>या आप ca n उन्हें रूपरेखा:
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>मैं रूपरेखा के लिए 'नाम' जैसी दूसरी विशेषता का उपयोग करना पसंद करता हूं ताकि जब उपयोगकर्ता इमोजी हो, तो यह टूलटिप में दिखाई नहीं देता है। बहुत बढ़िया जवाब! –
हर इमोजी एक ही काम करता है। कुछ पुराने पाठ प्रतीक हैं जिनके पास अब एक (वैकल्पिक या डिफ़ॉल्ट) रंगीन प्रतिनिधित्व है, अन्य स्पष्ट रूप से (केवल) इमोजी के रूप में थे। इसका मतलब है कि, कुछ यूनिकोड कोडपॉइंट्स में दो संभावित प्रस्तुतियां होनी चाहिए, text और emoji। लेखकों और उपयोगकर्ताओं को एक या दूसरे के लिए अपनी वरीयता व्यक्त करने में सक्षम होना चाहिए। यह वर्तमान में अन्यथा अदृश्य variation selectors यू + एफई 0 ई (text, वीएस -15) और यू + एफई0 एफ (emoji, वीएस -16) के साथ किया गया है, लेकिन higher-level solutions (e.g. for CSS) प्रस्तावित किया गया है।
टेक्स्ट-शैली इमोजी मोनोक्रोमैटिक हैं और सीएसएस में currentcolor सीएसएस में किसी भी अन्य ग्लिफ की तरह, अग्रभूमि रंग में प्रदर्शित किया जाना चाहिए। यूनिकोड कंसोर्टियम overview of emojis by style (beta version) प्रदान करता है। "डिफ़ॉल्ट टेक्स्ट स्टाइल लेबल वाले कॉलम में किसी भी चीज़ के साथ टेक्स्ट संस्करण का चयन करने के लिए आपको HTML में ︎ संलग्न करने में सक्षम होना चाहिए; में वीएस "और" डिफ़ॉल्ट इमोजी स्टाइल; में वीएस है "। इसमें इमोजी और कई अन्य उदाहरण शामिल नहीं हैं, हालांकि।
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>मैं जोड़ दिया है U + 1F480 खोपड़ी और U + 1F44C ठीक हाथ साइन क्योंकि पृष्ठभूमि उनके "आंखें" के माध्यम से दिखाया जाना चाहिए और मैं आंकिक केरेक्टर सन्दर्भ का उपयोग किया है सिर्फ बनाने के लिए प्रतिलिपि और पेस्ट त्रुटियों के खिलाफ कोड अधिक स्पष्ट और अधिक मजबूत।
हालांकि, यह प्रस्तावित किया गया है कि दोनों भिन्नता चयनकर्ताओं को किसी भी चरित्र पर लागू किया जा सकता है, जिसका अधिकांश मामलों में कोई प्रभाव नहीं पड़ेगा। ध्यान दें कि कुछ विक्रेता, विशेष रूप से सैमसंग, पहले ही शिपिंग कर रहे हैं (डिफ़ॉल्ट) emoji glyphs for several other characters (goo.gl/a4yK6p या goo.gl/DqtHcc)।
कुछ, लेकिन सभी नहीं, कोड बिंदु या तो टेक्स्ट फॉर्म (गैर-चित्र-आधारित ग्लाइफ) या इमोजी फॉर्म (चित्र-आधारित ग्लाइफ) में खींचा जा सकता है। यूनिकोड का वर्णन है कि इन दो रूपों को दो भिन्नता चयनकर्ताओं में से एक का उपयोग करके चुना जा सकता है: या तो यू + एफईईई (वैरिएंशन सेलेक्टर -15) या यू + एफई0 एफ (वैरिएंशन सेलेक्टर -16)। गैर-चित्र-आधारित रूप में खींचे जाने पर, color सीएसएस संपत्ति लागू होनी चाहिए।
उदाहरण:
U + 2603 (Snowman) इस तरह से तैयार की है: ☃
कोड अंक के अनुक्रम U + 2603 U + FE0E इस तरह से तैयार की है: ☃︎
अनुक्रम कोड अंक के U + 2603 U + FE0F इस तरह से तैयार की है: कोड अंक जो इन भिन्नता दृश्यों में भाग लेने की एक पूरी सूची के साथ साथ, ☃️
अधिक जानकारी, http://unicode.org/emoji/charts/emoji-variants.html
में पाया जा सकता(नोट करें कि नंगे कोड बिंदु का उपयोग होने पर विभिन्न ऑपरेटिंग सिस्टम एक अलग डिफ़ॉल्ट चुन सकते हैं। यदि आप उसके बाद लिखें बाद सीएसएस उपयोग करने की आवश्यकता, छद्म तत्व से पहले तो आप इस प्रकार
<span class="react-thumb-fly" title="Aimé">
<button class="react-toggle-icon-thumb"></button>
</span>
proced सकते
नंगे कोड अंक ऊपर अलग दिखता है) - उदाहरण के लिए, MacOS और iOS में इस पोस्ट को देखने की कोशिश करो! यह सीएसएस
.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);
}
}
फ़ायरफ़ॉक्स और एज –