Desenhando a logo da Caelum com CSS

Além de instrutor da Caelum, eu também sou editor de conteúdo das redes sociais da própria Caelum, da Alura e da Casa do Código.

Além de criar e gerenciar o conteúdo que é postado, faz parte do meu trabalho interagir com as pessoas e ver o que elas estão falando sobre nós. E então, algumas semanas atrás fomos marcados em um tweet:

tweet

Eu e o Paulo Silveira achamos sensacional e pensamos: “esse cara tem que escrever um post pra gente!”.
Entramos em contato com o Jerfferson e ele topou!

O post a seguir é de autoria dele. Boa leitura 🙂


Estes dias atrás eu estava brincando no codepen quando um amigo me desafiou a desenhar a logo da Caelum com CSS. Eu aceitei o desafio e desenhei a logo que você pode conferir neste link.

Vou deixar claro que não é nenhum pouco prático desenhar uma logo com CSS, primeiro porque o CSS é uma linguagem de estilo, e segundo porque existem formas melhores para fazer isto, como, por exemplo, desenhar em um software de gráficos vetoriais e depois exportar com o formato SVG. Mas existem algumas coisas que podemos revisar nesta logo desenhada com CSS.

Eu vou mostrar como eu desenhei a logo e no decorrer da explicação eu citarei alguns tópicos (nem sei se vai ter tópico suficiente pra citar :B).

Se preferir, abra o codepen ou o jsfiddle para acompanhar.

Análise da logo da Caleum

Vamos fazer uma breve análise visual da logo da Caelum:

0-iUVQIOPkCegZzL8m-

O simbolo da logo da Caelum é basicamente composto por:

  • Um quadrado preto externo com esquinas arredondadas;
  • Um quadrado branco interno com esquinas arredondadas, porém com a esquina superior esquerda muito mais arredondada;
  • Uma estrela no canto superior esquerdo.

E temos o texto da logo, que eu basicamente ignorei a fonte utilizada na logo original (eu espero que o designer da logo não fique bravo comigo).

Desenho do símbolo da logo

Se existisse alguma parte complicada para desenhar a logo da Caelum com CSS, essa parte seria o símbolo, mas não existe. São basicamente dois quadrados arredondados 😀

Eis aqui todo o HTML do símbolo:

<div class="symbol"></div>

Sim, não precisaremos nada além de um único elemento, pois utilizaremos pseudo-elementos do CSS para atingir o nosso objetivo. Opa, e aqui está o primeiro tópico: pseudo-elementos.

Você pode acessar a documentação da Mozilla Developer Network para saber um pouco mais sobre pseudo-elementos.

Aqui estão as nossas primeiras linhas de CSS:

.symbol {
   width: 100px;
   height: 100px;
   background-color: #000;
   border-radius: 20px;
   position:relative;
}

Ok, temos agora o nosso primeiro quadrado preto.

Vamos adicionar mais um pouco de CSS:

.symbol:before {
   display:block;
   content:"";
   background-color:#FFF;
   position:absolute;
   left: 9px;
   top: 9px;
   right: 9px;
   bottom: 9px;
   border-radius: 14px;
   border-top-left-radius: 100%;
}

Acabamos de adicionar o detalhe branco interno, e agora já é possível visualizar a logo da Caelum se formando.

Note que eu utilizei o pseudo-elemento ::before com apenas um “:” (dois-pontos), o motivo é simples: Os pseudos elementos foram introduzidos no CSS2 com apenas um “:”, e na especificação do CSS3 os pseudos elementos foram implementados com dois “:” para poder diferenciar das pseudo-classes. Por questão de compatibilidade com alguns navegadores (IE8, cof cof!), é bom utilizar apenas “:before”.

Para terminarmos o símbolo, precisaremos adicionar a estrela no canto superior esquerdo.

E aqui estão as nossas últimas linhas de css para o símbolo da logo da Caelum:

.symbol:after {
   color: #FFF;
   content:"★";
   display:block;
   font-size: 18px;
   left: 8px;
   top: 8px;
   position:absolute;
}

Novamente eu utilizei um pseudo-elemento, porém desta vez eu utilizei o pseudo-elemento ::after para posicionar a estrela. A estrela é um caracter da tabela unicode.

Done! O nosso símbolo está pronto!

Nome e slogan da Caelum

Agora precisaremos adicionar o nome e slogan da Caelum. Para isto devemos incrementar o nosso HTML:

<div class="logo">
   <div class="symbol"></div>
   <div class="nome">caelum</div>
   <div class="slogan">ensino e inovação</div>
</div>

O css do nome e slogan da logo ficam dessa forma:

.logo {
   color: #000;
   font-family: "Arial";
   width: 400px;
   height: 140px; 
   position:relative;
}
.nome{
    font-size: 90px;
    line-height: 105%;
    position: absolute;
    right: 0;
    top: 12px;
}
.slogan {
   font-size: 30px;
   position:absolute;
   right: 4px;
   top: 102px;   
}

Aqui o CSS também é bem simples, a única questão é o posicionamento. Poderíamos ter posicionado o nome e o slogan de diversas maneiras (com float, por exemplo), mas eu preferi posicionar com auxílio do posicionamento absoluto, pois pra este caso é mais simples e não tem muitos pontos negativos.

É isso! Aqui terminamos de desenhar a logo da Caelum com CSS.

Considerações finais

Se você acessou o codepen que citei no início do post, provavelmente você deve ter notado que o CSS foi escrito com LESS. O único motivo para eu ter utilizado o LESS foi por causa das variáveis, pois seria possível redimensionar a logo baseado na largura dela.

Se você não conhece pré-processadores de CSS, recomendo que você dê uma olhada no LESS ou SASS.

Sinta-se a vontade para dar o seu feedback, ele será muito bem vindo :]

10 Comentários

  1. Sérgio Lopes 11/07/2016 at 10:22 #

    Fantástico, parabéns!

    Muito tempo atrás, lá pelos idos de 2010, época que o Firefox 3.5 era novidade e nosso logo nem era esse ainda, eu também escrevi um post aqui sobre logo em CSS: http://blog.caelum.com.br/css3-e-o-futuro-da-web/

    Meu demo:
    http://sergiolopes.github.io/css3-experimentos/logo-caelum-css3/caelum-css3.html

  2. Karoline Lemos 11/07/2016 at 22:00 #

    Ficou muito legal, mas acho que deveria ter feito a estrela com CSS também xD

  3. Paulo Silveira 12/07/2016 at 00:30 #

    deixamos o desafio para todos! 🙂

  4. lucio mauro lima da silva 12/07/2016 at 14:36 #

    Boa tarde pessoal, estou com projeto pessoal parado, pois não encontro solução para essa duvida, COMO FAÇO PARA CRIAR BOTÕES DENTRO DE UMA CANVAS (HTML5). Agradeço quem puder me ajudar.

  5. Raphael Lacerda 13/07/2016 at 12:23 #

    Isso que eu iria falar

    em 2010

    http://blog.caelum.com.br/css3-e-o-futuro-da-web/

    o Sergio fez um post com CSS3 e o logo

    ficou marcado na minha memória esse post

  6. Fabio 13/07/2016 at 22:07 #

    Muito bom!

  7. Vanderson Assis 14/07/2016 at 08:58 #

    Do caralho! CSS é poderoso demais.

  8. Jerfferson Ferreira 21/07/2016 at 20:50 #

    Opa, obrigado, Sérgio!

    Mas adivinha qual é a origem do desafio? Na mosca!
    Eu estava brincando em um outro code pen quando o meu amigo recordou e mencionou que você havia desenhado a logo da Caelum e me propôs o desafio.

    Obrigado por compartilhar o artigo 🙂

  9. Jerfferson Ferreira 21/07/2016 at 20:51 #

    Exato, Silveira!
    Depois poste o link do codepen, Karoline 🙂

  10. Adriano Neres 28/07/2016 at 12:09 #

    Muito bom!

    Eu vi o tweet na época e já tinha achado bacana. Há pouco tempo comecei a me aprofundar um pouco mais em CSS 3 e agora quando vejo algo assim fico viajando no que é possível fazer.

    Daria também pra adicionar um brilho nessa estrela logo que ela for renderizada, utilizando animations, né? Hahahaha…

Deixe uma resposta