Home Sobre F.A.Q Créditos Kawaii

novembro 17, 2017

Emojis Animados com CSS


Oie... é, eu sei que sumi de novo, mas, como disse a vocês em postagens anteriores, meu chá de sumiço tem a ver com cuidados com minha saúde, que graças a Deus, vai melhorando cada dia mais. Estava com saudades de vocês e de postar aqui, portanto...
Usar emojis em postagens é bem útil e eles geralmente vêm incorporados às redes sociais e blogs ou são encontrados em forma de imagens animadas ou não pela web. Mas, usando css e html você mesmo pode criar os seus.
Encontrei algumas sugestões no Codepen e uma das que mais gostei foi essa aqui. Fiz algumas modificações no código original e consegui transformar os sapinhos em... bem, a intenção era fazer ursos, só que não achei que ficou com cara de urso, tá mais para um monstrinho fofo, depois, quando os deixei rosa, me lembrou o pokemon jigglypuff...
Enfim, caso queiram usar, basta copiar um destes códigos:

Clique na primeira estrela rosa que aparece na caixa de códigos para copiar tudo de uma vez. O CÓDIGO 1, você deve colar no html do seu template antes de /b:skin. O CÓDIGO 2 deve ser colado onde quiser que o emoji apareça.
Para usar 1 emoji de cada vez, encontre o número correspondente ao emoji e use seu html. Por exemplo, se quiser usar o segundo emoji, procure por emojii #2 ou poke #2. Onde quiser que ele apareça cole:
<!--emojii #2-->
    <div class="emojii">
      <div class="bear" id="bear-2">
       
        <div class="bolinha">
          <div class="blush"></div>
          <div class="mouth big-mouth"></div>
        </div>
       
        <div class="eyes">
          <div class="eye eye-left">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
          <div class="eye eye-right">
            <div class="eye-inner">
              <div class="pupil">
                <div class="light"></div>
              </div>
            </div>
          </div>
        </div>
       
      </div>
    </div>
Basta encontrar o número do emoji de 1-9. Se quiser editá-los, no html do seu template procure pelo número, por exemplo bear-2 ou jigglypuff-2 e altere como preferir.
Vai aparecer assim:

Espero que gostem :3

Nenhum comentário:

Postar um comentário

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart

I it