Getting the hang of emoji


by Jeremy Caudle
code

There is no way I will ever run out of things to learn about web development. I can't recall ever using emoji on a website, so I thought I'd learn how to do so today. It turns out to be quite easy and I'm looking forward to using it more in the future.

Going ⬇ a new 🐇 🕳!

I've never worked with emojis within HTML. It makes me feel quite old, but that's alright. 👺 I'll never be too old to learn new things. 😉

View the code:

HTML and JS 
<div class="code-block">
             <h2>Going <span role="img" aria-label="down">&#x2B07</span> a new <span role="img" aria-label="rabbit">&#x1F407</span> <span role="img" aria-label="hole" class="text-black">&#x1F573</span>!</h2>
            <p>I've never worked with emojis within HTML. It makes me feel quite old, but that's alright. <span role="img" aria-label="red tengu mask with long nose">&#x1F47A</span> I'll never be too old to learn new things. <span role="img" aria-label="winking face">&#x1F609</span></p>
        </div>
CSS 
.code-block {
                margin: 3rem auto;
                width: clamp(16em, 80vw, 40em);
                border: solid 1px salmon;
                background-color: rgb(233, 119, 107);
                font-size: 20px;
                border-radius: 1rem;
                padding: 1rem;
            }
 
            .code-block h2 {
                text-align: center;
                color: white;
                font-family: Helvetica, Arial, sans-serif;
                font-size: 2rem;
            }

            .code-block span {
            display: inline-block;
            text-shadow: 2px 2px rgba(0, 0, 0, 0.125);
            transform: rotate(1deg) scale(1.05);
            transition: transform .125s ease-out;
            }

            .code-block span:first-of-type {
            display: inline-block;
            text-shadow: 2px 2px rgba(0, 0, 0, 0.125);
            transform: scale(1.1);
            }

            .code-block span:hover {
                transform: rotate(-2deg) scale(1.5);
            }

            .code-block p {
                margin: auto auto 2rem auto;
                max-width: 60ch;
                line-height: 1.5;
                color: #222;
            }

            .text-black {
                color: black;
            }

Tags