CSS tricks

I learned a very interesting technique today.

I needed a thought bubble icon and wanted to use a unicode character for this 💭.

However to my surprise I could not color this using CSS, despite in general this works with unicode characters. It turns out that some unicode characters are implemented as a bitmap and coloring does not work on them.

There is an interesting hack, that can solve this issue:

stackoverflow.com/questions/32413731/color-for-unicode-emoji/39776303#39776303

𝚍𝚒𝚟 {
  𝚌𝚘𝚕𝚘𝚛: 𝚝𝚛𝚊𝚗𝚜𝚙𝚊𝚛𝚎𝚗𝚝;
  𝚝𝚎𝚡𝚝-𝚜𝚑𝚊𝚍𝚘𝚠: 0 0 0 𝚛𝚎𝚍;
}

I have a DOM mapping, in which I wrap DOM elements in Javascript classes. You can set properties with member functions of this DOM wrapper class. Every setter functions returns the class, so you can chain this. I can say something like

𝙳𝚒𝚟().𝚋𝚌("#0𝚏0").𝚠(𝟷00).𝚑(𝟷00)

and this would create a green 100 x 100 div.

Now I can create a new property setter, which can do all the above trick:

𝚝𝚜𝚑(𝚝𝚎𝚡𝚝𝚜𝚑𝚊𝚍𝚘𝚠){
   𝚝𝚑𝚒𝚜.𝚎.𝚜𝚝𝚢𝚕𝚎.𝚝𝚎𝚡𝚝𝚂𝚑𝚊𝚍𝚘𝚠 = 𝚝𝚎𝚡𝚝𝚜𝚑𝚊𝚍𝚘𝚠
   𝚛𝚎𝚝𝚞𝚛𝚗 𝚝𝚑𝚒𝚜
}

𝚜𝚑𝚌(𝚜𝚑𝚊𝚍𝚘𝚠𝚌𝚘𝚕𝚘𝚛){
   𝚛𝚎𝚝𝚞𝚛𝚗 𝚝𝚑𝚒𝚜.𝚌("𝚝𝚛𝚊𝚗𝚜𝚙𝚊𝚛𝚎𝚗𝚝").𝚝𝚜𝚑(`0 0 0 ${𝚜𝚑𝚊𝚍𝚘𝚠𝚌𝚘𝚕𝚘𝚛}`)
}

Note that I don't need "function" because this code is within a class definition.

From now on I can color unicode with one touch:

𝙳𝚒𝚟().𝚑𝚝𝚖𝚕("💭").𝚜𝚑𝚌("#00𝚏")

Looks like this:

Cool stuff! This is an unusual coincidence since I'm making a DOM -> html converter as a java project rn, and I hadn't even heard about it before the project (Yes, libraries already exist for this task, I know). Definitely looks better to make some of the emojis uniform colors and now you can make a reeeallly red angry face

Drawing arrow with CSS:

http://jsfiddle.net/pc78x6s2/