Issue
What I'm trying to achieve is adding a text-shadow
to an emoji with the text-shadow
color being the most prominent color in the emoji.
I know there are JavaScript libraries that identify the most prominent color in images, but since the emoji is technically text I'm not sure how I'd do it or even if it's possible at all.
I would provide some code for what I've already tried, but quite honestly, I wouldn't even know where to start.
.emoji {
text-shadow: 0px 0px 20px rgba(54, 169, 230, 0.65);
padding: 3px 6px;
font-size: 24px;
}
<span class="emoji">💎</span>
Solution
An alternative approach without using text-shadow
is to copy the emoji, place it directly behind the original and blur it.
You could create the copy directly in the HTML, or if easier use js, as in the example below.
var emoji = document.querySelector("#blur-me");
var copy = emoji.cloneNode(true);
copy.classList.remove("emoji");
emoji.appendChild(copy);
.emoji {
padding: 3px 6px;
font-size: 24px;
position: relative;
display: inline-block;
}
.emoji span {
position: absolute;
left: 6px;
z-index: -1;
filter: blur(10px);
}
<span class="emoji" id="blur-me">💎</span>
Answered By - sol
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.