Tribo do C.I.

Só mais um blog de informática (só que não)

Dica Rápida: Desafio CSS (iMasters) – Especial Cone

julho 29th, 2013

 

cone

Há alguns dias atrás foi lançado no iMasters um desafio de css, criar um cone usando somente uma div, no html. No artigo do desafio, o Bernard de Luna estabeleceu algumas regras, dentre elas, que o único código HTML dentro do body seria este

 <div class="cone"></div>

GITHUB

Com intuito de inaugurar/divulgar o Github da Tribo do CI nós disponibilizamos a nossa implementação do Cone CSS no GitHub, feito por mim: Sheldon Led. Vamos explicar um pouco do código.

Algumas explicações sobre o código.

Se você observar a figura acima, com um olhar mais analítico, perceberá que o cone nada mais é do que um triângulo com a base arredondada em cima de um losango com uma borda arredondada e mais escura. O código CSS está bem dividido nessas 2 partes, o “triangulo” é o .cone:after e o “losango” é o

  • Pseudo-classes: Existe um artigo bem completo no Tableless sobre Pseudo-classes. Uma pseudo-classe, ou pseudo-elemento, nada mais é do que alguns comportamentos/padrões de elementos HTML em CSS. Para o cone, utilizamos a pseudo-classe :after, que em uma interpretação a grosso modo, interpreta um elemento depois do elemento em questão, que no caso é a div da classe cone.
  • Bordas: Tanto no .cone quanto no .cone:after controlamos cada borda separadamente. Existe uma explicação legal sobre bordas em CSS no site do Maujor.
  • Transform: Novamente, existe um artigo bem detalhado e com exemplos de CSS Transform no site do Tableless. No nosso cone utilizamos o transform para rotacionar o elemento. É possível utilizar vários efeitos inclusive simultaneamente com o transform, porém como ainda não é uma especificação definida, é preciso utilizar prefixos.
  • Prefixos: Os prefixos são propriedades de CSS que funcionam especificamente para um navegador, pelo fato de ainda não ser uma especificação W3C ou por ser uma especificação em teste. No cone utilizamos os prefixos: -webkit (Chrome, Safari e Opera mais recente),  -moz (Firefox, Iceweasel), -ms (Internet Explorer), -o (Opera). Utilizamos os prefixos no css transform e border-radius.
  • Box Shadow: O box-shadow é uma propriedade do CSS3 que desenha uma sombra atrás de um elemento. Ele foi utilizado para desenhar a borda mais escura da base do cone.

Você pode ver o código, no  Github da Tribo do CI e tentar fazer sua própria implementação de exemplo, e ver abaixo (caso seu navegador estiver atualizado) nosso exemplo sendo executado.

 

 

 

 

 

 

 

 

OBS: Usei como base de conhecimento para produzir o cone, esses Exemplos de figuras geométricas em CSS.

Sobre Sheldon Led:
Desenvolvedor e palestrante desde 2009. Já trabalhou com sistemas legados e software de gestão, mas hoje atua somente com web. Já participou do desenvolvimento de alguns portais governamentais e sites utilizando a plataforma Joomla e WordPress. Apesar de ser um desenvolvedor full-stack, tem focado seus estudos em tecnologias front-end e busca apoiar e colaborar em projetos envolvendo Software Livre, seja em eventos, material para estudo ou contribuição de código.

Tribo do C.I.

Tribo do C.I.

Só mais um blog de informática (só que não)