Desenhando a logo da Caelum com CSS

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:

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 :D

Eis aqui todo o HTML do símbolo:

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:

Ok, temos agora o nosso primeiro quadrado preto.

Vamos adicionar mais um pouco de CSS:

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: ```css .symbol:after { color: #FFF; content:"★"; display:block; font-size: 18px; left: 8px; top: 8px; position:absolute; }

O css do nome e slogan da logo ficam dessa forma: ```css .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; }