Tag: Tribo do CI

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

 

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.

Campus Party – Grand Finale

Como deu pra perceber, os posts foram só diminuindo a frequência. Foram dias de muito conhecimento compartilhado, arquivos compartilhados, rede compartilhada, jogos também. Não dava muito tempo para dormir, nem comer. Passei os últimos dias da Campus Party tentando fazer mais contatos com as pessoas. Conversei com o Jonny Ken, Com o Cid (do não salvo), com várias outras pessoas já conhecidas na internet, e tive o prazer de conhecer as Garotas Geeks (apesar de não ter tirado foto com nenhuma delas 🙁

Bom, façamos um saldo do evento: Houve Apagão! Teve presença ilustre de várias pessoas, como Guilherme Briggs, Al Gore, Steve Wozniak, Marina Silva, Maddog etc. Teve campeonato de Cosplay, jogos (Urban Terror, Futebol, Guitar Hero, etc). Houve queda na internet, como se já não bastasse a queda na energia, e piadas sobre isso. E por fim, e mais chato de tudo isso, filas, filas e muitas filas.

No final teve uma garota que Dançou em cima da mesa, Teve Festa Duro (ou Hard Party), que simplesmente é o fato de reunir a galera no estacionamento para beber e trocar idéias. E teve mais uma fila para ir embora.

A volta foi tão aterrorizantemente cansativa quanto a ida. Gastamos cerca de 20 horas para voltar a Goiânia. Dessas horas, algumas delas foram passadas esperando o pessoal, e esperando o outro ônibus na Rodoviária de Uberlândia.


Cansativo? Sim!!! E muito! Mas ano que vem estou lá de novo!