Desenhando setas no HTML sem usar imagem (cross browser)

Uma técnica antiga mas ainda pouco explorada nos deixa desenhar setas usando apenas bordas. E o mais interessante de tudo é que funciona até em versões antigas do IE.

Alguns dias atrás eu ví um post muito interssante no NetTuts, falando sobre bordas. Achei genial, acabei postando como fazer circulos no HTML e agora vamos fazer setas sem usar nenhuma imagem.

É simples, precisamos ter um elemento com width e height 0 e declarar a borda do objeto com o tamanho da seta.

Vamos aos códigos:

Faça um <span>

<span class="colorido"></span>

E depois no CSS:

span{
	width:0;
	height:0;
	border:100px solid transparent;
	display:block;
}

Isso deixa um elemento com 200px de altura e largura, sendo 0 de height e 100px de cada borda.

span.colorido{
	border-top-color:#f00;
	border-left-color:#ff0;
	border-right-color:#0f0;
	border-bottom-color:#0ff;
}

O resultado vai ser esse quadrado colorido:

E colocando cor em somente uma borda, dá o efeito da seta. Veja os exemplos:

Seta pra cima

HTML

<span class="cima"></span>

CSS:

span.cima{ border-bottom-color:#000; }

Resultado:

Seta pra baixo

HTML

<span class="baixo"></span>

CSS:

span.baixo{ border-top-color:#000; }

Resultado:

Seta pra esquerda

HTML

<span class="esquerda"></span>

CSS:

span.esquerda{ border-right-color:#000; }

Resultado:

Seta pra direita

HTML

<span class="direita"></span>

CSS:

span.direita{ border-left-color:#000; }

Resultado:

[]s,

Scroll não serve só para se fazer parallax

Menu que fixa no topo

http://www.carterdigital.com.au/

Scrollando o menu, ao invés de sumir após a dobra, é fixado no topo.

Menu que fixa no topo

Travando a sidebar pra não ficar buraco

http://9gag.com/

Em sites de paginação infinita, não tem como popular a coluna da direita pra encher de conteúdo até o fim do mundo.

O 9gag criou uma solução interessante, travando a coluna a partir de um determinado ponto do scroll.

O Facebook também fez isso.

Travando a sidebar pra não ficar buraco

Alterando o conteúdo

http://krystalrae.com/

Ao Scrollar, a modelo vai trocando de roupa

Alterando o conteúdo

Fixando o título / share ao lado do conteúdo

Mostrando conteúdo relacionado

http://mashable.com/2012/03/26/kaggle/

Na interna do mashable, eles detectam quando você acabou de ler um post (baseado no seu scroll top) e mostram um box com algum conteúdo relacionado.

Mostrando conteúdo relacionado

My-Guitar – Um Guitar Hero em HTML5, CSS3 e JavaScript

Nessa sexta-feira, teve um café com browser, um evento sediado pela w3c Brasil onde ela convida fabricantes de browsers a falarem dos seus produtos, por lá já passou o pessoal do Ópera, Firefox e até da Internet Explorer.

Porém, nessa edição o formato foi diferente, o tema era HTML5 e os convidados foram o Élcio da Visie (empresa de treinamento e desenvolvimento web que vai oferecer um curso de html5) e a AgênciaClick, onde esteve presente eu (Programador de Interface), Robson Dantas (Gerente de Tecnologia) e Ricardo Murer (Diretor de Tecnologia).

Durante a nossa apresentação, mostramos alguns protótipos de estudos que fizemos aqui na AgênciaClick, entre eles um player usando a tag <audio> simulando a interface do winamp e um jogo simulando o Guitar Hero:

Escolha Sua Música

O jogo está disponível aqui. Funciona para Chrome 5+, Ópera 10.5+, Safari 5+ e Firefox 3.5+ (sendo que para Firefox, é necessário estar hospedado em um servidor, ou seja, se você abrir o html como um arquivo, não funciona por questão de segurança do Firefox).

O jogo usa os conceitos de <audio> e <canvas> do HTML5, CSS3 e bastante javascript. Eu desenvolvi o game em 4 dias, ou seja, dá pra melhorar muito, devo aprimorar o código, colocar Ranking Online, mais músicas, etc.

Mas a idéia inicial era mostrar que pode ser feito um jogo em html5, com 20kb de JavaScript que antes só era possível ser desenvolvido em flash.

Jogo Guitar Hero em HTML5

Game Over - Guitar Hero em HTML5

Snake – Jogo em html5 usando Canvas

Nos próximos posts vou escrever um pouco das experiências em html5 que ando fazendo.

Pra iniciar, fiz um jogo simples daqueles que todo celular tem, usando somente o elemento Canvas.

O Canvas funciona como se fosse um “shape” do photoshop, você cria um elemento e lá você pode desenhar literalmente, circulos, quadrados, linhas, pontos, colocar backgrounds, usar degradê, etc.

O Canvas não dá suporte ao ie6, ie7 e ie8. Existe um elemento similar pra eles chamado “shape” e existem algumas libs em javascript que traduz automaticamente tudo o que for desenhado em canvas pra shape, ou seja, você chama o js que ele se vira com o resto. No caso, usei o explorercanvas (dica do Koji), mas também tem o html5.js e o canvas.js disponível pra gente usar.

Jogo em html5

O jogo é bem simples, não tem muitos recursos, poderia ter ranking, som, opções e um monte plus mas não era essa a intenção do primeiro post sobre html5. O jogo tem 8kb (somando html / css e javascript ) pros browsers que suportam canvas e 19kb para os que não suportam. não usa nenhum framework de javascript (do tipo jquery, mootols, prototype) e não faz requisição de nenhuma imagem, tudo que está na tela foi desenhado em canvas com javascript.

Deixei disponível o código fonte e para jogar é só clicar na imagem ou entrar aqui

Por sinal, recomento o Chrome ou Opera 10.5 que são os browsers mais rápidos da atualidade.

Quem jogar, fala quantos pontos fez.
=)